Multiple ways to generate DropDownList in MVC using HTML helpers.

There are many way to generate DropDownList in ASP .NET MVC.In this article I am going to explain step by step fill DropDownList.I have already explain about the Html Helper such as @Html.DropDownList() and @Html.DropDownListFor() you know very how to use in MVC.

1.Fill statically DropDownList  in ASP .NET MVC using Controller.

2.Fill statically DropDownList  in ASP .NET MVC using View.

3.Fill dynamically DropDownList  in ASP .NET MVC using Database.

4.Dynamically bind Asp.Net MVC Dropdownlist from Sql Server Database using entity framework.

1st Approach:

1.Fill statically DropDownList  in ASP .NET MVC using Controller.

First you create a MVC Apllication.As per previous article how to be create an application visit following link http://mvctpoint.blogspot.in/2015/08/aspnet-mvc-create-new-aspnet-mvc.html .

You can easily bind data to dropdown list using  @Html.DropDownList() and @Html.DropDownListFor(),difference between both  @Html.DropDownList() not strictly bind with model.but @Html.DropDownListFor() is strictly bind with model.

So first bind the data using @Html.DropDownList().No need to take any type model or say any type of variable inside the model.

These following step you can follow:

Inside the HomeController take any ActionResult Method.and can write the such type of code:

 public ActionResult YourList()

        {

          

            List<SelectListItem> list = new List<SelectListItem>();

            list .Add(new SelectListItem { Text = "India", Value = "0" });

            list .Add(new SelectListItem { Text = "Pakistan, Value = "1" });

            list .Add(new SelectListItem { Text = "England", Value = "2" });

            list .Add(new SelectListItem { Text = "Saudi", Value = "3" });

            list .Add(new SelectListItem { Text = "Japan", Value = "4" });

            list .Add(new SelectListItem { Text = "China", Value = "5" });

        

            ViewData["Country"] = list ;

}

or is you want to fill data to dropdown as date,month,year.so you can use the following loop.

 public ActionResult YourList()

        {

            List<SelectListItem> list = new List<SelectListItem>();

            for (int i = 1; i <= 31; i++)

            {

                list .Add(new SelectListItem { Text = i.ToString(), Value = i.ToString() });

            }

            ViewData["Date"] = list ;

 }

In View you can write such type of code.

@{

    ViewBag.Title = "TravelRequest";

    Layout = "~/Views/Shared/_Layout.cshtml";

   }

@using (Html.BeginForm())

{

   @Html.ValidationSummary(true)

<table>

    <tr>

        <td>

                Country:

       </td>

       <td>

                @Html.DropDownList("Country", ViewData["Country"] as List<SelectListItem>)

       </td>

   </tr>

 <tr>

        <td>

                Date:

       </td>

       <td>

                @Html.DropDownList("Date", ViewData["Date"] as List<SelectListItem>)

       </td>

   </tr>

</table>

}

Here Country,Date work as 'Id' that is use to get selected text Text Or Value. 

Using Jquery we can get the Text from dropdown in mvc as such:

<script type="text/javascript">

      $(document).ready(function () {

        var country= $("#Country :selected").text();

        var date = $("#Date :selected").text();

})

<script>

Using Jquery we can get the Value from dropdown in mvc as such:

<script type="text/javascript">

      $(document).ready(function () {

        var country= $("#Country :selected").val();

        var date = $("#Date :selected").val();

})

<script>

------------------------------------------------------------------------------------------------------------
2nd Approach:

Fill statically DropDownList  in ASP .NET MVC using View:

You have to follow the code

@Html.DropDownList("Country",new List<SelectListItem>{

           new SelectListItem { Text = "India", Value = "0" },

            new SelectListItem { Text = "Pakistan, Value = "1" },

           new SelectListItem { Text = "England", Value = "2" },

            new SelectListItem { Text = "Saudi", Value = "3" },

            new SelectListItem { Text = "Japan", Value = "4" },

            new SelectListItem { Text = "China", Value = "5" }

})

or 

If you want to create DropDownList statically using Razor so you can change the following code as follows:

@{

       var listItem = new List<ListItem>();
       listItem.add(new List{Text = "India", Value = "0" });
       listItem.add(new List{Text = "Pakistan, Value = "1" });
       listItem.add(new List{ Text = "England", Value = "2"});

}

@Html.DropDownListFor(model=>mode.SelectedValue,listItem)

 

--------------------------------------------------------------------------------------

3rd Approach:
  
Fill dynamically DropDownList  in ASP .NET MVC using Database.

Here I will explain how to bind dropdownlist using JQuery ajax or JSON in asp.net.To implement this concept first design table in database and give name as Country as shown below

Column Name	Data Type	Allow Nulls
CountryId	int(set identity property=true)	No
CountryName	varchar(50)	Yes

After completion table design enter some of Country details in database to work for our sample and write the following code in your aspx page.

Bind DropDownList Using Entity Framework in ASP.Net MVC Using C#

In this article I will show you how you can bind/populate dropdownlist using entityframework in asp.net mvc usingC#. In this article I will also show you after binding how you can retrieve the selected value of  dropdownlist at controller end. This article you can use in MVC2/MVC3/MVC4/MVC5 application.

Now for this article first we will create a new MVCapplication. After creating application we will create model. In our model file we will add the below code.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace bIND_Dropdownin_MVC.Models

{

    public class CountryModel

    {

        public SelectList CountryListModel { get; set; }

    }

}

Now just check the Entity Framework and SQL table.For Using the Entity Framework you can select your database and create the .edmx File.You can read brief knowledge about how to create .edmx file.

Entityframework

Now again come to solution explorer and add the controller class file. In your controller add the below code to bind the DropDownList.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using bIND_Dropdownin_MVC.Models;

namespace bIND_Dropdownin_MVC.Controllers

{

    public class HomeController : Controller

    {

        //Bind/Populate DropDownList Using Entity Framework in ASP.Net MVC Using C#

        public ActionResult Index()

        {

            /*Create instance of entity model*/

            NorthwindEntities objentity = new NorthwindEntities();

            /*Getting data from database*/

            List<Country> objcountrylist = (from data in objentity.Countries

                                            select data).ToList();

            Country objcountry = new Country();

            objcountry.CountryName = "Select";

            objcountry.Id = 0;

            objcountrylist.Insert(0, objcountry);

            SelectList objmodeldata = new SelectList(objcountrylist, "Id","CountryName", 0);

            /*Assign value to model*/

            CountryModel objcountrymodel = new CountryModel();

            objcountrymodel.CountryListModel = objmodeldata;

            return View(objcountrymodel);

        }

    }

}

Now we will create View for the model. In this view we will add all the HTML tags.

@model bIND_Dropdownin_MVC.Models.CountryModel

@{

    ViewBag.Title = "Bind/Populate DropDownList using Entity Framework in ASP.Net MVC Using C#";

}

<h2>

    Bind DrowpDownList</h2>

@Html.DropDownList("ddlcountry", Model.CountryListModel, new {@style="width:200px;"})

In above code we have first accessed the model. This model we will use to bind with the control. Now we have done run the page and see the output.

Now we will learn how we can retrieve the selected value at controller end. For this you needed to create post method in the controller. Now add the below post method in your controller.

        [HttpPost]

        public ActionResult Index(int ddlcountry)

        {

            /*Create instance of entity model*/

            NorthwindEntities objentity = new NorthwindEntities();

            /*Getting data from database*/

            List<Country> objcountrylist = (from data in objentity.Countries

                                            select data).ToList();

            Country objcountry = new Country();

            objcountry.CountryName = "Select";

            objcountry.Id = 0;

            objcountrylist.Insert(0, objcountry);

            SelectList objmodeldata = new SelectList(objcountrylist, "Id","CountryName", 0);

            /*Assign value to model*/

            CountryModel objcountrymodel = new CountryModel();

            objcountrymodel.CountryListModel = objmodeldata;

            /*Get the selected country name*/

            ViewBag.CountryName = objcountrylist.Where(m => m.Id == ddlcountry).FirstOrDefault().CountryName;

            return View(objcountrymodel);

        }

In above code you will see the index method parameter name is same as the dropdownlist in our view. You need  to keep both name same other wise you will not be able to get the selected  value.

Now run the page.

Now click on submit button you will see the selected country value in parameter.

Now press F5 and check the final output.

What do you think?

I hope you will enjoy to create DropDownList while programming with Asp.Net MVC. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.