两周后，我试图创建一个包含3个下拉列表的ASP.NET MVC 4应用程序。 这些是国家，州和城市。 我关注this article
我从数据库中调用的这些数据库列表详细信息
连接字符串：
<connectionStrings>
<add name="CACD_Con" connectionString="metadata=res://*/Models.Project_Name.csdl|res://*/Models.Project_Name.ssdl|res://*/Models.Project_Name.msl;provider=System.Data.SqlClient;provider connection string="data source=192.168.0.000;initial catalog=CACD;persist security info=True;user id=000;password=000000000;MultipleActiveResultSets=True;App=EntityFramework"" providerName="System.Data.EntityClient" />
</connectionStrings>
控制器类：
public class CacadingController : Controller
{
private ProjectContext db = new ProjectContext();
public ActionResult Index()
{
ViewBag.CountryId = new SelectList(db.Countrys, "CountryId", "CountryName");
return View();
}
public JsonResult StateList(int Id)
{
var state = from s in db.States
where s.CountryId == Id
select s;
return Json(new SelectList(state.ToArray(), "StateId", "StateName"), JsonRequestBehavior.AllowGet);
}
public JsonResult Citylist(int id)
{
var city = from c in db.Citys
where c.StateId == id
select c;
return Json(new SelectList(city.ToArray(), "CityId", "CityName"), JsonRequestBehavior.AllowGet);
}
public IList<State> Getstate(int CountryId)
{
return db.States.Where(m => m.CountryId == CountryId).ToList();
}
[AcceptVerbs(HttpVerbs.Get)]
public JsonResult LoadClassesByCountryId(string CountryName)
{
var stateList = this.Getstate(Convert.ToInt32(CountryName));
var stateData = stateList.Select(m => new SelectListItem()
{
Text = m.StateName,
Value = m.CountryId.ToString(),
});
return Json(stateData, JsonRequestBehavior.AllowGet);
}
}
模特课程：
public partial class ProjectContext : DbContext
{
public ProjectContext()
: base("CACD")
{
}
public DbSet<Country> Countrys { get; set; }
public DbSet<State> States { get; set; }
public DbSet<City> Citys { get; set; }
}
public class Country
{
[Key]
public int CountryId { get; set; }
public string CountryName { get; set; }
public virtual ICollection<State> States { get; set; }
}
public class State
{
[Key]
public int StateId { get; set; }
public string StateName { get; set; }
[ForeignKey("Country")]
public int CountryId { get; set; }
public virtual Country Country { get; set; }
public virtual ICollection<City> Citys { get; set; }
}
public class City
{
[Key]
public int CityId { get; set; }
public string CityName { get; set; }
[ForeignKey("State")]
public int StateId { get; set; }
public virtual State State { get; set; }
}
查看文件（cshtml）
@model Project_Name.Models.ProjectContext
@using (Html.BeginForm())
{
@Html.DropDownList("Country", ViewBag.CountryId as SelectList, "Select a Country", new { id="Country" })<br />
<select id="State" name="state"></select><br />
<select id="city" name="City"></select><br />
}
@Scripts.Render("~/bundles/jquery")
<script type="text/jscript">
$(function () {
$('#Country').change(function () {
$.getJSON('/Cascading/StateList/' + $('#Country').val(), function (data) {
var items = '<option>Select a State</option>';
$.each(data, function (i, state) {
items += "<option value='" + state.Value + "'>" + state.Text + "</option>";
});
$('#State').html(items);
});
});
$('#State').change(function () {
$.getJSON('/Cascading/Citylist/' + $('#State').val(), function (data) {
var items = '<option>Select a City</option>';
$.each(data, function (i, city) {
items += "<option value='" + city.Value + "'>" + city.Text + "</option>";
});
$('#city').html(items);
});
});
});
</script>
但是下拉菜单没有显示数据库中的任何数据，如果你能告诉我正确的路径，真的很感激
答案 0 :(得分：1)
where cityList is list containing city model
var result = from item in cityList
select new
{
value = item.CityId,
text = item.Name
};
return Json(result, JsonRequestBehavior.AllowGet);
and in script add
$('#State').change(function () {
$.getJSON('/Cascading/Citylist/' + $('#State').val(), function (data) {
var items = [];
items.push("<option>Select City</option>");
$.each(data, function () {
items.push("<option value=" + this.value + ">" + this.text + "</option>");
});
$(city).html(items.join(' '));
});
});
do same for state
答案 1 :(得分：1)
我在我的项目中使用了第一个，但没有在数据库中保存信息..以保存我在视图上所做的国家：
@Html.DropDownListFor(model => model.CountryId, ViewBag.CountryId as SelectList, "Select a Country", new { id = "Country", @class = "form-control" })<br />
但是下一个没有保存，但如果我像上面那样更改脚本不起作用 任何帮助...
**<select id="StateId" name="state" class="form-control"></select><br />
<select id="CityId" name="City" class="form-control"></select><br />**
剧本 **
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/jscript">
$(function () {
$('#Country').change(function () {
$.getJSON('/AddressBooks/StateList/' + $('#Country').val(), function (data) {
var items = '<option>Select a State</option>';
$.each(data, function (i, state) {
items += "<option value='" + state.Value + "'>" + state.Text + "</option>";
});
$('#StateId').html(items);
$('#CityId').html(null);
});
});
$('#StateId').change(function () {
$.getJSON('/AddressBooks/Citylist/' + $('#StateId').val(), function (data) {
var items = '<option>Select a City</option>';
$.each(data, function (i, city) {
items += "<option value='" + city.Value + "'>" + city.Text + "</option>";
});
$('#CityId').html(items);
});
});
});
</script>
**
在控制器上
public ActionResult Create()
{
ViewBag.CustomerId = new SelectList(db.Customers, "Id", "FullName");
ViewBag.CountryId= new SelectList(db.Countries, "CountryId", "CountryName");
return View();
}
public JsonResult StateList(int Id)
{
var state = from s in db.States
where s.CountryId == Id
select s;
return Json(new SelectList(state.ToArray(), "StateId", "StateName"), JsonRequestBehavior.AllowGet);
}
public JsonResult Citylist(int id)
{
var city = from c in db.Cities
where c.StateId == id
select c;
return Json(new SelectList(city.ToArray(), "CityId", "CityName"), JsonRequestBehavior.AllowGet);
}
public IList<State> Getstate(int CountryId)
{
return db.States.Where(m => m.CountryId == CountryId).ToList();
}
[AcceptVerbs(HttpVerbs.Get)]
public JsonResult LoadClassesByCountryId(string CountryName)
{
var stateList = this.Getstate(Convert.ToInt32(CountryName));
var stateData = stateList.Select(m => new SelectListItem()
{
Text = m.StateName,
Value = m.CountryId.ToString(),
});
return Json(stateData, JsonRequestBehavior.AllowGet);
}
答案 2 :(得分：0)
我解决了问题
@Html.DropDownList("CountryId", null, htmlAttributes: new { id = "Country", @class = "form-control" })
@Html.DropDownListFor(model => model.StateId, new SelectList(Enumerable.Empty<selectlistitem>(), "StateId", "StateName"), "Select State", new { id = "StateId", @class = "form-control" })
@Html.DropDownListFor(model => model.CityId, new SelectList(Enumerable.Empty<selectlistitem>(), "CityId", "CityName"),"Select city",new { id = "CityId", @class = "form-control" })
的Json
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/jscript">
$(function () {
$('#Country').change(function () {
$('#StateId').html(null)
$('#CityId').html(null);
$.getJSON('/AddressBooks/StateList/' + $('#Country').val(), function (data) {
$.each(data, function (i, state) {
$("#StateId").append(
"<option value="" + state.Value + "">" + state.Text + "</option>")
});
});
});
$('#StateId').change(function () {
$('#CityId').html(null);
$.getJSON('/AddressBooks/Citylist/' + $('#StateId').val(), function (data) {
$.each(data, function (i, city) {
$("#CityId").append(
"<option value="" + city.Value + "">" + city.Text + "</option>");
});
});
});
});
</script>
}