如何在MVC4中填充下拉列表 [英] How do I populate dropdown in MVC4

问题描述

大家好，



我想在我的MVC项目中填写两个下拉菜单。

第一个用于国家，第二个用于对应于第一个下拉列表中选择的国家/地区的州。但它没有加载。我无法找到bug的位置...

模型中

<前lang =cs> public class CandidateContactUs {
public CandidateContactUs（）
{statesList = new SelectList（ new List< SelectListItem>（）， stateID， state）;}
public SelectList statesList { get ; set ; }
private int _countryID;
[显示（名称= 国家）]
public int countryID { get { return _countryID; } set {_countryID = value ; }
public SelectList国家/地区{获取 { return LoadCountries（）;}}
private int _stateID;
[显示（名称= 状态）]
public int stateID { get { return _stateID; } set {_stateID = value ; }
// private IList< SelectListItem> _states;
public IList< SelectListItem> state { get ; set ; }
private SelectList LoadCountries（）
{TestMVC.Models.SMTestEntities objSMWebDefaultConnection = new TestMVC.Models.SMTestEntities（）;
var countryList = objSMWebDefaultConnection.tblCountries.Where（c = > c.recordActive == true ）。选择（c = > new {c.countryID，c.country}）。ToList（）;
return new SelectList（countryList， countryID， country）;}

在控制器中

  public  ActionResult ContactUs（）
 {CandidateContactUs contactUs = new CandidateContactUs（）; 
  return  查看（contactUs）;} 
 TestMVC.Models.SMTestEntities objSMWebDefaultConnection = new TestMVC.Models.SMTestEntities（）; 
 [AcceptVerbs（HttpVerbs.Get）] 
  public  ActionResult LoadStatesList（ int  countryID ）
 {var statesList = objSMWebDefaultConnection.tblStates。其中（s => s.recordActive == true&& s.countryID == countryID） 。选择（s => new {s.stateID，s.state}）。ToList（）; 
  return  Json（statesList，JsonRequestBehavior.AllowGet）; 

在视图中

@ Html.DropDownListFor（model => model.countryID，Model.countries，new {@id = drpCountry}）

@ Html.ValidationMessageFor（model => model.countryID）

< label for =stateID>

州< / label>

@ Html.DropDownListFor（model => model.stateID，Model.statesList，new {@id =drpState }）

 <   script     type   = <跨度class =code-keyword> text / javascript >  
 $（function（）{
 $（＃ drpCountry）。change（function（）{
 var countryID = $（＃drpCountry）。val（）; 
 $ .ajax（{
 cache：false，
 type：GET，
 url：'@（Url.RouteUrl（LoadStatesList））'，
 data：{countryID：countryID}，
 success：function（stateArray）{
 if（stateArray.d！= null）{
 if（stateArray.d.length！= 0 ）{
 $ .each（stateArray，function（id，option）{（＃drpState）。append（$（'<  选项 >  <   / option  > '）。val（option.stateID）.html（option.state））;}）; 
} 
} 
}，
错误：function（） {
 alert（无法加载状态。请再试一次。）; 
} 
}）; 
}）; 
}）; 
 <   / script  >  

任何人请帮助我..

解决方案

（function（）{

（ #drpCountry）。change（function（）{
var countryID =

（＃drpCountry）。val（）;

Hi All,

I want to populate two dropdowns in my MVC project.
First one is for countries and second one for states corresponding to the country selected in the first dropdown. But it is not loading. I couldn't find where the bug is...
In Model

public class CandidateContactUs{
public CandidateContactUs()
        {statesList = new SelectList(new List<SelectListItem>(), "stateID", "state");}
        public SelectList statesList { get; set; }
        private int _countryID;
        [Display(Name = "Country")]
        public int countryID { get { return _countryID; } set { _countryID = value; } }
        public SelectList countries { get { return LoadCountries();}  }
        private int _stateID;
        [Display(Name = "State")]
        public int stateID { get { return _stateID; } set { _stateID = value; } }
        //private IList<SelectListItem> _states;
        public IList<SelectListItem> states { get; set; }
private SelectList LoadCountries()
        {TestMVC.Models.SMTestEntities objSMWebDefaultConnection = new TestMVC.Models.SMTestEntities();
            var countryList = objSMWebDefaultConnection.tblCountries.Where(c => c.recordActive == true).Select(c => new { c.countryID, c.country }).ToList();
            return new SelectList(countryList, "countryID", "country");}

In Controller

public ActionResult ContactUs()
{ CandidateContactUs contactUs = new CandidateContactUs();
    return View(contactUs);}
 TestMVC.Models.SMTestEntities objSMWebDefaultConnection = new TestMVC.Models.SMTestEntities();
        [AcceptVerbs(HttpVerbs.Get)]
        public ActionResult LoadStatesList(int countryID)
        {            var statesList = objSMWebDefaultConnection.tblStates.Where(s => s.recordActive == true && s.countryID == countryID).Select(s => new { s.stateID, s.state }).ToList();
            return Json(statesList, JsonRequestBehavior.AllowGet);

In View

@Html.DropDownListFor(model => model.countryID, Model.countries, new { @id = "drpCountry" })
@Html.ValidationMessageFor(model => model.countryID)

<label for="stateID">
State</label>

@Html.DropDownListFor(model => model.stateID, Model.statesList, new { @id = "drpState" })

<script type="text/javascript">
            $(function () {
                $("#drpCountry").change(function () {
                    var countryID = $("#drpCountry").val();
                    $.ajax({
                        cache: false,
                        type: "GET",
                        url: '@(Url.RouteUrl("LoadStatesList"))',
                        data: { "countryID": countryID },
                        success: function (stateArray) {
                            if (stateArray.d != null) {
                                if (stateArray.d.length != 0) {
                                    $.each(stateArray, function (id, option) {("#drpState").append($('<option></option>').val(option.stateID).html(option.state));  });
                                }
                            }
                        },
                        error: function () {
                            alert("Failed to load states. Please try again.");
                        }
                    });
                });
            });
        </script>

Any one Please help me..

解决方案

(function () {

("#drpCountry").change(function () { var countryID =

("#drpCountry").val();

这篇关于如何在MVC4中填充下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！