MVC 3用JQuery绑定SelectList到下拉列表

本文关键字：SelectList 下拉列表 绑定 JQuery MVC | 更新日期: 2023-09-27 18:16:43

我有以下关于MVC和Jquery的问题。我希望能够用JQuery调用一个动作服务器端，然后返回结果绑定到下拉列表。

在这一刻，我确实有类似的东西，但不是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而不是illist并正确绑定它吗?

你能提供一个例子与我的代码吗?我有更复杂的行为，只是为了简单，我只发布了一部分。

谢谢

MVC 3用JQuery绑定SelectList到下拉列表

创建一个局部来呈现selectlist选项的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

如何使用一些简单的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，您选择的城市id为Location_CityId。

要像上面那样工作，它需要位于视图文件的底部，因此@Url.Action被呈现为适当的URL。否则，你可以将其硬编码到一个.js文件中，并用document.ready.

包围它。

在获取城市列表后将其转换为如下所示的选择列表项

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