綁定和級聯下拉列表MVC 3

我的看法是綁定和級聯下拉列表MVC 3

<div id="Countryy"> 
     <div class="editor-label"> 
     @Html.LabelFor(model => model.Country, "Country") 
    </div> 
    <div class="editor-field"> 
     @Html.DropDownList("Country", String.Empty) 
     @Html.ValidationMessageFor(model => model.Country) 
    </div> 
    </div> 

    <div id="Statess"> 
    <div class="editor-label"> 
     @Html.LabelFor(model => model.State, "State") 
    </div> 
    <div class="editor-field"> 
     @Html.DropDownList("State", String.Empty) 
     @Html.ValidationMessageFor(model => model.State) 
    </div> 
    </div> 


    <div id="Cityy"> 
    <div class="editor-label"> 
     @Html.LabelFor(model => model.City, "City") 
    </div> 
    <div class="editor-field"> 
     @Html.DropDownList("City", String.Empty) 
     @Html.ValidationMessageFor(model => model.City) 
    </div> 
    </div

我的控制器

public ActionResult Edit(int id) 
    { 
     Student student = db.Students.Single(s => s.ID == id); 


     ViewBag.Country = new SelectList(db.Couns, "ID", "CountryName", student.Country); 
     ViewBag.State = new SelectList(db.States.Where(d => d.CountryID.Equals(student.Country)), "StateID", "StateName", student.State); 
     ViewBag.City = new SelectList(db.Cities.Where(x => x.StateID.Equals(student.State)), "CityID", "CityName", student.City); 


     return View(student); 
    }

塊引用

我的問題是我怎麼能級聯的國家，州和城市下拉列表。當我想要編輯數據時，會生成此視圖。從數據庫中保存的數據將被修改並綁定到控件ols，但是當用戶更改國家下拉列表的數值時，也應該根據它填充國家/地區下拉列表。我有國家，州和城市3個不同的表格，其中包含所需的pk和fk

來源

2012-09-01 siddharth

當發生國家下拉更改事件時，您必須調用ajax，並且您必須填寫相關的下拉列表。 –

@KundanSinghChouhan如何製作ajax調用。我newbe你可以給我一個例子plz – siddharth

找到[this]（http://www.codeproject.com/Articles/41828/JQuery-AJAX-with-ASP-NET-MVC）文章。 –

以下是國家和地區的解決方案在使用Ajax的MVC中狀態級聯下拉列表： -
通過控制器保留視圖包進行第一次下拉式綁定，對於第二次下拉式，我們可以使用JavaScript/Jquery根據所選國家/地區填充值。
下面CSHTML頁面上使用的代碼：

 <div class="editor-label"> 
       @Html.LabelFor(m => m.Country) 
      </div> 
      <div class="editor-field"> 
       @Html.DropDownListFor(model => model.Country, new SelectList(Model.Country,  "Value", "Text"), "Select Contry", new { onchange = "CountryChange()" }) 
      </div> 
      <div class="editor-label"> 
      @Html.LabelFor(m => m.State) 
      </div> 
      <div class="editor-field"> 
      @Html.DropDownList("state","Select State") 
      </div>

我們使用「CountryChange（）」 JavaScript函數來獲取並填寫根據國家變化的狀態下拉數據。以下是JavaScript函數的實現。指定

<script language="JavaScript" type="text/JavaScript"> 
    function CountryChange() { 
     var url = '@Url.Content("~/Account/GetState")'; 

     var ddlsource = "#Country"; 
     var ddltarget = "#State"; 
     if ($(ddlsource).val() != "") { 
      $.ajaxSetup({ cache: false }); 
      $.getJSON(url, { Sel_Country: $(ddlsource).val() }, function (data) { 
       $(ddltarget).empty(); 
       $("#State").append("<option value=''>Select State</option>"); 
       $.each(data, function (index, optionData) { 
       $("#State").append("<option value='" + optionData.Value + "'>" +  optionData.Text + "</option>"); 
       }); 
      }); 
     } 
     else { 
      $("#State").empty(); 
      $("#State").append("<option value=''>Select State</option>"); 
     } 
    } 
</script>

這裏JSON URL「〜/帳戶/ GETSTATE」是方法「GETSTATE」中的「帳戶」控制器可用來檢索數據和JSON格式傳遞數據。

 public JsonResult GetState (string Sel_Country) 
     { 
     CountryService db = new CountryService(); 
     JsonResult result = new JsonResult(); 
     var vStateList = db.GetStateList(Convert.ToInt64(Sel_Country)); 
     result.Data = vStateList.ToList(); 
     result.JsonRequestBehavior = JsonRequestBehavior.AllowGet; 
     return result; 
     }

來源

2012-09-03 09:13:09 RL89

綁定和級聯下拉列表MVC 3

回答

相關問題