MVC 5 DropDownList OnSelect Change

我在視圖中有兩個下拉菜單，分別叫State和City ..選擇State需要顯示相應的城市，但是無法爲City DropDown提取CityId和CityName。MVC 5 DropDownList OnSelect Change

控制器

public JsonResult cities(int state, Employee employee) 
{ 
    var cities = new SelectList(db.Cities.Where(c => c.StateId == state), "CityId", "CityName", employee.City); 
    return Json(cities,JsonRequestBehavior.AllowGet); 
}

jQuery的

<script> 
    $(document).ready(function() { 
     $("#City").prop("disabled", true); 
     $("#State").change(function() { 
      if ($("#State").val() != 1) { 
       var StateOptions = {}; 
       StateOptions.url = "/Employees/cities"; 
       StateOptions.type = "POST"; 
       StateOptions.data = JSON.stringify({ State: $("#State").val() }); 
       StateOptions.datatype = "json"; 
       StateOptions.contentType = "application/json"; 
       StateOptions.success = function (CitysList) { 
        $("#City").empty(); 
        for (var i = 0; i < CitysList.length; i++) { 

       // Unable to extract CityID and CityName in option here 

         $("#City").append("<option value=" + CitysList[i] + ">" + CitysList[i] + "</option>"); 
        } 
        $("#City").prop("disabled", false); 
       }; 
       StateOptions.error = function() { alert("Error in Getting Citys!!"); }; 
       $.ajax(StateOptions); 
      } 
      else { 
       $("#City").empty(); 
       $("#City").prop("disabled", true); 
      } 
     }); 
    }); 
</script>

這些國家和城市的下拉框在視圖.........

<div class="form-group"> 
      @Html.LabelFor(model => model.State, "State", htmlAttributes: new { @class = "control-label col-md-2"}) 
      <div class="col-md-10"> 
       @Html.DropDownList("State", null, htmlAttributes: new { @class = "form-control"}) 
       @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.City, "City", htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.DropDownList("City", new SelectList(Enumerable.Empty<SelectListItem>(), "CityId", "CityName"), "Select City", htmlAttributes: new { @class = "form-control" }) 
       @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" }) 
      </div> 
     </div>

來源

2016-10-05 Sandeep Kumar Singh

獲取對象的響應。但無法提取cityid和城市名稱。 –

'CitysList [i] .Value'和'CitysList [i] .Text'但是你不應該返回一個'SelectList'只返回一個只包含你需要的2個屬性的匿名對象的集合。 - 'var cities = db.Cities.Where（c => c.StateId == state）.Select（c => new {Value = c.CityId.ToString（），Text = c.CityName}）;' –

只需使用'.data = {State：$（「＃State」）.val（）};並移除'StateOptions.contentType =「application/json」;'並從你的方法中刪除'Employee employee'參數 –

var stId = $("#State").val(); StateOptions.data = { state: stId };

刪除員工員工，因爲您沒有發送此值。

remove this StateOptions.contentType =「application/json」;

改變你的方法是這樣

public JsonResult cities(int state) 
{ 
     var cities = (from city in db.Cities where city.StateId == state select new CityModel 
        { 
         CityId = city.CityId, CityName = city.CityName 
        }).ToList(); 
     return Json(cities,JsonRequestBehavior.AllowGet); 
}

你的Ajax調用成功這樣

success: function (CitysList) { 
     $.each(CitysList, function (i, val) 
     {  
       $('#City').append($("<option/>", ($({ value: val.CityId, text: val.CityName })))); 
     }); 
},

來源

2016-10-05 11:01:34

MVC 5 DropDownList OnSelect Change

回答

相關問題