MVC 채우기 드롭 다운 목록 없음 다시 게시

Question

게시하지 않고 단추를 눌러 드롭 다운 목록을 채우는 방법입니다.

예 : dropdownlist1는 ->를

버튼을 눌러

및 dropdownlist1 값에 관한 다른 데이터로 채워 dropdownlist2. 제 DropDownList로 선택된 항목에 따라 상기 제 드롭 다운리스트 값을 생성

Answer 1

가장 일반적인 시나리오

덕택 바꿨다. 나는 당신이 동일한 시나리오를 찾고 있다고 가정하고 그 아래 코드는 그것을 성취하기위한 것이다. 두 번째 드롭 다운을 생성하려면 버튼 클릭이 정말로 필요한지 알려주십시오.

모델 :

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

컨트롤러 :

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

보기 :

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