Cascading DropDown List in MVC 4

Misi picture Misi · Jun 29, 2012 · Viewed 11.3k times · Source

I have a ASP.NET MVC 4 project with EF I have a table with Parteners. This table has 2 types of parteners : agents(part_type=1) and clients(part_type=2). In an Create view I have the first DropDownList that shows all my agents, a button and the second DDL that shows all my clients that correspond to the selected agent. Q1 : What button shoud I use ? , , @Html.ActionLink() ? Create.cshtml

    <div class="editor-field">
        @Html.DropDownList("idagenti", ViewData["idagenti"] as List<SelectListItem>, String.Empty)
    </div>
    @*a button*@
    <div class="editor-label">
        @Html.LabelFor(model => model.id_parten, "Client")
    </div>
    <div class="editor-field">
        @Html.DropDownList("id_parten", String.Empty)
        @Html.ValidationMessageFor(model => model.id_parten)
    </div>

OrdersController.cs

 public ActionResult Create(int? id) // id is the selected agent
 {
    var agqry = db.partener.Where(p => p.part_type == 1).Where(p => p.activ == true);
    var cltqry = db.partener.Where(p => p.part_type == 2).Where(p => p.activ == true);
    List<SelectListItem> idagenti = new List<SelectListItem>();
    foreach (partener ag in agqry)
    {
       idagenti.Add(new SelectListItem { Text = ag.den_parten, Value = ag.id_parten.ToString() });
    }
    if (id != null)
    {
        cltqry = cltqry.Where(p => p.par_parten == id);
    }
    ViewData["idagenti"] = idagenti;
    ViewBag.id_parten = new SelectList(cltqry, "id_parten", "den_parten");//
 }

Q: How can I pass the selected agent id from the first DDL to my controller ?

Answer

David East picture David East · Jun 29, 2012

The following form is a situation where based upon the selected gender (Male or Female), the titles for the gender are displayed (Mr. for Male, Mrs. for female).

Using the Ajax.Begin() helper you can post back to the controller and return values to the view.

All of the data is hard-coded so please forgive the manual adding of the information.

View - Form.cshtml

<fieldset>
    <legend>Form</legend>
    @* This will post to the BindTitles method in the Form Controller *@
    @using (Ajax.BeginForm("BindTitles", "Form", new AjaxOptions
    {
        HttpMethod = "POST"
    }))
    {  
        <p>
            @Html.DropDownList("Genders")
        </p>        
        <p>
            <input type="submit" value="Submit" />
        </p>
    }
    <p>
        @Html.DropDownList("Titles")
    </p>
</fieldset>

Controller - FormController

    public ActionResult Form()
    {
        List<string> genderList = new List<string>();
        genderList.Add("Male");
        genderList.Add("Female");
        ViewBag.Genders = new SelectList(genderList);
        ViewBag.Titles = new SelectList(new List<string>());
        return View();
    }

    [HttpPost]
    public ActionResult BindTitles(string genders)
    {
        List<string> titles = new List<string>();
        if (genders == "Male")
        {
            titles.Add("Mr.");
            titles.Add("Sr.");
        }
        else
        {
            titles.Add("Ms.");
            titles.Add("Mrs.");
        }
        ViewBag.Titles = new SelectList(titles);
        List<string> genderList = new List<string>();
        genderList.Add("Male");
        genderList.Add("Female");
        ViewBag.Genders = new SelectList(genderList);
        return View("Form");
    }