Question

问题背景：

我有一个实现BootStrap的MVC站点。目前，每个页面都基于MasterLayout视图页面。此主文件包含一个下拉列表，该列表将填充网站购物车中的购物车项目以及购物车的总货币价值。请注意，目前下拉列表中的详细信息是HTML中的固定值：

enter image description here

我在追求的内容：

我已经尝试过寻找这个，但似乎无法找到答案。我希望每次加载页面时都可以使用购物车内容填充dropdown中的navbar。为此，我需要一种方法来提取存储在SESSION对象变量中的购物车项目对象。目前我的MasterLayout视图就是这样，它的视图中有没有控制器。

如何为我的MasterLayout分配某种方法，以便我可以将购物车项目模型传递给视图，每次加载页面时，该视图又会被设置为下拉列表？

这是HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
@Styles.Render("~/Content/bootstrap.css")
@Styles.Render("~/Content/Styles.css")
@Scripts.Render("~/bundles/modernizr")</script>
</head>
<body>
<div class="navbar navbar-fixed-top">
    <nav class="navbar navbar-default" role="navigation" id="nav">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" 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 logo">HS<b>WH</b></a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#" class="scroll-link" data-id="myCarousel">Products</a></li>
                    <li><a href="#" class="scroll-link" data-id="Welcome">About Us</a></li>
                    <li><a href="#" class="scroll-link" data-id="features">Contact</a></li>
                </ul>

                <form class="navbar-form pull-right">
                    <input type="text" class="form-control" placeholder="Search this site..." id="searchInput">
                    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
                </form>

                <form class="navbar-form pull-right">
                    <div class="btn-group btn-group-cart">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="pull-left"><i class="fa fa-shopping-cart icon-cart"></i></span>
                            <span class="pull-left">Shopping Cart: 2 item(s)</span>
                            <span class="pull-right"><i class="fa fa-caret-down"></i></span>
                        </button>
                        <ul class="dropdown-menu cart-content" role="menu">
                            <li>
                                <a href="detail.html">
                                    <b>Penn State College T-Shirt</b>
                                    <span>x1 $528.96</span>
                                </a>
                            </li>
                            <li>
                                <a href="detail.html">
                                    <b>Live Nation ACDC Gray T-Shirt</b>
                                    <span>x1 $428.96</span>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="cart.html">Total: $957.92</a></li>
                        </ul>
                    </div>
                </form>


            </div>
        </div>
    </nav>
</div>
@RenderBody()
<footer>
    <div class="container">
        <div class="row">
            <div class="col-sm-12 textAlignCenter">
                <h5>Copyright &copy; 2014 - Test Site</h5>
            </div>
        </div>
    </div>
</footer>
<script>
    $(document).ready(function () {
        $('.dropdown-toggle').dropdown('toggle')
    });
</script>
</body>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</html>

Answer 1

在服务器端，create action返回PartialViewResult，它会渲染您的购物车模型。

在前端渲染您的部分通过@Html.Action("YourPartialCart",'CartController')或ajax调用。

Answer 2

所有视图都有一个与之关联的控制器，因为视图是继承的。例如。在创建视图时，将其布局设置为等于master.cshtml文件。

您的视图中有与之关联的模型。

你可以通过以下两种方式解决这个问题。

最简单的方法是使用类似HttpContext.Current.Items的东西，它是HttpRequest期间可从任何地方访问的请求唯一的共享数据集合。

接下来将在模型上使用继承。例如，像这样创建模型

MasterModel - ＆GT; CartPageModel（继承MasterModel） - ＆GT; AccountSettingsModel（继承MasterModel）

等

然后在您的母版页上通过@Model MasterModel代码将模型设置为MasterModel，在您的视图中它将是@Model CartPageModel。

在您的控制器中，代码将填充基本模型MasterModel上的值，并且它的类型为CartPageModel。

Answer 3

我可能会使用从主布局调用的子操作来执行此操作。

 @Html.Action("Cart")

MVC中共享布局视图的控制器方法？

3 个答案: