Asp.net MVC4 中使用 Json 和 Jquery 的级联下拉列表未填充
Cascading Dropdown List in Asp.net MVC4 using Json and Jquery not Populate
两周以来，我正在尝试创建一个包含 3 个下拉列表的 ASP.NET MVC 4 应用程序。这些是 国家，州和城市 。我正在关注这篇文章
这些数据库列表详细信息我从 databas 调用
连接字符串 ：
<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>
但是下拉菜单没有显示数据库中的任何数据，如果您能告诉我正确的路径，非常感谢
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
我在项目中使用了第一个，但没有将信息保存在数据库中.. 为了保存国家，我这样做了：
@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);
}
我解决了问题
@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" })
杰森
@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>
}
相关文章：
- AngularJS或jquery中的依赖级联下拉框列表
- 如何级联jQuery Mobile组合框
- 避免在jQuery中出现巨大的级联
- Asp.net MVC4 中使用 Json 和 Jquery 的级联下拉列表未填充
- 从服务器加载带有级联下拉列表的 jQuery 对话框
- 使用jQuery的Laravel 4依赖/级联下拉列表
- 如何使用JQuery填充级联下拉列表
- 简单的jquery级联选择
- 使用li和DL与jQuery的级联下拉列表
- Google应用程序引擎Python、Jquery和Javascript进行级联选择
- 如何使用jquery制作多级级联下拉列表
- 对双向级联复选框使用jQuery
- 使用对象数组填充，并使用jQuery过滤级联下拉列表
- jQuery是级联的吗?如果没有，为什么不;我的代码不起作用
- 包装jQuery.ajax:级联内部jqXHR作为一个新的延迟对象返回
- 在JQuery中创建级联元素
- Jquery -基于类过滤级联列表(独立列表和嵌套列表)
- JQuery插件，JavaScript语法，级联下拉MVC4后续，多级级联
- JQuery链接/级联下拉列表事件
- JQuery级联函数不会在更改事件后立即触发
