Question

关于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而不是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迭代你的Cities方法返回的JSON对象。例如

<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。

为了使其按上述方式工作，它需要位于视图文件的底部，因此@Url.Action将呈现在相应的URL中。否则，您可以将其硬编码到.js文件中并用document.ready包围它。

Answer 3

获取城市列表后，在控制器中

将其转换为选择列表项，如下所示

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

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

3 个答案: