Separate ng-table pager template from the *.cshtml page and reuse when it requires

Question

I'm using ngTable for showing data on my ASP.net MVC project.On that directive I use pager template as shown below.

Here is the Pagination template.

 <!-- Pager Template -->
        <script type="text/ng-template" id="custom/pager">
            <ul class="pager ng-cloak">
                <li ng-repeat="page in pages"
                    ng-class="{'disabled': !page.active, 'previous': page.type == 'prev', 'next': page.type == 'next'}"
                    ng-show="page.type == 'prev' || page.type == 'next'" ng-switch="page.type">
                    <a ng-switch-when="prev" ng-click="params.page(page.number)" href="">&laquo; Previous</a>
                    <a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next &raquo;</a>
                </li>
                <li>
                    <div class="btn-group btn-group-sm">
                        <button type="button" ng-class="{'active':params.count() == 10}" ng-click="params.count(10)" class="btn btn-default">10</button>
                        <button type="button" ng-class="{'active':params.count() == 25}" ng-click="params.count(25)" class="btn btn-default">25</button>
                        <button type="button" ng-class="{'active':params.count() == 50}" ng-click="params.count(50)" class="btn btn-default">50</button>
                        <button type="button" ng-class="{'active':params.count() == 100}" ng-click="params.count(100)" class="btn btn-default">100</button>
                    </div>
                </li>
            </ul>
        </script>

My question is how can I separate it from my *.cshtml file and use when it needs for the other pages as well ? At this moment where I use same code block again and again on each and every page.So if you can simulate your solution on Plunk, it's highly appreciate.

Answer 1

how about this

ControllerExtension .cs

public static class ControllerExtension
{
    public static string RenderRazorViewToString(this Controller cont, string viewName, object model)
    {
        cont.ViewData.Model = model;
        using (var sw = new StringWriter())
        {
            var viewResult = ViewEngines.Engines.FindPartialView(cont.ControllerContext,
                                                                     viewName);
            var viewContext = new ViewContext(cont.ControllerContext, viewResult.View,
                                         cont.ViewData, cont.TempData, sw);
            viewResult.View.Render(viewContext, sw);
            viewResult.ViewEngine.ReleaseView(cont.ControllerContext, viewResult.View);
            return sw.GetStringBuilder().ToString();
        }
    }


    public static ContentResult NgTemplate(this Controller cont, string viewPath)
    {
        return new ContentResult()
        {
            Content = RenderRazorViewToString(cont,viewPath, null),
            ContentEncoding = Encoding.Default,
            ContentType = "text/ng-template"
        };
    }
}

the RenderRazorViewToString method was taken from Render a view as a string
your template

PaginationTemplate.cshtml

<ul class="pager ng-cloak">
      ...
    </ul>

then asp net mvc controller,for example

HomeController

public ActionResult Template()
    {
        return this.NgTemplate("PaginationTemplate");
    }

and then in some view ,for example

Index.cshtml

...     
<table ng-table="tableParams" template-pagination="'/Home/Template'" class="table">
...

Note

don't forget to put url to action inside single quotes,here ' url '