简体   繁体   English

在ASP.NET MVC视图中排序加载动作

[英]Ordering loading of Actions in ASP.NET MVC View

In _Layout.cshtml we're using a PartialView for the sidebar, like this: 在_Layout.cshtml中,我们为边栏使用PartialView,如下所示:

        @{ 
            var menuSideAction = Url.Action(MVC.Common.MenuSide());
        }
        <div ng-include="'@menuSideAction'">

        </div>

The controller method is just this: 控制器方法就是这样:

    public virtual ActionResult MenuSide()
    {
        return PartialView("~/Views/Shared/_MenuSide.cshtml");
    }

A problem I'm encountering with this approach is that it's not predictable when the Action is executed. 我用这种方法遇到的一个问题是,执行Action时无法预测。 Sometimes it loads first when opening the page, sometimes it only loads after the Body is rendered (which for some pages can take some time). 有时在打开页面时首先加载,有时仅在渲染Body之后才加载(某些页面可能需要一些时间)。

If at all possible I would like to force the page to always load this PartialView first but I haven't found a way to do that. 如果有可能,我想强制页面始终先加载此PartialView,但我还没有找到一种方法来执行此操作。

UPDATE UPDATE

Figured out my problem which I'll post as an answer, turns out I was overthinking (or underthinking if you will) it. 弄清楚我要发布的问题,作为答案,原来我在想(或者想不到的话)。

So first, the reason why were using ng-include here is because our AngularJS code on the partial view was not responding without it. 首先,为什么在这里使用ng-include是因为部分视图上的AngularJS代码没有它就没有响应。 Code in the controller was not being triggered. 控制器中的代码未触发。

Prior to the edit to use ng-include, we had a partial HTML page inserted in the _Layout.cshtml like this (simplified): 在使用ng-include进行编辑之前,我们在_Layout.cshtml中插入了部分HTML页面,如下所示(简化):

<body ng-controller="commonController">
    <div @(ViewBag.AngularController ?? "")>
        <div>
            @Html.Partial("_MenuSide")
        </div>
        <div>
            @RenderBody()
        </div>
    </div>
</body>

ViewBag.AngularController is set in specific Razor views (for example Address.cshtml would set it to "ng-controller=addressController") 在特定的Razor视图中设置了ViewBag.AngularController(例如,Address.cshtml会将其设置为“ ng-controller = addressController”)

I was expecting code in a "commonController" to be run, as it is set on the tag. 我期望在“ commonController”中运行代码,因为它是在标记上设置的。 However naturally, the ViewBag.AngularController value would override whatever controller was set on the body. 但是自然地,ViewBag.AngularController值将覆盖在主体上设置的任何控制器。

The fix is to explicitly specify ng-controller again in a div in the partial view and then AngularJS code was working. 修复方法是在局部视图的div中再次明确指定ng-controller,然后AngularJS代码开始工作。

I believe it is better to use Html.RenderPartial("_MenuSide.cshtml") . 我相信最好使用Html.RenderPartial("_MenuSide.cshtml") The rendering happens sequentially, so make sure you place the RenderPartial before RenderBody in your layout page. 渲染顺序发生,所以一定要放置RenderPartial之前RenderBody在你的页面布局。

<body>
    @{
        Html.RenderPartial("_HeaderNavBar");
    }
    <div class="container body-content">
        @RenderBody()
    </div>
</body>

turns out I was overthinking (or underthinking if you will) it. 原来我在想(或者想在想的话)。

So first, the reason why were using ng-include here is because our AngularJS code on the partial view was not responding without it. 首先,为什么在这里使用ng-include是因为部分视图上的AngularJS代码没有它就没有响应。 Code in the controller was not being triggered. 控制器中的代码未触发。

Prior to the edit to use ng-include, we had a partial HTML page inserted in the _Layout.cshtml like this (simplified): 在使用ng-include进行编辑之前,我们在_Layout.cshtml中插入了部分HTML页面,如下所示(简化):

<body ng-controller="commonController">
    <div @(ViewBag.AngularController ?? "")>
        <div>
            @Html.Partial("_MenuSide")
        </div>
        <div>
            @RenderBody()
        </div>
    </div>
</body>

ViewBag.AngularController is set in specific Razor views (for example Address.cshtml would set it to "ng-controller=addressController") 在特定的Razor视图中设置了ViewBag.AngularController(例如,Address.cshtml会将其设置为“ ng-controller = addressController”)

I was expecting code in a "commonController" to be run, as it is set on the tag. 我期望在“ commonController”中运行代码,因为它是在标记上设置的。 However naturally, the ViewBag.AngularController value would override whatever controller was set on the body. 但是自然地,ViewBag.AngularController值将覆盖在主体上设置的任何控制器。

The fix is to explicitly specify ng-controller again in a div in the partial view and then AngularJS code was working: 解决方法是在局部视图的div中再次明确指定ng-controller,然后AngularJS代码开始工作:

<body ng-controller="commonController">
    <div @(ViewBag.AngularController ?? "")>
        <div>
            @Html.Partial("_MenuSide")
        </div>
        <div>
            @RenderBody()
        </div>
    </div>
</body>

And in the partial: 并在部分中:

<div ng-controller="commonController">
    <!-- html code goes here -->
</div>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM