Ordering loading of Actions in ASP.NET MVC View
Question
In _Layout.cshtml we're using a PartialView for the sidebar, like this:
@{
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. 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).
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.
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. 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):
<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")
I was expecting code in a "commonController" to be run, as it is set on the tag. However naturally, the ViewBag.AngularController value would override whatever controller was set on the body.
The fix is to explicitly specify ng-controller again in a div in the partial view and then AngularJS code was working.
2 answers
solution1
1 2019-02-06 12:58:32
I believe it is better to use Html.RenderPartial("_MenuSide.cshtml") . The rendering happens sequentially, so make sure you place the RenderPartial before RenderBody in your layout page.
<body>
@{
Html.RenderPartial("_HeaderNavBar");
}
<div class="container body-content">
@RenderBody()
</div>
</body>
solution2
1 ACCPTED 2019-02-07 10:29:30
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. 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):
<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")
I was expecting code in a "commonController" to be run, as it is set on the tag. However naturally, the ViewBag.AngularController value would override whatever controller was set on the body.
The fix is to explicitly specify ng-controller again in a div in the partial view and then AngularJS code was working:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.