0

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);
}

私の質問は、IList の代わりに SelectList を返して適切にバインドできますか?

私のコードで例を教えてください。一部のみを投稿したシンプルさのためだけに、より複雑な動作をしています。

ありがとう

4

3 に答える 3

2

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

于 2013-06-01T13:49:50.943 に答える
0

都市のリストを取得した後のコントローラーで、以下のように選択リスト項目に変換します

var list=new List<SelectListItem>(); 
list.AddRange(cities.Select(o => new SelectListItem
            {
                Text = o.Name,
                Value = o.CityId.ToString()
            }));
        }
return Json(list);
于 2013-06-03T12:46:02.017 に答える
0

簡単な 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地域を含む選択が呼び出され、都市を含む選択の ID が であると仮定しますLocation_CityId。

これが上記のように機能するには、ビュー ファイルの最後にある必要があるため、@Url.Actionは適切な URL にレンダリングされます。それ以外の場合は、.js ファイルにハード コードして、document.ready で囲むことができます。

于 2013-06-01T15:38:25.830 に答える