C# 根据下拉列表的值创建两个下拉列表和一个表
我有一个MVC3项目(使用C#),正在使用Razor和EntityFramework 4.1,我想完成以下工作:C# 根据下拉列表的值创建两个下拉列表和一个表,c#,asp.net-mvc,asp.net-mvc-3,razor,entity-framework-4.1,C#,Asp.net Mvc,Asp.net Mvc 3,Razor,Entity Framework 4.1,我有一个MVC3项目(使用C#),正在使用Razor和EntityFramework 4.1,我想完成以下工作: 创建一个显示省份的下拉列表。选择一个省后,它会自动填充第二个下拉列表,显示该省下的城市 显示城市的第二个下拉列表(由第一个下拉列表填充),一旦用户选择城市,它将自动填充显示城市下郊区的表格 包含郊区列表的表(基于第二个下拉列表) 提前谢谢 我已经创建了我的模型 public class Provinces { [Key] public int ProvinceID {get; set
public class Provinces
{
[Key]
public int ProvinceID {get; set;}
public string Province {get; set;}
public virtual ICollection<City> City {get;set;}
}
public class City
{
[Key]
public int CityID {get; set;}
public string City {get; set;}
public virtual ICollection<Suburb> Suburb {get; set;}
public virtual Province Province {get; set;}
}
public class Suburb
{
[Key]
public int SuburbID {get; set;}
public string Suburb {get; set;}
public virtual City City {get; set;}
}
我对EntityFramework、Json和Razor还很陌生,我对如何创建视图有一个问题。我在MVC3 Razor视图的级联下拉列表中引用了答案
如何根据“郊区”下拉列表的值刷新表 现在有点旧了,但请查看Stephen Walther的这篇文章,它正是这样做的: 他创建了两个下拉列表,并使用jQuery/Ajax获取一个列表,在第一个下拉列表中选择一个值时填充第二个下拉列表(您可以很容易地将其扩展为第三个下拉列表): 点击全文获取完整代码,但这里有一个片段显示了一些重要的javascript(我添加了一些注释):
函数pageLoad(){
ddlMakes=$get(“Makes”);
ddlModels=$get(“模型”);
//将“bindOptions”函数绑定到ddlMakes下拉列表的更改事件
$addHandler(ddlMakes,“change”,bindpoptions);
//立即调用该函数,因此如果在第一个下拉列表中已经选择了某些内容,则将填充下一个下拉列表
绑定选项();
}
函数bindpoptions(){
//清除第二个下拉列表中的现有选项
ddlModels.options.length=0;
//如果在第一个下拉列表中选择了某些内容
var makeId=ddlMakes.value;
if(makeId){
//向相应的url发送ajax请求
var url=“/Action/Models/”+makeId;
getContent(url、bindOptionResults);
}
}
函数bindOptionResults(数据){
var新期权;
//循环浏览响应中的选项
对于(var k=0;k
在您的视图中,您需要定义两个下拉列表,如下所示:
@Html.DropDownListFor(model => model.Provinces.ProvinceID, Model.Province, new { id = "ddlProvinces", onChange = "$:populateCitiesDropdown()" })
@Html.DropDownListFor(model => model.City.CityID, Model.City, new { id = "ddlCities" })
在Javascript中,您的填充方法如下所示:
function populateIssuesDropdown() {
$("#ddlCities").empty();
var typeID = getProvinceID();
$.getJSON('@Url.Action("GetCitiesByProvince", "some_controller")?TypeID=' + typeID, function (result) {
$.each(result, function () {
$("<option>").attr("value", this.CityID).text(this.City).appendTo("#ddlCities");
});
});
}
function getProvinceID() {
var provinceID = $("#ddlProvinces").val();
return provinceID;
}
到目前为止你有什么发现?当您尝试实现此功能时,是否遇到了一些您想询问的具体问题?就目前而言,你似乎在发布你的客户/老师/老板要求,并期待有人为你做这个项目,这是不太可能发生的。听起来像是GiveMeSomeCodesPlz,我投票决定结束。
function pageLoad() {
ddlMakes = $get("Makes");
ddlModels = $get("Models");
// Bind the "bindOptions" function to the change event of the ddlMakes dropdown
$addHandler(ddlMakes, "change", bindOptions);
// Call the function immediately, so the next dropdown will be populated if there is already something selected in the first
bindOptions();
}
function bindOptions() {
// Clear out existing options in the second dropdown
ddlModels.options.length = 0;
// If something is selected in the first dropdown
var makeId = ddlMakes.value;
if (makeId) {
// Send an ajax request to the corresponding url
var url = "/Action/Models/" + makeId;
getContent(url, bindOptionResults);
}
}
function bindOptionResults(data) {
var newOption;
// Loop through the options in the response
for (var k = 0; k < data.length; k++) {
// Add a new option to the second dropdown for this item
newOption = new Option(data[k].Name, data[k].Id);
ddlModels.options.add(newOption);
}
}
@Html.DropDownListFor(model => model.Provinces.ProvinceID, Model.Province, new { id = "ddlProvinces", onChange = "$:populateCitiesDropdown()" })
@Html.DropDownListFor(model => model.City.CityID, Model.City, new { id = "ddlCities" })
function populateIssuesDropdown() {
$("#ddlCities").empty();
var typeID = getProvinceID();
$.getJSON('@Url.Action("GetCitiesByProvince", "some_controller")?TypeID=' + typeID, function (result) {
$.each(result, function () {
$("<option>").attr("value", this.CityID).text(this.City).appendTo("#ddlCities");
});
});
}
function getProvinceID() {
var provinceID = $("#ddlProvinces").val();
return provinceID;
}
public JsonResult GetCitiesByProvince(int ProvinceID)
{
var result = _someRepository.GetCities(ProvinceID).Select(
c => new { CityID = c.CityID, City = c.City });
JsonResult jsonResult = new JsonResult { Data = result, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
return jsonResult;
}