asp.net-mvc-3 - Mvc3 のカスケード ドロップダウン

Question

私はMvc3を使用しています.2つのドロップダウン、BankBranchとcityがあります。ビューの初回ロード時に、カスケードせずに両方のドロップドンをバインドしています。次に、ユーザーが都市を選択した場合、それに応じて銀行支店を変更します。どうすれば両方を一緒に達成できるか混乱しています。

前もって感謝します。

Answer 1

このブログ投稿は、あなたのやり方に役立つはずです。通常のフォーム投稿、Microsoft ajax フォーム投稿、jquery ajax などの例を提供します。

http://weblogs.asp.net/raduenuca/archive/2011/03/06/asp-net-mvc-cascading-dropdown-lists-tutorial-part-1-defining-the-problem-and-the-context. aspx

編集: 一般化されたコードの説明

モデル

public class CascadeModel {
    public SelectList<City> Cities { get; set; }
    public SelectList<BankBranch> BankBranches { get; set;}
    public int CityId { get; set; }
    public int BranchId { get; set; }
}

public class Branch {
    public int Id { get; set;}
    public string Name { get; set; }
}

コントローラ：

public ActionResult BranchSelector() {
     var viewData = new CascadeModel();
     viewData.Cities = new SelectList(Repository.GetAllCities(), "Id", "Name", selectedCity);
     viewData.BankBranches = new SelectList(Repository.GetBranchesByCity(selectedCity), "Id", "Name", "");
     return View(viewData);
}

public JsonResult GetBranches(int id) {
    return Json(Repository.GetBranchesByCity(id), JsonRequestBehavior.AllowGet);
}

意見：

@model CascadeModel


@Html.DropDownListFor(m => m.CityId, Model.Cities, new { style = "width:250px" })
<br />
@Html.DropDownListFor(m => m.BranchId, Model.BankBranches, new { style = "width:250px" })

<script type="text/javascript">
    $(document).ready(function() {
         $("#CityId").bind('change', function() {
             $.ajax({
                 url: '/Controller/GetBranches/' + $(this).val(),
                 success: function(data) {
                     //Clear the current branch ddl
                     //Load the new Branch data returned from the jquery call in the branches ddl
                 }
             });
         };
    });
</script>