MVC 3綁定SelectList下拉列表與JQuery

Question

我有以下關於MVC和Jquery的問題。我希望能夠使用JQuery調用操作serverside，然後將結果綁定到下拉列表。

在這一刻我有類似的東西，但不是SelectList我只是回來一個匿名類型集合。

我有以下的JQuery：

<script type="text/javascript"> 

    (function ($) { 
     $.fn.cascade = function (options) { 
      var defaults = {}; 
      var opts = $.extend(defaults, options); 

      return this.each(function() { 
       $(this).change(function() { 
        var selectedValue = $(this).val(); 
        var params = {}; 
        params[opts.paramName] = selectedValue; 
        $.getJSON(opts.url, params, function (items) { 
         opts.childSelect.empty(); 
         $.each(items, function (index, item) { 
          opts.childSelect.append(
           $('<option/>') 
            .attr('value', item.Id) 
            .text(item.Name) 
          ); 
         }); 
        }); 
       }); 
      }); 
     }; 
    })(jQuery); 

    $(function() { 
     $('#Location_CountryId').cascade({ 
      url: '@Url.Action("Regions")', 
      paramName: 'countryId', 
      childSelect: $('#Location_RegionId') 
     }); 

     $('#Location_RegionId').cascade({ 
      url: '@Url.Action("Cities")', 
      paramName: 'regionId', 
      childSelect: $('#Location_CityId') 
     }); 
    }); 

</script> 

調用該動作在MVC 3：

public ActionResult Cities(int regionId) 
{ 
    IList cities; 
    using (DatingEntities context = new DatingEntities()) 
    { 
     cities = (from c in context.cities 
        where c.RegionID == regionId 
        select new 
        { 
         Id = c.CityId, 
         Name = c.Name 
        }).ToList(); 
    }; 

    return Json(cities, JsonRequestBehavior.AllowGet); 
} 

我的問題，我可以再返回的SelectList，而不是IList的和正確綁定呢？

您能否提供我的代碼示例？我有更復雜的行爲，只是爲了簡單起見，我只發佈了部分內容。

謝謝

Answer 1

那麼如何創建一個呈現選擇列表選項的html並回應呢？

_SelectList.cshtml：

@model IList<SelectListItem> 

@{ 
    foreach (var item in Model) 
    { 
    <option value=@item.Value>@item.Text</option> 
    } 
} 

從你的控制器：

public ActionResult Cities(int regionId) 
{ 
    IList<SelectListItem> cities; 
    using (DatingEntities context = new DatingEntities()) 
    { 
    cities = (from c in context.cities 
       where c.RegionID == regionId 
       select new SelectListItem() 
       { 
       Value = c.CityId, 
       Text = c.Name 
       }).ToList(); 
    }; 

    return PartialView("_SelectList", cities); 
} 

你的JS就可以是這樣的：

<script type="text/javascript"> 

    (function ($) { 
     $.fn.cascade = function (options) { 
      var defaults = {}; 
      var opts = $.extend(defaults, options); 

      return this.each(function() { 
       $(this).change(function() { 
        var selectedValue = $(this).val(); 
        var params = {}; 
        params[opts.paramName] = selectedValue; 
        $.get(opts.url, params, function (items) { 
        opts.childSelect.empty(); 
        opts.childSelect.html(items); 
        } 
       }); 
      }); 
     }; 
    })(jQuery); 

    $(function() { 
     $('#Location_CountryId').cascade({ 
      url: '@Url.Action("Regions")', 
      paramName: 'countryId', 
      childSelect: $('#Location_RegionId') 
     }); 

     $('#Location_RegionId').cascade({ 
      url: '@Url.Action("Cities")', 
      paramName: 'regionId', 
      childSelect: $('#Location_CityId') 
     }); 
    }); 

</script> 

雖然 - 我通常做類似的東西您的JSON代碼如上:-)

HTH

Answer 2

如何使用一些簡單的jQuery來遍歷JSON對象，您的Cities方法返回。例如

<script> 
    $('#Location_RegionId').change(function() { 

    $.get('@Url.Action("Cities", "[ControllerName]")/' + $('#Location_RegionId').val(), function (data) { 
     $('#Location_CityId').empty(); 
     $.each(data, function() { 
       $('#Location_CityId').append($('<option />').val(this.CityId).text(this.Name)); 
       }); 
     }); 
    }); 

    $('#Location_RegionId').change(); 
<script/> 

假設在各區域的選擇被稱爲Location_RegionId，並與城市的選擇有Location_CityId的ID。

爲了達到上述目的，它需要位於視圖文件的底部，因此@Url.Action會呈現爲相應的URL。否則，您可以將其硬編碼到.js文件中並使用document.ready將其包圍。

在獲得城市的名單後，控制器

Answer 3

，因爲在Jquery`的`情況下轉換成一個選擇列表項，如下

var list=new List<SelectListItem>(); 
list.AddRange(cities.Select(o => new SelectListItem 
      { 
       Text = o.Name, 
       Value = o.CityId.ToString() 
      })); 
     } 
return Json(list);