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:
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>Products</li>
<li>About Us</li>
<li>Contact</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>Total: $957.92</li>
</ul>
</div>
</form>
</div>
</div>
</nav>
</div>
#RenderBody()
<footer>
<div class="container">
<div class="row">
<div class="col-sm-12 textAlignCenter">
<h5>Copyright © 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 would probably do this using a child action invoked from the master layout.
#Html.Action("Cart")
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.
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.
Related
For example: when home is clicked #Url.Action("Information", "Admin") has to be viewed and when menu1 is clicked #Url.Action("Information1", "Admin1") has to be viewed.
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
#Url.Action("Information", "Admin")
</div>
<div id="menu1" class="tab-pane fade">
#Url.Action("Information1", "Admin1")
</div>
<div id="menu2" class="tab-pane fade">
#Url.Action("Information2", "Admin2")
</div>
<div id="menu3" class="tab-pane fade">
#Url.Action("Information3", "Admin3")
</div>
</div>
</div>
The tab-content divs are intended to be used if you have rendered the HTML for each tab already, and you simply wish to show/hide them on the page (which Bootstrap does using some JavaScript).
In your case, you actually want to show different pages, so you should add just the 'nav-tabs' HTML to each page, and use #Url.Action in the hrefs instead.
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
You will need to manually control the "active" class on the li on each page.
If you do actually want to pre-render the HTML so it all shows in one page, then rather than use Url.Action as in your question, you should be rendering a set of partial views using Html.RenderPartial instead.
I am following this tutorial: pluralsight.com/training/Player?author=scott-allen&name=mvc4-building-m6-ajax&mode=live&clip=0&course=mvc4-building. When I added autocomplete functionality I had a problem with layout of my form. Before searching it looks like this http://i.stack.imgur.com/RH2WM.png. When I start typing in search form I get expected list but it does not look good: http://i.stack.imgur.com/TWbea.png. Here is my Index.cshtml
#model IEnumerable<MvcApp.Models.Car>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<form method="get" action="#Url.Action("Index")" data-mz-ajax="true" data-mz-target="#carsList">
<input type="search" name="searchString" data-mz-autocomplete="#Url.Action("AutoComplete")" />
<input type="submit" name="Search By Name" value="Search" />
</form>
#Html.Partial("_Cars", Model)
This is my _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>#Page.Title</title>
#RenderSection("head", required: false)
#Styles.Render("~/Content/bootstrap")
#Styles.Render("~/Content/css")
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Główna","Index","Home")</li>
<li>#Html.ActionLink("O stronie", "About", "Home")</li>
<li>#Html.ActionLink("Kontakt","Contact","Home")</li>
<li>#Html.ActionLink("Lista samochodów","Index","Cars")</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron" id="header-jumbotron">
<h2>ABC</h2>
</div>
</header>
#RenderBody()
#Scripts.Render("~/bundles/mz")
#Scripts.Render("~/bundles/bootstrap")
I guess this is problem with css but I do not have any experience with it. How can I improve it? I want that list would like in that pluralsight tutorial (or google search)
I don't see your target (unless I am missing something). Try this:
<div id="carsList">
<form method="get" action="#Url.Action("Index")" data-mz-ajax="true" data-mz-target="#carsList">
<input type="search" name="searchString" data-mz-autocomplete="#Url.Action("AutoComplete")" />
<input type="submit" name="Search By Name" value="Search" />
</form>
</div>
In the jquery you could set whether to replace or append to div. You could also move the div where desired.
I am getting an error ("Server Error in '/' Application") when I nest partial views in my MVC app. The views work fine individually, but not when nested. It's my understanding that it's okay to do this, so what am I doing wrong?
Essentially, I am trying to use partials as sub-layouts within my _Layout.cshtml.
Here's my main layout - _Layout.cshtml
<!DOCTYPE html>
<html>
<head>...</head>
<body style="padding-top: 80px;">
<div class="container-fluid">
<div class="row">
<div id="myTab" class="col-lg-12 col-md-12 col-sm-12">
...
<div class="tab-content">
<div class="tab-pane fade" id="search">
#Html.Partial("~/Areas/Search/Views/Shared/_SearchLayout.cshtml")
</div>
</div>
</div>
</div>
</div>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
This is the first partial view (_SearchLayout). If I remove the partials AND #RenderBody, no error.
<div class="container-fluid">
#Html.Partial("_PolicySearch")
#Html.Partial("_ClaimSearch")
</div>
#RenderBody()
This partial view is nested in the first partial view (_SearchLayout):
<div class="row top-buffer search-outline form-horizontal">
<div class="col-md-1 search-icon-size text-primary">
<i class="glyphicon glyphicon-heart"></i>
</div>
<div class="col-md-1 search-icon-size text-primary">
<h4>Claim Search</h4>
</div>
</div>
In your first partial view:
Remove RenderBody
Replace Html.Partial to Html.RenderPartial
I also would recommend to rename your partial view to something not containing the word "Layout" to avoid the mismatch between the view types.
Use Html.RenderPartial instead
The problem is #RenderBody(). This can only be called in a layout, which when used in this way _SearchLayout.cshtml is not, despite its name.
The important thing to remember about layouts, partials and views in ASP.NET MVC is that they're all views. The only thing that differentiates them is how they're used. In this instance, you're using the _SearchLayout.cshtml view as a partial, and partials can't use #RenderBody().
I have a mvc razor page (cshtml) and i tried to implement the bootstrp tabdrop in it. I am able to get the tabs however the tabdrops are not displayed. When i run the same code in a html file i am able to get the tabs as well as the tabdrop holding my extra tab names. however when i run the code in cshtml file its not getting displayed.
The extra tabs are displayed in the second line and the tabdrop is also not getting displayed.
Tabdrops Source
Here is my complete code of my cshtml file in which i have used the tabdrop.js...
<script src="Content/js/jquery-1.11.2.js"></script>
<script src="Content/js/bootstrap-tab.js"></script>
<script src="Content/js/bootstrap-tabdrop.js"></script>
<script src="Content/js/bootstrap-dropdown.js"></script>
<script>
if (top.location != location) {
top.location.href = document.location.href;
}
$(function () {
window.prettyPrint && prettyPrint();
$('.nav-tabs:first').tabdrop();
$('.nav-tabs:last').tabdrop({ text: 'More options' });
$('.nav-pills').tabdrop({ text: 'With pills' });
});
</script>
<link href="~/Content/css/bootstrap-tabdrop.css" rel="stylesheet" />
<div>
<div class="wrapper row-offcanvas row-offcanvas-left">
<!-- Left side column. contains the logo and sidebar -->
<!-- Right side column. Contains the navbar and content of the page -->
<aside class="right-side">
<!-- Main row -->
<div class="row">
<!-- Left col -->
<section class="col-lg-6 connectedSortable">
<!-- Box (with bar chart) -->
<div id="loading-example">
<div class="box-body no-padding">
<div class="row">
<div class="col-sm-7">
</div>
</div>
</div>
</div>
</section>
</div>
<section class="content">
<ul class="nav nav-tabs tabs-example" role="tablist">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
<li>Tab 5</li>
<li>Tab 6</li>
<li>Tab 7</li>
<li>Tab 8</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tabs-tab1">
<p>This is tab 1!</p>
</div>
<div class="tab-pane" id="tabs-tab2">
<p>This is tab 2!</p>
</div>
<div class="tab-pane" id="tabs-tab3">
<p>This is tab 3!</p>
</div>
<div class="tab-pane" id="tabs-tab4">
<p>This is tab 4!</p>
</div>
<div class="tab-pane" id="tabs-tab5">
<p>This is tab 5!</p>
</div>
<div class="tab-pane" id="tabs-tab6">
<p>This is tab 6!</p>
</div>
<div class="tab-pane" id="tabs-tab7">
<p>This is tab 7!</p>
</div>
<div class="tab-pane" id="tabs-tab8">
<p>This is tab 8!</p>
</div>
</div>
<!-- top row -->
<!-- /.row -->
</section><!-- /.content -->
</aside>
</div>
</div>
I have the css files stored in the location
Content\css
and Javascript Files stored in the location
Content\js
The cshtml file has the bootstrap theme of ADMINLTE bootstrap.
Can any one help me with this? I want to know whether the bootstrap tabdrops works with cshtml file or not?
I had same issue. The tabdrop plugin initialized when window re-size.
I solved it by resizing the window after init tabdrop.
$(window).resize();
I develop an ecommerce application. I using C#, MVC and Entity Framework and Bootstrap.
I've saved cart item in my database. My question is :
I want to show cart's summary in my layout's top. But what's your suggestion for this operation.
Should i use a partial view for the cart's summary or another way?
And in other hand how can i read my cart's data from database every request. i cannot it in from controllers of course. because i want to show cart's summary top of the screen at every page. should i read it from application start or ? Any suggest me pls for this operations.
//_Layout.cshtml
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">E-Commerce</a>
</div>
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Arama">
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
</form>
<p class="navbar-text pull-right">
/* I want to see shopping cart summary in this section*/
<i class="fa fa-shopping-cart"></i>
<span id="cartTotal">
</span>
(<span id="cartItemCount"></span>)
</p>
<p class="navbar-text pull-right">Log In</p>
<p class="navbar-text pull-right">Register</p>
</nav>
</div>
<div class="container">
#RenderBody()
</div>
</body>
</html>
you can use of this solution
in Controller
[ChildActionOnly]
public ActionResult CartSummary()
{
ViewData["CartCount"] = 3; // count Qty in your cart
return PartialView("CartSummary");
}
right click and Add view and select PartialView then in PartialView
#ViewData["CartCount"]
in layout, where you want to show cart's qty
#{Html.RenderAction("CartSummary", "controllerName");}