This method can be used in any view but it is recommended to make sure your ViewModel contains all necessary information. We are going to use this approach in layout page, as normally layout page does not have any model(it can have but then it might get very messy and personally I think for big projects it could be extra constraint).
Consider a situation in which you are interested in values for variables from http request.
http://localhost:49853/Home/Index?searchType=global
In above address we are passing variable searchType. Let's assume that searchType can have 2 different values - local and global.
In your main css file:
In layout page in _Layout file header section:
If you are in global searchType your address is :
http://localhost:49853/?searchType=global
In local :
http://localhost:49853/?searchType=local
Consider a situation in which you are interested in values for variables from http request.
http://localhost:49853/Home/Index?searchType=global
In above address we are passing variable searchType. Let's assume that searchType can have 2 different values - local and global.
In your main css file:
#mainNav.global { background: #404939; } #mainNav.global nav.nav { background: none; } #mainNav.global nav.nav .top { background: #404939; } #mainNav.global nav.nav a:hover, #mainNav nav.nav a.active { background-color: #7dc243; } #mainNav.local { background: #3C7987; } #mainNav.localnav.nav { background: none; } #mainNav.local nav.nav .top { background: #3C7987; } #mainNav.local nav.nav a:hover, #mainNav nav.nav a.active { background-color: #7FDCFF; }
In layout page in _Layout file header section:
<header> <div class="content-wrapper"> <div class="float-left"> <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p> </div> <div class="float-right"> <section id="login"> @Html.Partial("_LoginPartial") </section> @{ string searchClass = "global"; if (HttpContext.Current.Request.Params["searchType"] == "local") { searchClass = "local"; } } <div id="mainNav" class=@searchClass> <nav class="nav" data-nav> <ul> @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "searchForm" })) { @Html.ActionLink("Global","Index","Home", new { searchType= "global" }, null) @Html.ActionLink("Local","Index", "Home", new { searchType = "local" }, null) <input type="search" name="searchMode" value="" placeholder="Search..."> <input type="submit" name="submitBtn" value="Search"> } </ul> </nav> </div> <nav> <ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> </ul> </nav> </div> </div> </header>So we are going to toggle class name for navigation bar. If we are in global searchType background color is #7dc243, in local searchType 7FDCFF.
If you are in global searchType your address is :
http://localhost:49853/?searchType=global
In local :
http://localhost:49853/?searchType=local
Comments
Post a Comment