Simple Cascading Dropdownlist Bind in MVC3 with examples


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.

Next Recommended Reading Simple GridView Data Binding in ASP.NET