使用AJAX MVC 4填充DropDownList

Question

我有一個包含2 @ DropDownListFor的助手的視圖：

    @using (Html.BeginForm("CreateOneWayTrip", "Trips"))
    {
        @Html.ValidationSummary(false);
        <fieldset>
            <legend>Enter Your Trip Details</legend>

            <label>Start Point</label>
            @Html.DropDownListFor(m => m.StartPointProvince, (SelectList)ViewBag.Provinces, new { @Id = "province_dll", @class = "form-control" })
            @Html.DropDownListFor(m => m.StartPointCity, (SelectList)ViewBag.Cities, new { @Id = "city_dll", @class = "form-control" })

            <p style="float: none; text-align: center;">
                <button type="submit" value="Create" class="btn btn-info btn-circle btn-lg">
                    <i class="fa fa-check"></i>
                </button>

                <button type="submit" value="Create" class="btn btn-warning btn-circle btn-lg">
                    <i class="fa fa-times"></i>
                </button>
            </p>
        </fieldset>
    }

這是我用來捕獲數據的臨時模型：

 public class CaptureCreateTrip
 {
    [Required]
    [Display(Name = "Trip ID")]
    public string TripID { get; set; }

    [Required]
    public string StartPointProvince { get; set; }

    [Required]
    public string StartPointCity { get; set; }
}

創建頁面時會填充其中一個DropsDownList，而第二個將根據用戶在第一個DropDownList中選擇的選項進行填充。 為實現這一目標，我使用的是ajax。 我使用的javascript看起來像這樣：

 $("#province_dll").change(function () { $.ajax({ url: 'getCities/Trips', type: 'post', data: { provinceId: $("#province_dll").val() } }).done(function (response) { $("cities_dll").html(response); }); }); 

這是AJAX調用的Controller：

  [HttpPost]
  public ActionResult getCicites(int provinceId)
  {
      var lstCities = new SelectList(new[] { "City1", "City2", "City3" });

      return Content(String.Join("", lstCities));
  }

到目前為止一切正常 - 當我在我的省DropDown中選擇一個值時，javascript事件會觸發，而Controller操作會將選擇列表值返回到Cities DropDown，但問題是數據（格式為數據） Action返回不正確。 我通過創建一個Paragraph元素並使用ajax調用的返回值更新它的文本來測試它，即：“System.Web.Mvc.SelectListItemSystem.Web.Mvc.SelectListItemSystem.Web.Mvc.Select ListItem”

*注意：我是ajax的新手，在學習Jquery和AJAX的過程中。

Answer 1

你獲得字符串"System.Web.Mvc.SelectListItemSystem"是var lstCities = new SelectList(new[] { "City1", "City2", "City3" }); 返回IEnumerable<SelectListItem>和String.Join("", lstCities)調用集合中每個SelectListItem項的.ToString()方法，返回"System.Web.Mvc.SelectListItemSystem" （不是SelectListItem的Text屬性的值） ）

填充第二個下拉列表的最佳方法是返回包含城市集合的json，並在ajax成功回調中更新DOM。 沒有理由創建一個SelectList - 它只是不必要的額外開銷，並且你必須將至少3倍的數據返回給客戶端（客戶端沒有C＃ SelectListItem類的概念）。

public JsonResult FetchCities(int provinceId) // its a GET, not a POST
{
    // In reality you will do a database query based on the value of provinceId, but based on the code you have shown
    var cities = new List<string>() { "City1", "City2", "City3" });
    return Json(cities, JsonRequestBehavior.AllowGet);
}

然后在腳本中（不知道為什么你將默認id從id="StartPointProvince"為id="province_dll" ，但）

var url = '@Url.Action("FetchCities", "Trips")'; // Don't hard code your url's!
var cities = $('#city_dll'); // cache it
$("#province_dll").change(function () {
    var id = $(this).val(); // Use $(this) so you don't traverse the DOM again
    $.getJSON(url, { provinceId: id }, function(response) {
        cities.empty(); // remove any existing options
        $.each(response, function(index, item) {
            cities.append($('<option></option>').text(item));
        });
    });
});

編輯

繼OP的評論之后，如果數據庫包含一個表名為Cities with fields ID和Name ，那么控制器方法就是這樣的

public JsonResult FetchCities(int provinceId) // its a GET, not a POST
{
    var cities = db.Cities.Select(c => new
    {
      ID = c.ID,
      Text = c.Text
    }
    return Json(cities, JsonRequestBehavior.AllowGet);
}

並且創建選項的腳本將是

$.each(response, function(index, item) { // item is now an object containing properties ID and Text
    cities.append($('<option></option>').text(item.Text).val(item.ID));
});

Answer 2

你能試試以下嗎？

這是我幾天前發帖的帖子。 字體： 動態DropDownLists在MVC 4表格中

您應該在省ddl的change事件中創建一個ajax調用。 此呼叫將請求某個操作並返回所選省份的城市。

$("province_dll").change(function(){
    $.ajax({
         url: 'getCitiesController/getCitiesAction',
         type: 'post',
         data: {
               provinceId: provinceIdVar
         }
    }).done(function(response){
         $("cities_dll").html(response);
    }); 
});

在行動中：

[HttpPost]
public ActionResult getCicitesAction(int provinceId)
{
     var cities = db.cities.Where(a => a.provinceId == provinceId).Select(a => "<option value='" + a.cityId + "'>" + a.cityName + "'</option>'";

     return Content(String.Join("", cities));
}

Answer 3

讓它變得更簡單

• 第1步：服務器端功能/數據

   public JsonResult FetchP(string O) { List<SelectListItem> PList = new List<SelectListItem>(); PList = _PService.GetAllPActive() .Select(i => new SelectListItem() { Text = i.PName, Value = i.PID }).ToList(); return Json(PList, JsonRequestBehavior.AllowGet); } 

• 第2步：客戶端功能/數據解釋器

   function FetchP() { var url = '@Url.Action("FetchP", "Your_Controller")'; var PDD= $("#PDD"); var ODD= $("#ODD").val(); $.getJSON(url, { O: ODD}, function (response) { PDD.empty(); debugger; $.each(response, function (index, item) { debugger; var p = new Option(item.Text, item.Value); PDD.append(p); }); }); } 

• 第3步：呼叫 - 客戶端功能/啟動

• 清單1：

   @Html.DropDownList("ODD", ViewBag.OList as IEnumerable<SelectListItem>, new { @id = "ODD", @class = "form-control", @onchange= "FetchP()" }) 

• 清單2：

   @Html.DropDownList("PDD", ViewBag.PList as IEnumerable<SelectListItem>,new { @id = "PDD", @class = "form-control"})