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):

    
        {{btn.title}}
    
    {{lblMessage}}

Students View:

@{
    ViewBag.Title = "Student";
}



    
{{title}}

    .Partial("~/Views/Shared/cmnButton.cshtml")
    


    

        

            {{stName}}
            

            

                Name
                

                    
                

            

            
        
    


 JavaScript{
    
}

Teachers View:

@{
    ViewBag.Title = "Index";
}


    
{{title}}

    .Partial("~/Views/Shared/cmnButton.cshtml")
    


    

        

            {{tcName}}
            

                Name
                

                    
                

            

            
        
    


 JavaScript{
    
}

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 , Hope this will help 🙂