How to implement Dropdown list in MVC ~ MiTechDev.com

Tuesday, 5 April 2016

How to implement Dropdown list in MVC

22:14:00 Posted by raviteja swayampu No comments
How to implement Dropdown list in ASP.NET MVC. In traditional ASP.NET it is very easy to implement just by drag and dropping where we want. But in MVC we need some attention to create Drop Downlist.We have Dropdown list Html helper in ASP.NET MVC but we need to know how to bind data to Dropdown list Html helpers.
we can implement Drop down list in ASP.NET MVC in 2 ways.

1.Using normal HTML Controls(select tag):
We can implement  dropdownlist using HTML <select/> tag like below
 ExampleCode:
<select id="html_dropdown">
    <option>--Select--</option>
    <option>India</option>
    <option>US</option>
    <option>China</option>
    <option>Russia</option>
    <option>United Kingdom</option>
</select>

2.Using HTML helpers:
Method 1:
It is very easy to implement dropdownlist using normal html tags. But, if you want to bind data dynamically to the HTML tags it becomes complicated.To overcome and to make it easy to bind data to Html controls Microsoft introduced HTML helpers Methods.Here we are using Dropdown HTML helper to bind object data to Dropdownlist.
Advantages:
1.It is also easy to implement.
2.Dynamic binding of data is very easy
3.We can easily implement cascading dropdownlists
Note:In method 1 i am sending data from controller using ViewBag.
ExampleCode:

 //Using ViewBag
            List item = new List();
            item.Add(new SelectListItem { Text = "India", Value = "1" });
            item.Add(new SelectListItem { Text = "China", Value = "2" });
            item.Add(new SelectListItem { Text = "United Sates", Value = "3" });
            item.Add(new SelectListItem { Text = "Srilanka", Value = "4" });
            item.Add(new SelectListItem { Text = "Germany", Value = "5" });
            ViewBag.html_helper_dropdown = item;

View code:
@using (Html.BeginForm())
{
    @Html.DropDownList("html_helper_dropdown","--select--")
}


Method 2:
In this i am sending data using ViewData to Controller with the same data source
Code:
List item = new List();
 item.Add(new SelectListItem { Text = "India", Value = "1" });
 item.Add(new SelectListItem { Text = "China", Value = "2" });
 item.Add(new SelectListItem { Text = "United Sates", Value = "3" });
 item.Add(new SelectListItem { Text = "Srilanka", Value = "4" });
 item.Add(new SelectListItem { Text = "Germany", Value = "5" });
ViewData["viewdata_ddl"] = item;

 view code:

<p>Using View data</p>
@using (Html.BeginForm())
{
    @Html.DropDownList("viewbag_dropdown",ViewData["viewdata_ddl"] as List<SelectListItem>, "--select--")
}


Method 3:
Model binding.In this method we are binding the data using Model.This method mainly used for Strongly typed Views.
1.First create a model class with the 2 properties. one for Dropdown values and another for storing the selected value.
Model.cs:
using System.Collections.Generic;
using System.Web.Mvc;
namespace Dropdownlist.Models
{
    public class Model
    {
        public string selectedType { get; set; }
        public IEnumerable CountryList { get; set; }
    }
}

Then prepare data source in controller and send the data through return View() method
Controller code:
using System;
using System.Collections.Generic;
using System.Web.Mvc;
using Dropdownlist.Models;
namespace Dropdownlist.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            //Using ViewBag
            List item = new List();
            item.Add(new SelectListItem { Text = "India", Value = "1" });
            item.Add(new SelectListItem { Text = "China", Value = "2" });
            item.Add(new SelectListItem { Text = "United Sates", Value = "3" });
            item.Add(new SelectListItem { Text = "Srilanka", Value = "4" });
            item.Add(new SelectListItem { Text = "Germany", Value = "5" });
            ViewBag.html_helper_dropdown = item;

            //using ViewData
            ViewData["viewdata_ddl"] = item;

            //using Model binding
            var model = new Model
            {
                CountryList = item
             };
            return View(model);
        }
    }
}
View code as follows:

<p>Using Model </p>
@using (Html.BeginForm())
{
    @Html.DropDownListFor(x=>x.selectedType,Model.CountryList,"--select--")
}


Index.cshtml:
@using Dropdownlist.Models
@model Model
@{
    ViewBag.Title = "Dropdown list demo";
}

<h1>Dropdown list</h1>
<h3>Drop downlist using HTML</h3>
<select id="html_dropdown">
    <option>--Select--</option>
    <option>India</option>
    <option>US</option>
    <option>China</option>
    <option>Russia</option>
    <option>United Kingdom</option>
</select>
<br/>
<h3>Using Html helpers </h3>
<p>Method 1:</p><br/>
<p>Here the data was sent from Controller through ViewBag</p>
@using (Html.BeginForm())
{
    @Html.DropDownList("html_helper_dropdown","--select--")
}
<br/>
<p>Method 2:</p>
<p>Using View data</p>
@using (Html.BeginForm())
{
    @Html.DropDownList("viewbag_dropdown",ViewData["viewdata_ddl"] as List<SelectListItem>, "--select--")
}
<p>Method 3:</p>
<p>Using Model </p>
@using (Html.BeginForm())
{
    @Html.DropDownListFor(x=>x.selectedType,Model.CountryList,"--select--")
}
Note: We can also bind the dropdownlist data using ENUM's and arrays also.But, above are the most reliable and used by many developers (in our company also developers uses this methods only.).
Finally i got output like this..


conclusion:
I hope you understand this article.If any one having doubts feel free to ask me through comment i will answer to comments when i am free..


0 comments:

Post a Comment