Dolgu listesinde

Question

MVC kullanıyorum ve hala MVC ile yeni duyuyorum aşağı başka damlasının seçimine açılır liste. Başka bir açılır listenin seçilmesiyle ilgili verileri içeren bir açılır listeyi doldurabileceğinizi herkes söyleyebilir.

Ben sayfası yapma yumuşak göndermeleri ve bu nedenle önlemek için jQuery kullanmak istiyorum.

Answer 1

Modeli:

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

Kontrol:

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

Görünüm:

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