create table dbo.country
(
Cid int not null identity(1,1) primary key,
Cname varchar(100)
);
create table dbo.State
(
Sid int not null identity(1,1) primary key,
Sname varchar(100),
Cid int
);
create table dbo.city
(
Cityid int not null identity(1,1) primary key,
Cityname varchar(100),
Sid int
);
Home Controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Casdropdown.Models;
namespace Casdropdown.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
studentEntities db = new studentEntities();
ViewBag.country = new SelectList(Getcountrylist(), "Cid", "Cname");
return View();
}
public List<country> Getcountrylist()
{
studentEntities sd = new studentEntities();
List<country> countries = sd.countries.ToList();
return countries;
}
public ActionResult GetstateList(int Cid)
{
studentEntities db = new studentEntities();
List<State> selectList = db.States.Where(x => x.Cid == Cid).ToList();
ViewBag.Slist = new SelectList(selectList, "Sid", "Sname");
return PartialView("DisplayState");
}
public ActionResult GetCityList(int Sid)
{
studentEntities db = new studentEntities();
List<city> selectList = db.cities.Where(x => x.Sid == Sid).ToList();
ViewBag.Citylist = new SelectList(selectList, "Cityid", "Cityname");
return PartialView("Displaycity");
}
}
}
View
Index View
@model Casdropdown.Models.Cascadingclass
@{
ViewBag.Title = "Index";
}
<h2>Cascading Dropdown list</h2>
@if (ViewBag.country!=null)
{
@Html.DropDownListFor(m =>m.Cid, ViewBag.country as SelectList,"--Select Country Name---" ,new { @class="form-control"})
}
@Html.DropDownListFor(m => m.Sid, new SelectList(""), "--Select State Name---", new { @class = "form-control" })
@Html.DropDownListFor(m => m.Cityid, new SelectList(""), "--Select City Name---", new { @class = "form-control" })
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function () {
$("#Cid").change(function () {
var countryId = $(this).val();
// debugger
$.ajax({
type: "post",
url: "/Home/GetstateList?Cid=" + countryId,
contentType: "html",
success: function (response) {
console.log(response)
// debugger
$("#Sid").empty();
$("#Sid").append(response);
}
})
})
$("#Sid").change(function () {
var stateId = $(this).val();
// debugger
$.ajax({
type: "post",
url: "/Home/GetCityList?Sid=" + stateId,
contentType: "html",
success: function (response) {
console.log(response)
// debugger
$("#Cityid").empty();
$("#Cityid").append(response);
}
})
})
})
</script>
Shared Partial View
DisplayState Partial.cshtml
@model Casdropdown.Models.State
<option value="">--Select State--</option>
@if (ViewBag.Slist !=null)
{
foreach (var item in ViewBag.Slist)
{
<option value="@item.Value">@item.Text</option>
}
}
Shared Partial View
DisplayCity Partial.cshtml
@model Casdropdown.Models.city
<option value="">--Select City--</option>
@if (ViewBag.Citylist != null)
{
foreach (var item in ViewBag.Citylist)
{
<option value="@item.Value">@item.Text</option>
}
}
Model
namespace Casdropdown.Models
{
public class Cascadingclass
{
public int Cid { get; set; }
public int Sid { get; set; }
public int Cityid { get; set; }
}
}
Database class
public partial class city
{
public int Cityid { get; set; }
public string Cityname { get; set; }
public Nullable<int> Sid { get; set; }
}
public partial class country
{
public int Cid { get; set; }
public string Cname { get; set; }
}
public partial class State
{
public int Sid { get; set; }
public string Sname { get; set; }
public Nullable<int> Cid { get; set; }
}
No comments:
Post a Comment