Question

我有三个下拉列表。城市下拉列表的第一个操作方法是---

            public ActionResult Create()
            {
        List<SelectListItem> li = new List<SelectListItem>();
        li.Add(new SelectListItem { Text = "Select your City", Value = "----" });
        li.Add(new SelectListItem { Text = "Faridabaad", Value = "Faridabaad" });
        li.Add(new SelectListItem { Text = "Greater Noida", Value = "Greater Noida" });
        li.Add(new SelectListItem { Text = "Gurgaon", Value = "Gurgaon" });
        li.Add(new SelectListItem { Text = "Noida", Value = "Noida" });
        li.Add(new SelectListItem { Text = "New Delhi", Value = "New Delhi" });
        ViewData["City"] = li;
        return View();
    }

然后我的地方下拉列表的操作方法随着我们更改城市名称而改变------

        public JsonResult LoadLocalities(string id)
    {
        List<SelectListItem> localities = new List<SelectListItem>();
        switch(id)
        {
      case"New Delhi":
         localities.Add(new SelectListItem { Text = "Select your locality", Value = "0" });
                localities.Add(new SelectListItem{ Text ="East Delhi", Value = "1" });
                    localities.Add(new SelectListItem{ Text ="West Delhi", Value = "2" });
                        localities.Add(new SelectListItem{ Text ="North Delhi", Value = "3" });
                        localities.Add(new SelectListItem { Text = "South Delhi", Value = "4" });
                        break;           
        }
        return Json(new SelectList(localities, "Value", "Text"));
    }

并且最后一个子地点下拉列表的操作方法随地点名称的变化而变化，如下所示---

      public JsonResult LoadSubLocalities(string id)
       {
        List<SelectListItem> sublocalities = new List<SelectListItem>();
        switch (id)
        {
            case"1":
                sublocalities.Add(new SelectListItem { Text = "Select your sublocality", Value = "0" });
                sublocalities.Add(new SelectListItem { Text = "Region1", Value = "1" });
                sublocalities.Add(new SelectListItem { Text = "Region2", Value = "2" });
                break;
        }
        return Json(new SelectList(sublocalities, "Value", "Text"));
    }

现在视图页面就是这样------

        <!DOCTYPE html>
        <head>
        <title></title>
<script src="~/Scripts/jquery-2.1.4.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>   
 </head>
 <body>
 <div id="map_canvas" style="width: 800px; height: 700px; float:left"></div>
  @using (Html.BeginForm())
  {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Enter the Project Details</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.City)
        </div>
        <div class="editor-field">
            @if (ViewData.ContainsKey("City")){
            @Html.DropDownListFor(model => model.City, ViewData["City"] as List<SelectListItem>, new { style = "width:250px", @class = "DropDown1"})
                    @Html.ValidationMessageFor(model => model.City)
            }
    </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Locality)
        </div>
        <div class="editor-field">
            @Html.DropDownList("Locality", new SelectList(string.Empty,"Value","Text"),"Please Select a locality", new { style = "width:250px", @class = "DropDown1" })
            @Html.ValidationMessageFor(model => model.Locality)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.SubLocality)
        </div>
        <div class="editor-field">
            @Html.DropDownList("SubLocality", new SelectList(string.Empty, "Value", "Text"), "Please Select a sub locality", new { style = "width:250px", @class = "DropDown1" })
            @Html.ValidationMessageFor(model => model.SubLocality)
        </div>
          <p>
            <input type="submit" value="Save Project" />
           </p>
           </fieldset>

现在我的javaScript代码是这样的，我编写代码从控制器获取城市，然后在城市名称更改时更改位置，并通过更改位置名称来更改子位置名称-----

        <script type="text/javascript">        
        $(document).ready(function () {
        $("#City").change(function () {
            $("#Locality").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("LoadLocalities","Project")',
                dataType: 'json',
                data: { id: $("#City").val() },
                success: function (localities) {
                    $.each(localities, function (i, locality) {
                        $("#Locality").append('<option value="' + locality.Value + '">' +
                             locality.Text + '</option>');
                    });
                },
                error: function (ex) {
                    alert('Failed to retreive Locality.' + ex);
                }
            });
            return false;
        })
                $("#Locality").change(function () {
                $("#SubLocality").empty();
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("LoadSubLocalities")',
                    dataType: 'Json',
                    data: { id: $("Locality").val() },
                    success: function (sublocalities) {
                        $.each(sublocalities, function (i, sublocality) {
                            $("#SubLocality").append('<option value="' + sublocality.Value + '">' +
                                 sublocality.Text + '</option>');
                        });
                    },
                    error: function (ex) {
                        alert('Failed to retrieve SubLocality.' + ex);
                    }
                });
                return false;
            })
            });
         </script>
       }

现在，我的问题是我的Locality工作正常，城市名称有变化，但SubLocality下拉不适用于地区名称的变化---

Answer 1

$("#Locality").change(function () {无效的原因是因为以下行

data: { id: $("Locality").val() },

返回undefined。它必须是

data: { id: $("#Locality").val() }, // add hash

然而，正确的方法是使用

data: { id: $(this).val() },

为了避免再次遍历DOM以获取具有id="Locality"

的元素

您的代码还存在许多其他问题，尤其是在验证方面，如果ModelState无效，则返回视图

生成List<SelectListItem>时，请勿添加标签选项（即sublocalities.Add(new SelectListItem { Text = "Select your sublocality", Value = "0" });）。您正在给出标签选项a 值意味着它始终有效。就目前而言，你可以同时删除与之关联的@Html.ValidationMessageFor() 每个下拉列表。
永远不要给SelectList与您的财产相同的名称绑定到（在您的情况下为City）
使用LoadLocalities()和LoadSubLocalities()方法首先创建List<SelectListItem>，然后创建一个新的 SelectList（IEnumerable<SelectListItem>）所以它就是正义不必要的额外开销在任何情况下，客户都不知道什么是C＃类，你只返回两倍的数据必要时跨越电线（Selected，Disabled和您从未使用的Group属性。而只是传回来包含2个属性的匿名对象的集合（用于选项价值和文字）

层叠下拉列表（SubLocality）在asp.net mvc

1 个答案: