binding dropdownlist in .net mvc razor by viewbag, model and jquery - three ways
There is a lot of ways to bind dropdownlist in asp.net mvc (mvc3, mvc4 or later razor syntax .cshtml) and maintaining dropdownlist state during postback some of them given below -
I am taking a simple example to explain this, here is three dropdownlist that is for state, correspondence city of the state and correspondence area of that city, city and area bind at runtime as per state dropdownlist , city dropdownlist selection change respectively
Well for maintating the state during post back just pass FormCollection class as parameter of post postyourad action and rest all the thing model binder will handle, you can also use like this
public ActionResult postyourad( string istateid, string icityid, string iareaid) model binder automatic bind these value with posted form data collection
Controller class ActionResult -
View page .cshtml -
For maintaining state during postback pass mydropdownlist as parameter then model binder automatic bind posted data into it (model binder check name of property and name of the field of posted form data and bind accordingly) or you can use FormCollection Class as above.
Controller Class ActionResult -
View part .cshtml -
View Model -
- Use viewbag property.
- Through view model.
- Use jquery .ajax i.e. asynchronous post back at selected index change of another dropdownlist.
I am taking a simple example to explain this, here is three dropdownlist that is for state, correspondence city of the state and correspondence area of that city, city and area bind at runtime as per state dropdownlist , city dropdownlist selection change respectively
Fill Data To Dropdownlist Using ViewBag Property
Use viewbag property as list container pass your list into a dynamic property of viewbag and use it into view part, first time (Get Request) city and area dropdownlist should be blank so use empty list for blank dropdownlist as below for binding city and area list during postback request use jquery part as given in the end of the post.Well for maintating the state during post back just pass FormCollection class as parameter of post postyourad action and rest all the thing model binder will handle, you can also use like this
public ActionResult postyourad( string istateid, string icityid, string iareaid) model binder automatic bind these value with posted form data collection
Controller class ActionResult -
[ HttpGet ]
public ActionResult postyourad()
{
ViewBag.stateList = getState();
ViewBag.cityList = new List < SelectListItem > { }; //blank dropdownlist
ViewBag.areaList = new List < SelectListItem > { }; //blank no item
return View( );
}
//State management during postback bind again
[ HttpPost ]
public ActionResult postyourad( FormCollection value)
{
ViewBag.stateList = getState(value[ "istateid" ]);
ViewBag.cityList = getCity(value[ "istateid" ], value[ "icityid" ]);
ViewBag.areaList = getArea(value[ "istateid" ], value[ "icityid" ], value[ "iareaid" ]);
return View();
}
@{
ViewBag.Title = "dropdownlist bind demo with viewbag" ;
Layout = "~/Views/Shared/_Layout.cshtml" ;
}
@ using (Html.BeginForm()) {
@ Html.DropDownList( "istateid" , ( SelectList )ViewBag.stateList, "--Choose Your State--")
@ Html.DropDownList( "icityid" , ( IEnumerable < SelectListItem >)ViewBag.cityList, "--Choose Your City--" )
@ Html.DropDownList( "iareaid" , ( IEnumerable < SelectListItem >)ViewBag.areaList, "--Choose Your Area--" )
< input type ="submit" value ="submit" />
}
Bind Dropdownlist Using View Model
below is the example of binding dropdownlist through view model named mydropdownlist it have three property and three method return as SelectList type, just pass mydropdownlist class object to view and bind as given in view part below.For maintaining state during postback pass mydropdownlist as parameter then model binder automatic bind posted data into it (model binder check name of property and name of the field of posted form data and bind accordingly) or you can use FormCollection Class as above.
Controller Class ActionResult -
[ HttpGet ]
public ActionResult postyourad()
{
return View( new my dropdownlist ());
}
//State management during postback model binder automatic bind the propery of dropdownlist
[ HttpPost ]
public ActionResult postyourad( my dropdownlist ddlListPostData)
{
//mydropdownlist ddlList = new mydropdownlist() { istateid = ddlListPostData.istateid, icityid = ddlListPostData.icityid, iareaid = ddlListPostData.iareaid };
return View(ddlListPostData);
}
@model ECommerce.Models. my dropdownlist
@{
ViewBag.Title = "dropdownlist bind demo with model" ;
Layout = "~/Views/Shared/_Layout.cshtml" ;
}
@ using (Html.BeginForm()) {
@ Html.DropDownListFor(x => x.istateid, Model.getState() , "--Choose Your State--" )
@ Html.DropDownListFor(x => x.icityid, Model.getCity(), "--Choose Your City--" )
@ Html.DropDownListFor(x => x.iareaid, Model.getArea(), "--Choose Your Area--" )
< input type ="submit" value ="submit" />
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
namespace ECommerce.Models
{
public class mydropdownlist
{
MyDbContext _db = null ;
public mydropdownlist() { _db = new MyDbContext (); }
[ Required ]
public virtual string iareaid { get ; set ; }
[ Required ]
public virtual string icityid { get ; set ; }
[ Required ]
public virtual string istateid { get ; set ; }
public SelectList getState()
{
IEnumerable < SelectListItem > stateList = ( from m in _db.mstrstates where m.bstatus ==true select m).AsEnumerable().Select(m => new SelectListItem () { Text = m.vstate, Value = m.istateid.ToString() });
return new SelectList (stateList, "Value" , "Text" , istateid);
}
public SelectList getCity()
{
IEnumerable < SelectListItem > cityList = new List < SelectListItem >();
if (! string .IsNullOrEmpty(istateid))
{
int _stateId = Convert .ToInt32(istateid);
cityList = ( from m in _db.mstrcities where m.bstatus == true && m.istateid == _stateId selectm).AsEnumerable().Select(m => new SelectListItem () { Text = m.vcity, Value = m.icityid.ToString() });
}
return new SelectList (cityList, "Value" , "Text" , icityid);
}
public SelectList getArea()
{
IEnumerable < SelectListItem > areaList = new List < SelectListItem >();
if (! string .IsNullOrEmpty(istateid) && ! string .IsNullOrEmpty(icityid))
{
int _cityId = Convert .ToInt32(icityid);
int _stateId = Convert .ToInt32(istateid);
areaList = ( from m in _db.mstrareas join p in _db.mstrcities on m.icityid equals p.icityidwhere m.bstatus == true && m.icityid == _cityId && p.istateid == _stateId selectm).AsEnumerable().Select(m => new SelectListItem () { Text = m.vareaname, Value = m.iareaid.ToString() });
}
return new SelectList (areaList, "Value" , "Text" , iareaid);
}
}
}
Bind Data To Dropdownlist using jquery .ajax post in selection change event
If you want to bind dropdownlist according to posted data during postback (asynchronously) in selected item change event of another dropdownlist then you can do this through jquery .ajax method and through JsonResult ( JsonResult - Serializes a given ViewData object to JSON format) as given below -View part .cshtml -
Controller Class ActionResult -
$( "#istateid" ).change( function () {
$.ajax({
type: "POST" ,
url: ' @ Url.Action( "getCityJson" , "PostAd" )' ,
data: { stateId: $( "#istateid > option:selected" ).attr( "value" ) },
success: function (data) {
var items = [];
items.push( "<option>--Choose Your Area--</option>" );
$.each(data, function () {
items.push( "<option value=" + this .Value + ">" + this .Text + "</option>" );
});
$( "#icityid" ).html(items.join( ' ' ));
}
})
});
$( "#icityid" ).change( function () {
$.ajax({
type: "POST" ,
url: ' @ Url.Action( "getAreaJson" , "PostAd" )' ,
data: { cityId: $( "#icityid > option:selected" ).attr( "value" ), stateId: $( "#istateid > option:selected" ).attr( "value" ) },
success: function (data) {
var items = [];
items.push( "<option>--Choose Your Area--</option>" );
$.each(data, function () {
items.push( "<option value=" + this .Value + ">" + this .Text + "</option>" );
});
$( "#iareaid" ).html(items.join( ' ' ));
}
})
});
[ HttpPost ]
public JsonResult getStateJson( string selectStateId = null )
{
return Json(getState(selectStateId));
}
public SelectList getState( string selectStateId = null )
{
IEnumerable < SelectListItem > stateList = ( from m in _db.mstrstates where m.bstatus ==true select m).AsEnumerable().Select(m => new SelectListItem () { Text = m.vstate, Value = m.istateid.ToString() });
return new SelectList (stateList, "Value" , "Text" , selectStateId);
}
[ HttpPost ]
public JsonResult getCityJson( string stateId, string selectCityId= null )
{
return Json(getCity(stateId, selectCityId));
}
public SelectList getCity( string stateId, string selectCityId = null )
{
IEnumerable < SelectListItem > cityList = new List < SelectListItem >();
if (! string .IsNullOrEmpty(stateId))
{
int _stateId = Convert .ToInt32(stateId);
cityList = ( from m in _db.mstrcities where m.bstatus == true && m.istateid == _stateIdselect m).AsEnumerable().Select(m => new SelectListItem () { Text = m.vcity, Value = m.icityid.ToString() });
}
return new SelectList (cityList, "Value" , "Text" , selectCityId);
}
[ HttpPost ]
public JsonResult getAreaJson( string stateId, string cityId, string selectAreaId = null )
{
return Json(getArea(stateId, cityId, selectAreaId));
}
public SelectList getArea( string stateId, string cityId, string selectAreaId = null )
{
IEnumerable < SelectListItem > areaList = new List < SelectListItem >();
if (! string .IsNullOrEmpty(stateId) && ! string .IsNullOrEmpty(cityId))
{
int _cityId = Convert .ToInt32(cityId);
int _stateId = Convert .ToInt32(stateId);
areaList = ( from m in _db.mstrareas join p in _db.mstrcities on m.icityid equals p.icityidwhere m.bstatus == true && m.icityid == _cityId && p.istateid == _stateId selectm).AsEnumerable().Select(m => new SelectListItem () { Text = m.vareaname, Value = m.iareaid.ToString() });
}
return new SelectList (areaList, "Value" , "Text" , selectAreaId);
}