Saturday, 30 April 2016

HTML Option Group support Dropdownlist in MVC 5

Leave a Comment

Hello every one welcome again.Thank you all for your response for previous post.To day post i am going to explain "How to implement option Group support DropdownList in ASP.NET MVC application.
Description: In HTML "optgroup " tag groups related options in Drop down list.The Grouping of options is helpful when you have more options and group of options in drop down list.
In HTML markup we implement option group drop down list like this,
Example:
<!DOCTYPE html>
<html>
<body>
<select>
  <optgroup label="Mens Clothing">
    <option value="T-shirts">T-shirts</option>
    <option value="TrackSuit">Track Suit</option>
  </optgroup>
  <optgroup label="Mens Footwear">
    <option value="Shoes">Shoes</option>
    <option value="Sandals">Sandals</option>
  </optgroup>
</select>  
</body>
</html>

The Drop down like this



Now we are going to do the same dropdown list using ASP.NET MVC .
Step 1: 
Create an MVC web application.
1.Open Visual studio 2013.
2.Goto File menu-->New-->Project.
3.Select "ASP.NET web template" from installed templates.
4.Name the project and select  location.
5.Select Empty MVC template.
5.Select MVC checkbox to add MVC folder structure.

HTML-option-group-dropdownlist-in-MVC5

Step 2: 
Prepare a Model in Models folder
1.Create DropdownModel.cs
2. Replace code with following code.
DropdownModel.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MvcApplication5.Models
{
    //dropdown data
    public class DropdownModel
    {
        public List DropdownDataModel { get; set; }
        public List ParentDataModel { get; set; }
        public List ClildDataModel { get; set; }
        public int SelectedValue { get; set; }
    }
    //Parent values
    public class Parent
    {
        public int ParentId { get; set; }
        public string ParentName { get; set; }
    }
    //Child values
    public class Clild
    {
        public int ParentId { get; set; }
        public int ChildId { get; set; }
        public string ChildName { get; set; }
    }
}

Step 3:
Create Controller
1.Right click on Controllers folder-->Add-->Controller
2.Name it as HomeController.cs (For demo purpose).

step 4:
Prepare the Data source for Drop down list in Controller.
Note: In this tutorial i created data source in Controller but in real time we use Data Access Layers for getting Database data.
1.I prepared the data source for dropdownlist in Controller.
HomeController.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcApplication5.Models
{
    public class HomeController : Controller
    {
        //Index method to render Index page.
        public ActionResult Index()
        {
            DropdownModel objdropdownmodel = new DropdownModel();
            objdropdownmodel.ParentDataModel = new List();
            //Get Parent options of Dropdownlist using GetParentData()
            objdropdownmodel.ParentDataModel = GetParentData();
            objdropdownmodel.ClildDataModel = new List();
            //Get Child options of Dropdownlist using GetClildData()()
            objdropdownmodel.ClildDataModel = GetClildData();
            //Sending DropDownList data using View() method
            return View(objdropdownmodel);
        }
        //post method to receive the drop down data 
        //you can save it in db also.
        [HttpPost]
        public ActionResult Index(int TeavelMode)
        {
            DropdownModel objdropdownmodel = new DropdownModel();
            objdropdownmodel.ParentDataModel = new List();
            objdropdownmodel.ParentDataModel = GetParentData();
            objdropdownmodel.ClildDataModel = new List();
            objdropdownmodel.ClildDataModel = GetClildData();
            objdropdownmodel.SelectedValue = TeavelMode;
            ViewBag.SelectedValue = "Selected Value :" + objdropdownmodel.ClildDataModel.Where(m => m.ChildId == TeavelMode).FirstOrDefault().ChildName;
            return View(objdropdownmodel);
        }
        //You can use DB to access data for this section
        //Parent options data source
        public List GetParentData()
        {
            List objparent = new List();
            objparent.Add(new Parent { ParentId = 1, ParentName = "--Car--" });
            objparent.Add(new Parent { ParentId = 2, ParentName = "--Bike--" });
            return objparent;
        }
        // You can use DB to access the data
        //Child options data source
        public List GetClildData()
        {
            List objchild = new List();
            objchild.Add(new Clild { ParentId = 1, ChildId = 1, ChildName = "Honda City" });
            objchild.Add(new Clild { ParentId = 1, ChildId = 2, ChildName = "Vento Polo" });
            objchild.Add(new Clild { ParentId = 1, ChildId = 3, ChildName = "Audy" });
            objchild.Add(new Clild { ParentId = 1, ChildId = 4, ChildName = "Honda Amaze" });
            objchild.Add(new Clild { ParentId = 2, ChildId = 5, ChildName = "CBR 250" });
            objchild.Add(new Clild { ParentId = 2, ChildId = 6, ChildName = "CBR 150" });
            objchild.Add(new Clild { ParentId = 2, ChildId = 6, ChildName = "Pulsar 200" });
            objchild.Add(new Clild { ParentId = 2, ChildId = 8, ChildName = "Bajaj Discover 125" });
            return objchild;
        }
    }
}

Step 5:
Create UI for Drop down list in Index View
1.Right click Index Action-->Add View.
2.In Add View window wizard click Add button.
3.Replace the Index code with following code.

@model MvcApplication5.Models.DropdownModel
@{
    ViewBag.Title = "Display DropdDownList Item By Group in Asp.Net MVC Using C#.Net";
}
@using (Html.BeginForm("Index", "Home"))
{
    <div>
        Trevel Mode:
        <select name="TeavelMode" id="ddltravelmode">
            <option value="0">Select</option>
            @*Iterates the data to display drop down*@
            @foreach (var pitem in Model.ParentDataModel)
            {
                <optgroup label="@pitem.ParentName">
                    @{
                            var childitemfilter = Model.ClildDataModel.Where(m => m.ParentId == pitem.ParentId);
                            if (childitemfilter != null)
                            {
                                foreach (var citem in childitemfilter)
                                {
                                    string selectedValue = "";
                                    if (Model.SelectedValue == citem.ChildId)
                                    {
                                        selectedValue = "selected='selected'";
                                    }
                                   
                        <option value="@citem.ChildId" @selectedValue>@citem.ChildName</option>
                                }
                            }
                    }
                </optgroup>
            }
        </select>
        <input type="submit" value="Submit" />
    </div>
    <div>
    </div>
    //Displays selected value after clicking submit button
    <div style="font-weight:bold">@ViewBag.SelectedValue</div>
}
Now Run the application Press F5.
we will get  Option Group Drop down list like this.


HTML-option-group-dropdownlist-in-MVC5

The selected Value will be displayed like below.

HTML-option-group-dropdownlist-in-MVC5
Download the code from this link....Download
Conclusion:
I hope you all understand my tutorial .if you recommend any modifications please suggest me.


0 comments:

Post a Comment