从* .cshtml页面中分离ng-table寻呼机模板，并在需要时重复使用

Question

我使用ngTable在我的ASP.net MVC项目上显示数据。在该指令中我使用了寻呼机模板，如下所示。

以下是 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>

我的问题是如何将其与我的* .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 a view as a string
你的模板

PaginationTemplate.cshtml

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

然后是asp net mvc controller，例如

的HomeController

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

然后在某些视图中，例如

Index.cshtml

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

注意

不要忘记将url置于单引号内，' url '