Today we will create a sample application to use dynamic button with partial view. Let’s create a sample MVC application & apply the below code snippets.

We need to create a partial view which will render in different pages.

Common View(Button):

<div>
    <button ng-repeat="btn in buttons"
            ng-click="this[btn.method]()" ng-if="btn.permission == 'true'">
        {{btn.title}}
    </button>
    {{lblMessage}}
</div>

Students View:

@{
    ViewBag.Title = "Student";
}

<div ng-controller="stdCtrl">

    <h2>{{title}}</h2>

    @Html.Partial("~/Views/Shared/cmnButton.cshtml")
    <hr />

    <form name="frmStudent">
        <div>
            {{stName}}
            <br />
            <div class="form-group">
                <label class="col-md-4 control-label">Name</label>
                <div class="col-md-7">
                    <input type="text" id="stName"
                           ng-model="stName" />
                </div>

            </div>

            <input type="submit" value="Submit">
        </div>
    </form>
</div>

@section JavaScript{
    <script src="~/scripts/appScript/studentCtrl.js"></script>
}

Teachers View:

@{
    ViewBag.Title = "Index";
}

<div ng-controller="tchrCtrl">
    <h2>{{title}}</h2>

    @Html.Partial("~/Views/Shared/cmnButton.cshtml")
    <hr />

    <form name="frmTeacher">
        <div>
            {{tcName}}
            <div class="form-group">
                <label class="col-md-4 control-label">Name</label>
                <div class="col-md-7">
                    <input type="text" id="tcName"
                           ng-model="tcName" />
                </div>

            </div>

            <input type="submit" value="Submit">
        </div>
    </form>
</div>

@section JavaScript{
    <script src="~/scripts/appScript/teacherCtrl.js"></script>
}

Our views are created now we will add some behavior using angular script. Here we have individual collection of permission & function name along with differentiate by angular controller.

Student JS: Now it is using stdCtrl collection to generate button on Teacher view along with it’s permission.

app.controller('stdCtrl', ['$scope', function ($scope) {
    $scope.title = 'Manage Student';

    //Enable if need controller based Button
    $scope.buttons = [
        { "method": "create", "title": "Create", "permission": "true" },
        { "method": "update", "title": "Update", "permission": "true" }
    ];

    $scope.create = function () {
        $scope.lblMessage = "Created Student: " + $scope.stName;
        console.log("Created Student" + $scope.stName);
    }

    $scope.update = function () {
        $scope.lblMessage = "Updated Student";
        console.log("Updated Student");
    }

    //Enable if need common function by cmnCtrl
    //$scope.save = function () {
    //    $scope.lblMessage = "Data Saved";
    //}

    //$scope.list = function () {
    //    $scope.lblMessage = "Data List";
    //}

    //$scope.reset = function () {
    //    $scope.lblMessage = "All Cleared";
    //}
}]);

Teacher JS: Now it is using cmnCtrl collection to generate button on Teacher view.

app.controller('tchrCtrl', ['$scope', function ($scope) {
    $scope.title = 'Manage Teacher';

    //Enable if need controller based Button
    //$scope.buttons = [
    //    { "method": "save", "title": "Save", "permission": "false" },
    //    { "method": "list", "title": "List", "permission": "true" },
    //    { "method": "reset", "title": "Reset", "permission": "true" }
    //];

    $scope.save = function () {
        $scope.lblMessage = "Data Saved";
    }

    $scope.list = function () {
        $scope.lblMessage = "Data List";
    }

    $scope.reset = function () {
        $scope.lblMessage = "All Cleared";
    }

}]);

A common controller also added to behave the button with same collection all over the application.

Common JS:

app.controller('userCtrl', ['$scope', function ($scope) {

    //Enable if need global Button
    $scope.buttons = [
        { "method": "save", "title": "Save", "permission": "true" },
        { "method": "list", "title": "List", "permission": "true" },
        { "method": "reset", "title": "Reset", "permission": "true" }
    ];

}]);

Finally: The view is now generating the dynamic button with same partial view in each page.

Source Code: I’ve uploaded the full source code to download/clone @github, Hope this will help 🙂