Cascading DropDown List in MVC 4

11,325

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");
    }
Share:
11,325

Related videos on Youtube

Misi
Author by

Misi

Software Developer at Arhimedes

Updated on July 11, 2022

Comments

  • Misi
    Misi almost 2 years

    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 ?