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.

kowsikbabu · Accepted Answer · 2019-02-06 12:58:32Z

1

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>

answered Feb 6, 2019 at 12:58

kowsikbabu

5091 gold badge6 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sangman Over a year ago

I'm using AngularJS (and javascript) code in the partial view, which doesn't work when using Html.(Render)Partial unless I was doing it wrong

kowsikbabu Over a year ago

Then, your delay is not because of .net, as .net renders the code provided in the _Menuside.cshtml first and then the body, after which angular will render as angular works on client end.. to overcome this, you're going to have to explicitly hide body until the sidebar has loaded

Sangman Over a year ago

I've tinkered with it a bit. When I use a custom directive that calls the MenuSide action and inserts the returned HTML, it does seem to load simultaneously. But then Javascript code inside the partial view is broken again. I'll try your suggestion.

kowsikbabu Over a year ago

@sangman also want to let you know, I'm not a big expert on this area and suggest you to look for better solutions available, just wanted to help you out here!

Sangman Over a year ago

I ended up realizing I was doing it wrong, I'll post feedback in my own answer

Sangman · Accepted Answer · 2019-02-07 10:29:30Z

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>

Collectives™ on Stack Overflow

Ordering loading of Actions in ASP.NET MVC View

UPDATE

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related