Question

我正在MVCOnlineShop上工作，我在navbar dropdownlist的主页上创建，其中类别为dropdown按钮，产品为dropdowncontent，我希望将其保留在ProductList View：

上

这是我的CategoryLayout.cshtml（ PartialView ）：

@model IEnumerable<MVCOnlineShop.Models.Category>
@{
    ViewBag.Title = "CategoryLayout";
}

@foreach (var Category in Model)
{
    <li>
        <div class="dropdown">
            <button class="dropbtn">
                @Html.ActionLink(Category.CategoryName,
"ProductList", new { Category = Category.CategoryID }, new { @style = "color:#1ABC9C;text-decoration:none;" })
        </button>

        <div class="dropdown-content">
            @foreach (var Product in Category.Products)
            {
                @Html.ActionLink(Product.ProductName,
     "Details", new { id = Product.CategoryID }, new { style = "text-decoration:none;" })
            }
        </div>
    </div>
</li>
}

这是我的ProductList.cshtml PartialView ：

@model MVCOnlineShop.Models.Category

@{
    ViewBag.Title = "ProductList";
}

<script src="~/Scripts/Productjs/bootstrap.min.js"></script>
<script src="~/Scripts/Productjs/jquery.js"></script>
<link href="~/Content/Productcss/bootstrap.min.css" rel="stylesheet">
<link href="~/Content/Productcss/2-col-portfolio.css" rel="stylesheet">


<div class="container">

    <!-- Page Header -->
    <div class="row">
        @foreach (var Product in Model.Products)
        {
            <div class="col-md-6 portfolio-item">
                <a href="#">
                    <img class="img-responsive" src="@Product.ImageID" alt="">
                </a>
                <h3>
                    <a href="#">@Html.ActionLink(Product.ProductName, "Details", new { id = Product.CategoryID })</a>
                </h3>
            </div>
        }
    </div>
</div>

这就是我在CategoryLayout.cshtml中呈现_Layout.cshtml以在dropdownlist上显示homepage的方式：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        @Html.Partial("CategoryLayout")
                    </ul>
                </div>
            </div>
          </div>

问题： 如何在navbar上展示此ProductList？

提前致谢！

Answer 1

创建子操作：

[ChildActionOnly]
public ActionResult Navbar()
{
    var categories = // get categories;
    return PartialView("_Navbar", categories);
}

然后，创建一个部分视图来渲染导航栏（_Navbar.cshtml）：

@model IEnumerable<MVCOnlineShop.Models.Category>
@foreach (var Category in Model)
{
    <li>
        <div class="dropdown">
            <button class="dropbtn">
                @Html.ActionLink(Category.CategoryName, "ProductList", new { Category = Category.CategoryID }, new { @style = "color:#1ABC9C;text-decoration:none;" })
            </button>

            <div class="dropdown-content">
            @foreach (var Product in Category.Products)
            {
                @Html.ActionLink(Product.ProductName, "Details", new { id = Product.CategoryID }, new { style = "text-decoration:none;" })
            }
            </div>
        </div>
    </li>
}

然后，在您希望导航栏显示的位置调用以下内容：

@Html.Action("Navbar", "Foo")

其中"Foo"是您添加子操作的控制器的名称。然后，视图可以使用它所需的任何模型，您仍然可以使用自己的模型渲染导航栏。

Answer 2

如果我理解我认为您正在寻找的是母版页

MSDN说：

ASP.NET母版页允许您为应用程序中的页面创建一致的布局。单个母版页定义了应用程序中所有页面（或一组页面）所需的外观和标准行为。

请注意部分说：您希望所有网页的标准行为...在您的应用中

所以你要做的就是重新思考你的方法。每个页面上必须出现的每个元素都要在母版页视图中定义。

请阅读此MSDN article about creating a master page and child pages

简单来说，这就是您的母版页应该如何：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="you_file_name.cs" Inherits="Site" %>

<html>
    <head>
    <asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
    <!-- some other elements like scripts, css, etc...-->
    </head>
    <body>
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">@Html.Partial("CategoryLayout")</ul>
    </div>
       <!-- Here add the code for rendering any other view at will ; for instance ProductList -->
    </body>
</html>

尽管如此：必须相应地创建要在母版页内呈现的所有其他视图（使用母版页创建视图内容...并在视图创建对话框中选择适当的母版页）

如何在ProductList页面上保留导航栏

2 个答案: