Bind Json Result to Dropdown list in
MVC4 with Country State City Concept
--sql query....................
create database JqueryExam
use JqueryExam
--create table county,state,city in
database...................
create table CountryDetails(CountryId int primary key,CountryName varchar(50) unique)
create table StateDetails(StateId int primary key,StateName varchar(50)unique,CountryId int foreign key references
CountryDetails(CountryId) on delete
cascade)
create table CityDetails(CityId int primary key,CityName varchar(50)unique,StateId int foreign key references
StateDetails(StateId)
on delete cascade)
--insert into tables........................
insert into CountryDetails values(1,'India')
insert into CountryDetails values(2,'England')
insert into StateDetails values(1,'Uttar Pradesh',1)
insert into StateDetails values(2,'Madhya Pradesh',1)
insert into CityDetails values(1,'Varanasi',1)
insert into CityDetails values(2,'Ghaziabad',1)
insert into CityDetails values(3,'Lucknow',1)
insert into CityDetails values(4,'Bhopal',2)
insert into CityDetails values(5,'Reewa',2)
Note
:In this topic this picture is
very helpful for you ………………….
Code for View which name is Index.cshtml………………………
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Country State City
Bind </title>
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function ()
{
//******* code for state bind
with countryid…………..
$("#ddlcountry").change(function () {
//debugger;
//$(this).closest('tr').remove();
var v2 = $(this).val();
$.get("Home/StateBind", { country: v2 }, function (data) {
$("#state").empty();
var v = "<option>Select</option>";
$.each(data, function (i, v1) {
v += "<option
value='"
+ v1.Value + "'>"
+ v1.Text + "</option>";
});
$("#state").html(v);
});
});
//******* code for city bind
with stated……………………
$("#state").change(function () {
var v2 = $(this).val();
$.get("Home/CityBind", { state: v2 }, function (data) {
$("#city").empty();
var v = "<option>Select</option>";
$.each(data, function (i, v1) {
v += "<option
value='"
+ v1.Value + "'>"
+ v1.Text + "</option>";
});
$("#city").html(v);
});
});
});
</script>
</head>
<body>
<div>
<table>
<tr><td colspan="2"><font color="Red">Bind Json Result to
DropDownlist in MVC4 Country State City Concept</font></td></tr>
<tr><td>Country Name</td><td>@Html.DropDownList("ddlcountry", "Select" )</td></tr>
<tr><td>State Name</td><td><select id="state"><option>Select</option></select></td></tr>
<tr><td>City Name</td><td><select id="city"><option>Select</option></select></td></tr>
</table>
</div>
</body>
</html>
Code for Controller which
name is HomeController ………………………
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
//using namespace............
using
MvcCountryStateCity.Models;
namespace
MvcCountryStateCity.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
//create instance of entity...........................
JqueryExamEntities mm = new JqueryExamEntities();
public ActionResult Index()
{
ViewBag.ddlcountry =
CountryBind();
return View();
}
//code for bind Country
Name...........................
public List<SelectListItem> CountryBind()
{
List<SelectListItem> li = new List<SelectListItem>();
foreach (var v in mm.CountryDetails)
{
li.Add(new SelectListItem { Text =
v.CountryName, Value = v.CountryId.ToString() });
}
//ViewBag.ddlcountry = li;
//return View();
return li;
}
//code for bind State
Name...........................
[HttpGet]
[HttpGet]
public JsonResult StateBind(string country)
{
int id = Convert.ToInt32(country);
var v =
mm.StateDetails.Where(m => m.CountryId == id).Select(m => new { Text =
m.StateName, Value = m.StateId });
return Json(v, JsonRequestBehavior.AllowGet);
}
//code for bind City
Name...........................
[HttpGet]
public JsonResult CityBind(string state)
{
int id = Convert.ToInt32(state);
var v =
mm.CityDetails.Where(m => m.StateId == id).Select(m => new { Text =
m.CityName, Value = m.CityId });
return Json(v, JsonRequestBehavior.AllowGet);
}
}
}
Result:
This Is Not a Complete Solution .Because Only Country Are Bind Correctly Rest Of The Bind Successfully. Please Give Proper Reason Why DropDown Of State and City are not bind .
ReplyDeleteYou are missing [HttpGet] Attribute on CityBind(string state) function and also in StateBind(string country) in this function due to this reason get request is not responce.
ReplyDeleteWhen i add this on our code it is working fine.
Sorry for that I am missing [HttpGet] Attribute with both StateBind and CityBind method thank you very much for feedback I will add more updates
ReplyDeleteSuperb bro,simple and easy code,easy to bind dropdown data,
ReplyDelete