Tuesday, 8 July 2014

Get the values from http query string variables in View in ASP.NET MVC

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:

#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