Introduction

The Simple Cascading Dropdownlist binding , So many developer's facing this issue.

Background

VS2012 - MVC3 , Ef4.1 and LINQ, JSON.

Using the code

This is controller class - load method.

Blocks of code should be set as style "Formatted" like this:

//-------------Load Method or Action -------------------------------
// public ActionResult Register()
{
ViewBag.Country = db.Countries.ToList();
ViewBag.State = db.States.ToList();
ViewBag.City = db.Cities.ToList();
return View("SignUp");
}
//

----------------------Save Methods or Action--------------------

[HttpPost]
public ActionResult Register(RegistrationModel objRegister)
{

ViewBag.Country = db.Countries.ToList();
ViewBag.State = db.States.ToList();
ViewBag.City = db.Cities.ToList();
if (objRegister.User_Insert_Buss(objRegister) != 0)
{
ViewBag.Message = "Successful";

}
return View("SignUp", objRegister);

}
public class RegistrationModel
{
WebSolutionDBEntities context = new WebSolutionDBEntities();
public int UserID { get; set; }
public string EamilAddress { get; set; }
public string Password { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public CountryModel CountryModels { get; set; }
public StateModel StateModels { get; set; }
public CityModel CityModels { get; set; }
public int UserRoleID { get; set; }
public int RoleID { get; set; }
public bool IsActive { get; set; }
public string IPAddress { get; set; }


#region ------- Country---State---City--------



#endregion




#region .... Methods

public int User_Insert_Buss(RegistrationModel objRegister)
{
int a = 0;
UserProfile objprofile = new UserProfile();
objprofile.CountryID = objRegister.StateModels.CountryID;
objprofile.CityID = objRegister.StateModels.SatateID;
objprofile.SatateID = objRegister.CityModels.CityID;
objprofile.FirstName = objRegister.CountryModels.CountryName;
objprofile.LastName = objRegister.LastName;
objprofile.Email = objRegister.EamilAddress;
objprofile.Password = objRegister.Password;
objprofile.DOB = DateTime.Now;
objprofile.CreatedDate = DateTime.Now;

context.UserProfiles.Add(objprofile);
context.SaveChanges();

int a1 = objprofile.UserId;

if (a1 != 0)
{
//UserRole_Mapping objrole = new UserRole_Mapping();
//objrole.UserID = a1;
//objrole.RoleID = 1;
//context.UserRole_Mapping.Add(objrole);
//context.SaveChanges();

}


return a;
}

public RegistrationModel Login(RegistrationModel objlogin)
{

var user = context.UserProfiles.FirstOrDefault(u => u.Email == objlogin.EamilAddress);
if (user != null)
{
return objlogin;
}
return objlogin;
}

#endregion

}

@model Mvc3App.Models.Entity.RegistrationModel

<script type="text/javascript">
$(document).ready(function () {
$("#ddlCars").change(function () {
var idModel = $(this).val();
$.getJSON("/Index/LoadModelsByCar", { id: idModel },
function (carData) {
var select = $("#ddlModels");
select.empty();
select.append($('<option/>', {
value: 0,
text: "Select a Model"
}));
$.each(carData, function (index, itemData) {

select.append($('<option/>', {
value: itemData.Value,
text: itemData.Text
}));
});
});
});
$("#ddlModels").change(function () {
var idColour = $(this).val();
$.getJSON("/Index/LoadColoursByModel", { id: idColour },
function (modelData) {
var select = $("#ddlColours");
select.empty();
select.append($('<option/>', {
value: 0,
text: "Select a Colour"
}));
$.each(modelData, function (index, itemData) {

select.append($('<option/>', {
value: itemData.Value,
text: itemData.Text
}));
});
});
});
});

</script>

@using (Html.BeginForm("Register","Account"))
{
<form action="mysuperscript.php" autocomplete="on">
<h1> Sign up </h1>
<p>
<label for="usernamesignup" class="uname" data-icon="u">Your username</label>
@Html.TextBoxFor(m => m.EamilAddress, new { placeholder="mysuperusername690",required="required" })

</p>

<p>
<label for="usernamesignup" class="uname" data-icon="u">Country</label>
@Html.DropDownListFor(Model => Model.CountryModels.CountryName, new SelectList(ViewBag.Cars as System.Collections.IEnumerable, "CountryID", "Name"),
"Select a Car", new { id = "ddlCars" })



</p>
<p>
<label for="usernamesignup" class="uname" data-icon="u">Country</label>

@Html.DropDownListFor(Model => Model.StateModels.SatateID, new SelectList(Enumerable.Empty<SelectListItem>(), "StateID", "Name"),
"Select a Model", new { id = "ddlModels" })


</p>
<p>
<label for="usernamesignup" class="uname" data-icon="u">Country</label>

@Html.DropDownListFor(Model => Model.CityModels.CityID, new SelectList(Enumerable.Empty<SelectListItem>(), "CityID", "Name"),
"Select a Colour", new { id = "ddlColours" })


</p>

<p>
<label for="emailsignup" class="youmail" data-icon="e">Your email</label>
@Html.TextBoxFor(m => m.EamilAddress, new { placeholder="[email protected]",required="required" })

</p>
<p>
<label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>
@Html.PasswordFor(m => m.Password, new { placeholder="eg. X8df!90EO",required="required" })


</p>
<p>
<label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>

@Html.PasswordFor(m => m.Password, new { placeholder="eg. X8df!90EO",required="required" })

</p>
<p class="signin button">
<input type="submit" value="Sign up"/>
</p>
<p class="change_link">
Already a member ?
<a href="#tologin" class="to_register"> Go and log in </a>
</p>
</form>
}

Points of Interest

Did you learn anything interesting/fun/annoying while writing the code? Did you do anything particularly clever or wild or zany?

History

Keep a running update of any changes or improvements you've made here.