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

Controller method for shared layout view in MVC?

问题背景:

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

中的固定值

我追求的是:

我已经尝试搜索此内容,但似乎找不到确切的答案。我希望能够在每次加载页面时用购物车内容填充 navbar 中的 dropdown。为此,我需要一种方法来提取存储在 SESSION 对象变量中的购物车项目对象。目前我的 MasterLayout 视图就是这样,它是一个具有 no 控制器的视图。

如何为我的 MasterLayout 分配某种方法,以便我可以将购物车项目模型传递给视图,in-turn 将被设置为下拉列表每次加载页面?.

这是 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 8.96</span>
                                </a>
                            </li>
                            <li>
                                <a href="detail.html">
                                    <b>Live Nation ACDC Gray T-Shirt</b>
                                    <span>x1 8.96</span>
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="cart.html">Total: 7.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>

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

 @Html.Action("Cart")

在服务器端创建操作 returns PartialViewResult,它呈现您的购物车模型。

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

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

您的视图有关联的模型。

您可以通过多种方式解决这个问题。

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

下一步是在您的模型上使用继承。例如,像这样创建模型

大师模型 -> CartPageModel(继承MasterModel) -> AccountSettingsModel(继承 MasterModel)

等等

然后在您的母版页上通过@Model MasterModel 代码将模型设置为 MasterModel,在您看来它将是@Model CartPageModel。

在您的控制器中,代码将在基本模型 MasterModel 上填充值,它是 CartPageModel 的派生类型。