0

3 つの DropDownLists があります。#1 のアイテムを選択すると、#1 の値に従って #2 のアイテムが入力されます。＃2のアイテムを選択すると、＃2の選択に従って＃3のアイテムが入力されます。それらはすべて、という名前のフォームにありGetItemsForLeve1ます。onchangeドロップダウンを使用することから始めました。

<% using (Html.BeginForm("GetItemsForLeve1", "Index"))
    { %>             
       Main Group: <%:Html.DropDownList("Level1", (SelectList)ViewBag.Level1, "Select One", new { onchange = "$this.form.submit()" })%> 
       <%:Html.DropDownList("Level2", (SelectList)ViewBag.Level2, "-", new { onchange = "$this.form.submit()" })%> 
       <%:Html.DropDownList("Level3", (SelectList)ViewBag.Level3, "-", new { onchange = "$this.form.submit()" })%> 
         <input type="submit" value="Filter" />
    <%}%>

  1. ページをサーバーに送り返さずに、レベル 2 とレベル 3 のドロップダウン リストを埋めることはできますか?

  2. GetItemsForLevelアクションでクリックされたドロップダウン リストを確認するにはどうすればよいですか? 私は MVC にまったく慣れていないので、簡単に教えていただければ幸いです。

ありがとうございました

4

1 に答える 1

0

私の知る限り、これを行うコンポーネントは実際にはありません。ただし、Ajax.BeginFormヘルパーを使用してビルドすることはできます。

  1. 最初のajaxフォームには最初の選択リストが含まれ、部分的なビューを返すアクションにポストバックする必要があります
  2. 1.の部分ビューは、2番目の選択リストを含む2番目のajaxフォームを返す必要があります
  3. など

したがって、メインのRazorビューには次のようなものが含まれている必要があります。

@using (Ajax.BeginForm("SecondAjaxForm", new AjaxOptions() { UpdateTargetId = "secondFormDiv" })
{
    @Html.DropDownList("selectList1", Model.FirstSelectList, new { onchange = "this.form.submit()")
}

<!-- the second AJAX form + drop-down list will get populated here
<div id="secondFormDiv"></div>

そしてSecondAjaxFormアクション：

public ActionResult SecondAjaxForm(string selectList1)
{
    SelectList secondSelectList;
    // populate the second select list here
    return PartialView("SecondAjaxForm", secondSelectList);
}

部分ビューSecondAjaxFormは、基本的に上記の最初のフォームと同じである必要があります。

@model SelectList
@using (Ajax.BeginForm("ThirdAjaxForm", new AjaxOptions() { UpdateTargetId = "thirdFormDiv" })
{
    @Html.DropDownList("selectList2", Model, new { onchange = "this.form.submit()")
}

<!-- the third AJAX form + drop-down list (if any) will get populated here
<div id="thirdFormDiv"></div>
于 2012-09-29T06:48:11.907 に答える