Saturday 23 November 2013

DropDownList in HTML Helper in MVC


DropDownList in HTML Helper in MVC

It is little bit tricky to create dropdown list in MVC using HTML Helper class. As we know that in general dropdown list we show data in Text and Value format.

Similarly here we have to create a class which contains the property for Text and Value.

For Example:-

In this example I am creating dropdown list for countries. In which I am taking CID as a value field and CName as a Text Field.

Create controller name home and method index and create view for index method.

To add properties, add class and give it name country and declare two properties CID and CName.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcApplication7
{
    public class country
    {
        public int CID { get; set; }
        public string CName { get; set; }
    }
}

Now go to your index view and create a list of type country and add Items in this list.




@{
    Layout = null;

    List<MvcApplication7.country> lst_country = new List<MvcApplication7.country>()
    {

        new MvcApplication7.country{CID=1, CName="India"},
        new MvcApplication7.country{CID=2, CName="USA"},
       
    };
}

Now create dropdownlist using HTML Helper class.

@Html.DropDownList("drp_country", new SelectList(lst_country, "CID", "CName"))

In this DropDownList drp_country is id and Name for this control. We added SelectList in which we pass data source which is List and the name of ValueField and TextField.

Complete Code:-

@{
    Layout = null;

    List<MvcApplication7.country> lst_country = new List<MvcApplication7.country>()
    {

        new MvcApplication7.country{CID=1, CName="India"},
        new MvcApplication7.country{CID=2, CName="USA"},
       
    };
}



<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
   
    @Html.DropDownList("drp_country", new SelectList(lst_country, "CID", "CName"))

</body>
</html>

The output of this code is as follows:-




Hope you enjoyed the article. For any query mail me at Malhotra.isha3388@gmail.com

1 comment:

  1. Nice Tutorial For DropdownList Data Binding ,Really Helped me .

    ReplyDelete