first create table structure like this:
create table.[country](
[pkCountryId] [int] primary key NOT NULL, [CountryName] [varchar](100) NULL)
CREATE TABLE [dbo].[State](
[pkStateId] [int] NOT NULL,
[StateName] [varchar](100) NULL,
[fkCountryId] [int] NULL,
PRIMARY KEY CLUSTERED
(
[pkStateId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
---------------------------------------------------------------------------------------------
create controller Country
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Mukesh_Dropdown_example.EF;
using Mukesh_Dropdown_example.Models;
namespace Mukesh_Dropdown_example.Controllers
{
public class CountryController : Controller
{
//
// GET: /Country/
masterEntities2 db;// = new masterEntities1();
public CountryController()
{
db = new masterEntities2();
}
public ActionResult Index()
{
CountryModel cm = new CountryModel();
cm.CountryList = new SelectList(db.Countries,
"pkCountryId", "CountryName");
cm.StateList = new SelectList(db.States, "pkStateId", "StateName");
return View(cm);
}
[AcceptVerbs(HttpVerbs.Get)]
public JsonResult FillState(string CountryId)
{
int i = 0;
Int32.TryParse(CountryId, out i);
var r = db.States.Where(c => c.fkCountryId == i).ToList();
var j = r.Select(m => new SelectListItem()
{
Text = m.StateName,
Value = Convert.ToString(m.pkStateId)
});
return Json(j, JsonRequestBehavior.AllowGet);
}
}
}
--------------------------------------------------------------------------------------
create model CountryModel
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Mukesh_Dropdown_example.Models
{
public class CountryModel
{
public int CountryId { get; set; }
public SelectList CountryList { get; set; }
public int StateId { get; set; }
public SelectList StateList { get; set; }
}
}
----------------------------------------------------------------------------------------------
now create view
@model Mukesh_Dropdown_example.Models.CountryModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#CountryId").change(function () {
var idCountry = $(this).val();
$.getJSON("/Country/FillState", { CountryId: idCountry },
function (stateData) {
var select = $("#StateId");
select.empty();
select.append($('<option/>', {
value: "0",
text: "Select"
}));
var ddlCity = $("#City");
ddlCity.empty();
ddlCity.append($('<option/>', {
value: "0",
text: "Select"
}));
$.each(stateData, function (index, itemData) {
select.append($('<option/>', {
value: itemData.Value,
text: itemData.Text
}));
});
});
});
/*End Bind State by Country*/
});
</script>
</head>
<body>
<div>
@Html.DropDownListFor(em => Model.CountryId, Model.CountryList, "Select")
@Html.DropDownListFor(em => Model.StateId, Model.StateList, "Select")
</div>
</body>
</html>
----------------------------------------------------------------------------------------------
out put look like this
