Отделите шаблон пейджера таблицы ng от страницы *.cshtml и используйте его повторно, когда это требуется

Question

Я использую ngTable для отображения данных в моем проекте ASP.net MVC. В этой директиве я использую шаблон пейджера, как показано ниже.

Вот шаблон пагинации.

 <!-- 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>

У меня вопрос, как я могу отделить его от моего *.cshtml файла и использовать, когда это необходимо и для других страниц? В этот момент, когда я снова и снова использую один и тот же блок кода на каждой странице. Так что, если вы можете смоделировать свое решение на Plunk, это очень ценится.

Answer 1

Как насчет этого

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"
        };
    }
}

RenderRazorViewToString Метод был взят из Render представления в виде строки
ваш шаблон

PaginationTemplate.cshtml

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

тогда контроллер asp net mvc, например

HomeController

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

а потом в каком-то виде, например

Index.cshtml

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

Заметка

не забудьте ввести URL в действие в одинарных кавычках, здесь ' url '