Calling partial view from _Layout.cshtml

Question

I have a main category and main category has its subcategory list in database. So its a relational database. For better understanding .edmx map picture is attached. Now my goal is a partial view called _GuestNav.cshtml will contain category and subcategory list display then this _GuestNav.cshtml will be called from _Layout.cshtml. So i am calling a partial view from _Layout.cshtml and that partial view contains dynamic data with foreach loop. So i want to know how can i loop properly to display Main Category and sub Category on _GuestNav.cshtml? I have tried my best to give you better understanding however ask me any question you may have.

Controller:

[ChildActionOnly]
        public PartialViewResult _GuestNav()
        {
            using (var db = new MyAppWebEntities())
            {
                return PartialView("_GuestNav", db.Categories.ToList());
            }
        }

_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")

    <link href="~/Content/font-awesome.min.css" rel="stylesheet" />
    <script src="~/Content/sweetalert.min.js"></script>
    <script src='https://www.google.com/recaptcha/api.js'></script>
    @RenderSection("scripts", required: false)

</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="@Url.Action("Index", "Home")">My App <i class="fa fa-refresh" aria-hidden="true"></i></a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    @Html.Partial("_GuestNav"); @* here i am calling partial view *@  
                </div>
            </div>
        </div>
    </nav>
    <div class="container body-content">
        @RenderBody()
        <hr />
        @Html.Partial("_Footer")
    </div>

</body>
</html>

_GuestNav.cshtml:

<ul class="nav navbar-nav">
    <li>@Html.ActionLink("Plans", "Plans", "Home")</li>

    @* Example of loop bellow *@
    @*@foreach (var allcat in allcats)
    {
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">@allcat.MainCatName<span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                @foreach (var subcat in allcat.subcat)
                {
                    <li><a href="#">subcat.SubcatName</a></li>
                }
            </ul>
        </li>
    }*@

    @* Wanted output like bellow from database---> *@
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Main Cat 1<span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Subcat</a></li>
            <li><a href="#">Subcat</a></li>
            <li><a href="#">Subcat</a></li>
            <li><a href="#">Subcat</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Main Cat 2<span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Subcat</a></li>
            <li><a href="#">Subcat</a></li>
            <li><a href="#">Subcat</a></li>
            <li><a href="#">Subcat</a></li>
        </ul>
    </li>
</ul>

Use `@Html.RenderAction("_GuestNav", "ControllerName")` instead of `@Html.Partial`. — Tetsuya Yamamoto, Jan 03 '18 at 06:24
Can you plz also give example of _GuestNav.cshtml handling? I mean proper way to loop though Main category and sub category — Kevin himch, Jan 03 '18 at 06:26
So i want to know how can i loop properly to display Main Category and sub Category on _GuestNav.cshtml? — Kevin himch, Jan 03 '18 at 06:30
`db.Categories.ToList()` returns `IEnumerable`, you can use indexing with `Count` as limit like this: `@for (var i = 0; i < Model.something.Count; i++) { @Model.something[i].SubcatName }` — Tetsuya Yamamoto, Jan 03 '18 at 06:32
Why i count them to just display? i have commented @foreach example code on _GuestNav.cshtml please read it for better understanding — Kevin himch, Jan 03 '18 at 06:33
There are examples for nested foreach like these: https://stackoverflow.com/questions/36037840/razor-nested-loops, https://stackoverflow.com/questions/11316971/foreach-inside-of-foreach-razor & https://stackoverflow.com/questions/8894442/mvc-razor-view-nested-foreachs-model. Just pick one which suits your viewmodel. — Tetsuya Yamamoto, Jan 03 '18 at 06:41

Jibin Balachandran · Accepted Answer · 2018-01-03T08:33:22.143

1

1.Change @Html.Partial("_GuestNav") to @{Html.RenderAction("_GuestNav", "YourControlerName");}

2.Add @Model TypeofYourViewModel on top of your partial view.

3.Change the looping as follows:

@foreach (var item in Model)
    {
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">@item.MainCatName<span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                @foreach (var subcat in item.subcat)
                {
                    <li><a href="#">subcat.SubcatName</a></li>
                }
            </ul>
        </li>
    }

Note: Change TypeofYourViewModel to whatever ViewModel you are passing into the partial view

edited Jan 03 '18 at 08:33

answered Jan 03 '18 at 06:50

Jibin Balachandran

3,381
1
24
38

Its `@Html.Action(...)` or `@{Html.RenderAction(...);}` – Jan 03 '18 at 07:43
I think you need to have a re-look at your `@Html.RenderAction()` syntax. Can you clarify what is the second parameter of RenderAction `_GuestNav` here? because RenderAction method is useful when the displaying data in the partial view is independent of the corresponding view model. – Kumar_Vikas Jan 03 '18 at 07:50
https://ibb.co/bQd2Ew plz check this picture. problem with RenderAction – Kevin himch Jan 03 '18 at 08:13
1

@Kevinhimch Sorry for that. Updated it. – Jibin Balachandran Jan 03 '18 at 08:38

Calling partial view from _Layout.cshtml

1 Answers1

Linked

Related