Controller method for shared layout view in MVC?

Question

Question background:

I have a MVC site that implements BootStrap. Currently each page is based on a MasterLayout view page. This master contains a dropdown list that will be populated with the cart items in the sites shopping cart along with the carts total monetary value. Please note currently the details in the dropdown are fixed values in the HTML:

enter image description here

What I'm after:

I've tried searching for this but cant seem to find exactly the answer. I want to be able to populate the dropdown in the navbar with the cart contents each time a page is loaded. To do this I need a method to extract the cart item objects which are stored in a SESSION object variable. Currently my MasterLayout view is just that, its a view that has no controller associated with it.

How do I go about assigning some sort of method to my MasterLayout so I can pass the cart items model to the view which in-turn will be set to the dropdown each time the page is loaded?.

Here's the 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>

I think the easiest way (like others have said) is to call out to the controller action from the layout page (Html.Action). — The Muffin Man
– The Muffin Man, Commented Jan 12, 2015 at 21:06

tvanfosson · Accepted Answer · 2015-01-12 21:01:58Z

1

I would probably do this using a child action invoked from the master layout.

 @Html.Action("Cart")

answered Jan 12, 2015 at 21:01

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1352057 Over a year ago

Thanks for your reply. Sorry if this sounds a silly question but I'm still not exactly sure how I can invoke a method in this case "Cart" when the MasterLayout is just a View? Or is it because I have other controllers who's Views inherit from the MasterLayout that I can set the method on any controller I wish? I do have a 'CartController' class that is used to display a grid view of the cart items before people go to the Checkout. Could I use this?

tvanfosson Over a year ago

@user1352057 the layout is just a container for a view, every view either has it's own layout or uses a master. Views are only rendered when an action is invoked. If you have the cart used on every page, then it makes sense to include it in the master layout and a child action (invoked on the cart controller, for example) is a reasonable way to handle getting that data. It would probably be a different action, say "MiniCart" that renders just the HTML that you need in your header.

İhsan İlicali Over a year ago

Hi. I have one question in SO. Could you please help me as it is very urgent. And I will really be helpful for your help.

aleha_84 · Accepted Answer · 2015-01-12 21:03:39Z

1

On server side create action returns PartialViewResult, which render your cart model.

At front-end render your partial via @Html.Action("YourPartialCart",'CartController') or ajax call.

answered Jan 12, 2015 at 21:03

aleha_84

8,5892 gold badges42 silver badges50 bronze badges

Comments

Ryan Mann · Accepted Answer · 2015-01-12 21:04:36Z

All Views have a controller associated with them because the views are inherits. E.g. when you create a view you set it's Layout to be equal to the master.cshtml file.

Your view has a Model associated with it.

You can tackle this a couple of ways.

The simplest would be to use something like HttpContext.Current.Items, which is a request unique collection of shared data accessible from anywhere during an HttpRequest.

The next would be to use inheritance on your models. For example, Create Models like this

MasterModel -> CartPageModel (inherits MasterModel) -> AccountSettingsModel (inherits MasterModel)

etc.

Then on your master page set the model to MasterModel via the @Model MasterModel code, and on your view it would be @Model CartPageModel.

In your controller the code will populate values on the base model MasterModel and it's derrived type CartPageModel.

Collectives™ on Stack Overflow

Controller method for shared layout view in MVC?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related