如何在mvc中使用級聯下拉列表

Question

上午使用asp.net mvc3，我有2個表格，我希望從下拉列表中獲取數據，基於此另一個下拉列表必須執行。例如，如果我選擇國家它必須顯示狀態屬於該國家，我正在控制器中使用以下代碼。

ViewBag.country= new SelectList(db.country, "ID", "Name", "--Select--"); 
ViewBag.state= new SelectList("", "stateID", "Name"); 

    @Html.DropDownListFor(model => model.Country, (IEnumerable<SelectListItem>)ViewBag.country, "-Select-") 

    @Html.DropDownListFor(model => model.state, (IEnumerable<SelectListItem>)ViewBag.state, "-Select-") 

但通過使用這我能夠得到只有國家。

Answer 1

有一個很好的jQuery plugin，可以幫助這...

你不想刷新整個頁面每次有人更改國家下拉 - 一個AJAX調用簡單地下來就是更新狀態下降更加用戶友好。

Answer 2

jquery Ajax是這類問題的最佳選擇。

腳本代碼下面給出

<script type="text/javascript"> 
    $(function() { 
      $("#@Html.FieldIdFor(model => model.Country)").change(function() { 
       var selectedItem = $(this).val(); 
       var ddlStates = $("#@Html.FieldIdFor(model => model.state)"); 

       $.ajax({ 
        cache:false, 
        type: "GET", 
        url: "@(Url.Action("GetStatesByCountryId", "Country"))", 
        data: "countryId=" , 
        success: function (data) { 
         ddlStates.html(''); 
         $.each(data, function(id, option) { 
          ddlStates.append($('<option></option>').val(option.id).html(option.name));//Append all states to state dropdown through returned result 
         }); 
         statesProgress.hide(); 
        }, 
        error:function (xhr, ajaxOptions, thrownError){ 
         alert('Failed to retrieve states.'); 
         statesProgress.hide(); 
        } 
       }); 
      }); 
     }); 
</script> 

控制器：

public ActionResult GetStatesByCountryId(string countryId) 
     { 
      // This action method gets called via an ajax request 
      if (String.IsNullOrEmpty(countryId)) 
       throw new ArgumentNullException("countryId"); 

      var country = GetCountryById(Convert.ToInt32(countryId)); 
      var states = country != null ? GetStatesByConutryId(country.Id).ToList() : new List<StateProvince>();//Get all states by countryid 
      var result = (from s in states 
          select new { id = s.Id, name = s.Name }).ToList(); 

      return Json(result, JsonRequestBehavior.AllowGet); 
     } 

Answer 3

試試這個，

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#Country").change(function() { 

      var Id = $("#Country").val(); 
      $.ajax({ 
       url: '@Url.Action("GetCustomerNameWithId", "Test")', 
       type: "Post", 
       data: { Country: Id }, 
       success: function (listItems) { 
        var STSelectBox = jQuery('#state'); 
        STSelectBox.empty(); 
        if (listItems.length > 0) { 
         for (var i = 0; i < listItems.length; i++) { 
          if (i == 0) { 
           STSelectBox.append('<option value="' + i + '">--Select--</option>'); 
          } 
          STSelectBox.append('<option value="' + listItems[i].Value + '">' + listItems[i].Text + '</option>'); 

         } 

        } 
        else { 
         for (var i = 0; i < listItems.length; i++) { 
          STSelectBox.append('<option value="' + listItems[i].Value + '">' + listItems[i].Text + '</option>'); 

         } 
        } 
       } 


      }); 

     }); 
}); 
</script> 

查看

@Html.DropDownList("Country", (SelectList)ViewBag.country, "--Select--") 
    @Html.DropDownList("state", new SelectList(Enumerable.Empty<SelectListItem>(), "Value", "Text"), "-- Select --") 

控制器

public JsonResult GetCustomerNameWithId(string Country) 
     { 
      int _Country = 0; 
      int.TryParse(Country, out _Country); 
      var listItems = GetCustomerNameId(_Country).Select(s => new SelectListItem { Value = s.CountryID.ToString(), Text = s.CountryName }).ToList<SelectListItem>(); 
      return Json(listItems, JsonRequestBehavior.AllowGet); 
     }