Начало работы, настройка индексной страницы

Question

Я только начинаю с MVC, и я бы хотел отобразить два списка DropDownLists на моей индексной странице - индексное представление и заполнить первый раскрывающийся список с уникальным именем состояния из базы данных и на основе выбора из первый раскрывающийся список, введите второе раскрывающееся меню с данными из имен из таблицы базы данных, где состояние равно состоянию, выбранному в первом раскрывающемся списке.

У меня уже есть класс модели создан и ниже мой контроллер:

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

    return View(rl); 
} 

На мой взгляд index.shtml я следующее, чтобы отобразить первый DropDownList:

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

     </option> 

    } 
    </select> 
} 

Теперь, как я могу гарантировать, что из базы данных выбрано только отдельное состояние, и как мне заняться созданием и заполнением второго раскрывающегося списка на основе выбора в первом? Может ли кто-нибудь указать мне в правильном направлении? Спасибо

Update:

Для того, чтобы отобразить различные состояния в раскрывающемся списке, я изменил мой контроллер следующим образом:

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

Answer 1

Для того, чтобы отобразить различные состояния в раскрывающемся списке, я изменил мой контроллер следующим образом:

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

Answer 2

В контроллере оных folowing линии:

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

На месте:

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

Создать метод:

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

    return View(); 
} 

и частичный вид:

@{ 
    Layout = null; 
} 

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

Также вам нужно включить "~/Scripts/jquery.unobtrusive-ajax.js"

После изменения сначала выбрать будет отправить AJAX запрос на index2 метода. В ответ вы получите второй выбор, который бы от помещен внутрь div#updateTarger