Điền vào danh sách thả xuống khi lựa chọn một danh sách thả xuống khác

Question

Tôi đang sử dụng MVC và tôi vẫn còn mới với MVC. Bất cứ ai có thể cho tôi biết nếu bạn có thể điền vào một danh sách thả xuống với dữ liệu về lựa chọn một danh sách thả xuống khác.

Tôi muốn sử dụng Jquery để tránh đăng lại và do đó làm cho trang mượt mà hơn.

Answer 1

mẫu:

namespace MvcApplicationrazor.Models 
{ 
    public class CountryModel 
    { 
     public List<State> StateModel { get; set; } 
     public SelectList FilteredCity { get; set; } 
    } 
    public class State 
    { 
     public int Id { get; set; } 
     public string StateName { get; set; } 
    } 
    public class City 
    { 
     public int Id { get; set; } 
     public int StateId { get; set; } 
     public string CityName { get; set; } 
    } 
} 

Bộ điều khiển:

public ActionResult Index() 
     { 
      CountryModel objcountrymodel = new CountryModel(); 
      objcountrymodel.StateModel = new List<State>(); 
      objcountrymodel.StateModel = GetAllState(); 
      return View(objcountrymodel); 
     } 


     //Action result for ajax call 
     [HttpPost] 
     public ActionResult GetCityByStaeId(int stateid) 
     { 
      List<City> objcity = new List<City>(); 
      objcity = GetAllCity().Where(m => m.StateId == stateid).ToList(); 
      SelectList obgcity = new SelectList(objcity, "Id", "CityName", 0); 
      return Json(obgcity); 
     } 
     // Collection for state 
     public List<State> GetAllState() 
     { 
      List<State> objstate = new List<State>(); 
      objstate.Add(new State { Id = 0, StateName = "Select State" }); 
      objstate.Add(new State { Id = 1, StateName = "State 1" }); 
      objstate.Add(new State { Id = 2, StateName = "State 2" }); 
      objstate.Add(new State { Id = 3, StateName = "State 3" }); 
      objstate.Add(new State { Id = 4, StateName = "State 4" }); 
      return objstate; 
     } 
     //collection for city 
     public List<City> GetAllCity() 
     { 
      List<City> objcity = new List<City>(); 
      objcity.Add(new City { Id = 1, StateId = 1, CityName = "City1-1" }); 
      objcity.Add(new City { Id = 2, StateId = 2, CityName = "City2-1" }); 
      objcity.Add(new City { Id = 3, StateId = 4, CityName = "City4-1" }); 
      objcity.Add(new City { Id = 4, StateId = 1, CityName = "City1-2" }); 
      objcity.Add(new City { Id = 5, StateId = 1, CityName = "City1-3" }); 
      objcity.Add(new City { Id = 6, StateId = 4, CityName = "City4-2" }); 
      return objcity; 
     } 

Xem:

@model MvcApplicationrazor.Models.CountryModel 
@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
<script language="javascript" type="text/javascript"> 
    function GetCity(_stateId) { 
     var procemessage = "<option value='0'> Please wait...</option>"; 
     $("#ddlcity").html(procemessage).show(); 
     var url = "/Test/GetCityByStaeId/"; 

     $.ajax({ 
      url: url, 
      data: { stateid: _stateId }, 
      cache: false, 
      type: "POST", 
      success: function (data) { 
       var markup = "<option value='0'>Select City</option>"; 
       for (var x = 0; x < data.length; x++) { 
        markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>"; 
       } 
       $("#ddlcity").html(markup).show(); 
      }, 
      error: function (reponse) { 
       alert("error : " + reponse); 
      } 
     }); 

    } 
</script> 
<h4> 
MVC Cascading Dropdown List Using Jquery</h4> 
@using (Html.BeginForm()) 
{ 
    @Html.DropDownListFor(m => m.StateModel, new SelectList(Model.StateModel, "Id", "StateName"), new { @id = "ddlstate", @style = "width:200px;", @onchange = "javascript:GetCity(this.value);" }) 
    <br /> 
    <br /> 
    <select id="ddlcity" name="ddlcity" style="width: 200px"> 

    </select> 

    <br /><br /> 
    }