层叠下拉列表（SubLocality）在asp.net mvc的工作不

我有三个下拉List.The首先处理法市下拉是---层叠下拉列表（SubLocality）在asp.net mvc的工作不

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

和最后的副局部性操作方法下拉其一起cha变化NGE在当地的名字是这样的---

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

现在，我的问题是，我的地点工作正常，在城市名称的改变，但SubLocality下拉不与地方名称变更工作---

来源

2015-07-20 neo

你$("#Locality").change(function() {不工作的原因是因为以下行

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

return 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" });）。您正在给标签选项一个值，这意味着它始终有效。因为它目前是，您可能会以及删除与每个下拉相关的@Html.ValidationMessageFor()。
永不放弃的SelectList相同的名称属性的结合（在你的情况City）
在你LoadLocalities()和LoadSubLocalities()方法，您首先创建List<SelectListItem>，然后创建一个新的 SelectList（这是IEnumerable<SelectListItem>），所以它只是不必要的额外开销。在任何情况下，客户端都不知道什么是C＃类，并且您只需要根据需要（,Disabled和 ,Group属性从未使用过）返回两倍的数据量。相反，只是传递回集合包含2个属性（对于选项的值和文本）

来源

2015-07-21 02:17:43

谢谢你的代码的一些有价值的建议固定..... – neo

@AshishSrivastava非常@StephenMuecke匿名对象，我更新了小提琴以包含一个典型的POST方法，并修改了'private void ConfigureViewModel（ViewModel模型）'以显示如果'ModelState'无效返回视图 –

yupp我也看到了这一点。非常感谢您的努力先生引导我开箱即用......希望能在不久的将来得到您的指导...... thnxxx再次举足轻重 – neo

层叠下拉列表（SubLocality）在asp.net mvc的工作不

回答

相关问题