Getting started, setting up index page

Question

I am just getting started with MVC and I'd like to display two DropDownLists on my index page - index view and populate first dropdown with unique State name from the database and based on the selection from the first dropdown, populate second dropdown with data from Names from the database table where state equals to the state selected in the first dropdownlist.

I already have Model class created and below is my controller:

public ActionResult Index()
{
    MyRecordContext rc = new MyRecordContext();
    List<MyRecord> rl = rc.MyRecords.ToList();

    return View(rl);
}

In my view Index.shtml I have the following to display first dropdownlist:

@if (Model != null)
{
    <select id="ddlState">
    @foreach (var item in Model)
    {
        <option>
            @item.State

        </option>

    }
    </select>
}

Now how can I ensure that only distinct state is selected from the database and how do I go about creating and populating second dropdown based on selection in the first? Can someone please point me in the right direction? Thank you

Update:

In order to display distinct states in the dropdown, I modified my controller the following way:

public ActionResult Index()
{
    MyRecordContext rc = new MyRecordContext();
    List<String> sl = rc.MyRecords.Select(s => s.State).Distinct().ToList();
    return View(sl);
}

For your second question: see http://stackoverflow.com/questions/705540/asp-net-mvc-cascading-drop-down?rq=1. For your first question: It will really depend on what your dbContext and `MyRecords` looks like and how you keep your States. — Jasen, May 26 '15 at 21:55

zborek · Answer 1 · 2015-05-26T22:25:34.833

0

In controller add folowing line:

ViewBag.ddlState= new SelectList(rl, "valueFieldName", "textFieldName");

In view:

@using (Ajax.BeginForm("Index2", new AjaxOptions { UpdateTargetId = "updateTarger" }))
{
    @Html.DropDownList("ddlState", null, String.Empty, new { onchange ="$(this.form).submit()"})
}
<div id="updateTarger"></div>

Create method:

public ActionResult Index2(string ddlState) // ddlState = value from select, type depends on value
{
    ...
    ViewBag.ddlState2 = new SelectList(rl2, "valueFieldName", "textFieldName");

    return View();
}

and partial view:

@{
    Layout = null;
}

@Html.DropDownList("ddlState2", null, String.Empty, new { onchange ="$(this.form).submit()"})

Also you need include "~/Scripts/jquery.unobtrusive-ajax.js"

After change first select it will send ajax request to Index2 method. In response you will get second select which would by placed inside div#updateTarger

edited May 26 '15 at 22:25

answered May 26 '15 at 21:45

zborek

81
8

is there a way to do this without ajax? – Coding Duchess May 27 '15 at 11:54
Also I already have the first dropdown and it is getting populated, I just need to activate the second dropdown population whenever selection is made in the first one – Coding Duchess May 27 '15 at 13:09
If data in second dropdown depends on selected value from first select, ajax is (in my opinion) the simplest way. You handle this in javascript, but then you will need load data for all choices from first dropdown. e.g create X hidden select with id depends on first dropdown values and in first dropdown place `onchange="$('.secondSelect').hide(); $('#ValueId.secondSelect').show();"` – zborek May 27 '15 at 14:23

score 0 · Accepted Answer · answered Feb 10 '16 at 15:52

In order to display distinct states in the dropdown, I modified my controller the following way:

public ActionResult Index() 
{
    MyRecordContext rc = new MyRecordContext();
    List<String> sl = rc.MyRecords.Select(s => s.State).Distinct().ToList();
    return View(sl);
}

Getting started, setting up index page

2 Answers2