Asp.net mvc4 is an evolution of web development. Asp.net mvc4 offer lot of facilities to developers to build state of the art dynamic websites to cater any platform. In this article shows how to display dynamic data or else data from database into Layout master pages.

What are layout master pages?

In simple terms layout master pages are the master pages of your ASP.NET MVC website. Master pages are used to display common data and sections for all the pages. MVC view engine finds this layout master pages using the viewstart guide lines. It gives the path to locate the Layout master. You can locate layout pages inside the ASP.NET MVC solution views->shared folder. One problem with _Layout.csHtml it is not associated with a controller. Therefor you need special ways to display dynamic data on the layout master.

The Scenario

Now assume you want to display dynamic data from your database into _Layout.csHtml file. A typical example would be you want to display available cities on the header section of _Layout master page as a dropdownlist.

_Layout master Header selection city box

To display dynamic data in a razor view there are many ways, but all of them are not going to be strait forward. Since the _Layout master view is not bound to a controller, so you cannot display dynamic data directly on to _Layout page.

How to display dynamic data?

One method will be using a partial view to display dynamic data. You can create a common controller and create an action method to fetch available cities from the database and display as partial view.

create a controller

 

 public ActionResult CityDropList()
        {
            //Linq query to get city details from the DB
            var cityList = (from p in entity.Citiesmasters where p.enabled==true select new { p.ID, p.city });            

            //Create selectlistitem list 
            List<SelectListItem> items = new List<SelectListItem>();
            SelectListItem s = null;

            //add the empty selection
            s = new SelectListItem();
            s.Value = "----select city----";
            s.Text = "";
            items.Add(s);
            foreach (var t in cityList)
            {
                 s = new SelectListItem();
                s.Text = t.ID.ToString();
                s.Value = t.city.ToString();
                items.Add(s);
            }

            //bind seleclistitems list to to viewBag 
            ViewData["CityList"] = items;

            //returning the partial view
            return PartialView();
        }

First you need to create a selectionItem list and assign it to viewbag as shown in the above code. Once action method is ready you can compile the solution before generate the view. Then by right clicking on the PartialView() method you can create a partial view. Your view will look  a very simple one. Since it will going to contain only one dropdown it would look as follows;

   @Html.DropDownList("selectCity",
       new SelectList(ViewBag.CityList, "Text", "Value"),new{@class="selectcity"})

To display the drop down list you can use the viewbag. As in the action method we store CityList as a SelectionItem list in the viewData, In the Razor view the same list can be retrieved as a property of the viewbag shown above.

One important point to remember would be, the action method must return a partialView. If not, when you call this action method from the master page(_Layout) it will create an infinite loop.

There are many ways available in the Razor view engine to render this data on the _Layout view. They are as follows;

  1. @html.RenderAction()
  2. @html.RenderPartial()
  3. @html.Partial()
  4. @html.Action()*

In this example I will use the _Layout master page header section to display the dropdownlist. You can select either of methods shown above to render the partial view on the _Layout. Let us discuss each method and there drawbacks.

Assume you have selected html helper RenderAction method. In this case the method will render the partial view and display dropdown only on the home page. When you try to navigate to other pages, the viewbage is getting null and throws an exception. The reason for that is, RenderAction method is not calling the get city list action method each time you load the other pages.

Assume you select the html helper RenderPartial() method. In this case also the drop down will display only on the home page but not in the other pages. Same reason action method is not getting called with the other page calls.

If you choose the html helper method Partial() you will notice that your partial view should be located inside views->shared folder. By default Razor view engine direct Partial() method to search the shared folder to locate the partial view. In this scenario also the results are being displayed only on the home page and generate exception on the other pages.

Finally if you use html helper Action() method you can notice each time you navigate to different pages which inherit the _Layout master page it trigger the action method and fetch data from the database. Out of all four html helper methods the only method that trigger action method each time is @html.Action() method. Using this html helper method we can simply display dynamic data from the database.

Finally you can display the partial view as follows in the _Layout page as follows;

<section id="selectcity">
      <ul>
         <li>Select a City</li>
              <li>                                              
                   @Html.Action("CityDropList", "Partial")
             </li>
       </ul>
 </section>

Above code will render the dropdown list on the _layout master page.