在 ASP.NET MVC 视图中按顺序加载操作答案

【问题标题】：Ordering loading of Actions in ASP.NET MVC View在 ASP.NET MVC 视图中按顺序加载操作
【发布时间】：2019-06-30 07:53:50
【问题描述】：

在 _Layout.cshtml 中，我们使用 PartialView 作为侧边栏，如下所示：

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

        </div>

控制器方法就是这样：

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

我在使用这种方法时遇到的一个问题是，在执行 Action 时它是不可预测的。有时它在打开页面时首先加载，有时它仅在渲染 Body 后加载（对于某些页面可能需要一些时间）。

如果可能的话，我想强制页面始终首先加载此 PartialView，但我还没有找到这样做的方法。

更新

找出我的问题并将其作为答案发布，结果证明我想多了（或者如果你愿意的话）。

首先，这里使用 ng-include 的原因是因为我们在局部视图上的 AngularJS 代码没有它就没有响应。控制器中的代码没有被触发。

在使用 ng-include 进行编辑之前，我们在 _Layout.cshtml 中插入了部分 HTML 页面，如下所示（简化）：

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

ViewBag.AngularController 在特定的 Razor 视图中设置（例如，Address.cshtml 会将其设置为“ng-controller=addressController”）

我希望运行“commonController”中的代码，因为它是在标签上设置的。但是很自然， ViewBag.AngularController 的值会覆盖在主体上设置的任何控制器。

修复方法是在局部视图的 div 中再次显式指定 ng-controller，然后 AngularJS 代码就可以工作了。

【问题讨论】：

标签： c# asp.net angularjs razor model-view-controller

【解决方案1】：

我认为最好使用Html.RenderPartial("_MenuSide.cshtml")。渲染是按顺序进行的，因此请确保在布局页面中将 RenderPartial 放在 RenderBody 之前。

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

【讨论】：

我在局部视图中使用 AngularJS（和 javascript）代码，这在使用 Html.(Render)Partial 时不起作用，除非我做错了
那么，你的延迟不是因为.net，因为.net首先呈现_Menuside.cshtml中提供的代码，然后是正文，之后角度将在客户端呈现为角度工作..为了克服这个问题，您将不得不显式隐藏正文，直到侧边栏加载
我稍微修改了一下。当我使用调用 MenuSide 操作并插入返回的 HTML 的自定义指令时，它似乎是同时加载的。但随后局部视图内的 Javascript 代码又被破坏了。我会试试你的建议。
@sangman 也想让你知道，我不是这方面的专家，建议你寻找更好的解决方案，只是想在这里帮助你！
我最终意识到我做错了，我会在我自己的答案中发布反馈

【解决方案2】：

原来是我想多了（或者如果你愿意的话）。

首先，这里使用 ng-include 的原因是我们在局部视图上的 AngularJS 代码没有它就没有响应。控制器中的代码没有被触发。

在使用 ng-include 进行编辑之前，我们在 _Layout.cshtml 中插入了部分 HTML 页面，如下所示（简化）：

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

ViewBag.AngularController 在特定的 Razor 视图中设置（例如，Address.cshtml 会将其设置为“ng-controller=addressController”）

我希望运行“commonController”中的代码，因为它是在标签上设置的。但是很自然， ViewBag.AngularController 的值会覆盖在主体上设置的任何控制器。

修复方法是在局部视图的 div 中再次显式指定 ng-controller，然后 AngularJS 代码开始工作：

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

而在局部：

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

【讨论】：