从_Layout.cshtml调用部分视图 [英] Calling partial view from _Layout.cshtml
问题描述
我有一个主要类别，主要类别在数据库中有其子类别列表.因此，它是一个关系数据库.为了更好地理解，请附加.edmx地图图片.现在，我的目标是一个名为_GuestNav.cshtml的局部视图，其中将包含类别和子类别列表显示，然后将从_Layout.cshtml调用此_GuestNav.cshtml.所以我要从_Layout.cshtml调用局部视图，该局部视图包含带有foreach循环的动态数据.所以我想知道如何正确循环以在_GuestNav.cshtml上显示主要类别和子类别?我已尽力使您更好地了解您，但是请问我任何问题.
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.
控制器:
[ChildActionOnly]
public PartialViewResult _GuestNav()
{
using (var db = new MyAppWebEntities())
{
return PartialView("_GuestNav", db.Categories.ToList());
}
}
_Layout.cshtml:
_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:
_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>
推荐答案
1.Change @Html.Partial("_GuestNav") to @{Html.RenderAction("_GuestNav", "YourControlerName");}
1.Change @Html.Partial("_GuestNav") to @{Html.RenderAction("_GuestNav", "YourControlerName");}
2.在部分视图的顶部添加@Model TypeofYourViewModel.
2.Add @Model TypeofYourViewModel on top of your partial view.
3.按如下所示更改循环:
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>
}
注意:将您的ViewModel的Type更改为要传递给部分视图的任何ViewModel
Note: Change TypeofYourViewModel to whatever ViewModel you are passing into the partial view
这篇关于从_Layout.cshtml调用部分视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
