根据下拉列表的值创建2个下拉列表和一个表

本文关键字：下拉列表 一个 2个 创建 | 更新日期: 2023-09-27 17:54:42

我有一个MVC3项目(使用c#)，我使用Razor和EntityFramework 4.1，我想完成以下任务:

  1. 创建显示省份的下拉列表。一旦你选择了一个省份，它会自动在第二个下拉菜单中显示该省份下的城市。
  2. 第二个下拉菜单，显示城市(由第一个下拉菜单填充)，一旦用户选择了城市，它将自动填充一个表，显示城市下面的郊区。
  3. 包含郊区列表的表格(基于第二个下拉列表)。

提前感谢!

我已经创建了我的模型，

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

处理下拉菜单的ViewModel 

public class MyViewModel
{
public string SelectedProvinceID {get; set;}
public string SelectedCityID {get; set;}
public IEnumerable<Province> Province {get; set;}
}

一个控制器

public class Suburbs : Controller
{
MyEntities suburbsDB = new MyEntities();
public ActionResult Create()
{ 
//For Province dropdown
ViewBag.Province = suburbsDB.Province.OrderBy(prov => prov.Province).ToList();
var suburbDetails =  new Suburb();
return View(suburbDetails);
}

我对EntityFramework, Json和Razor很陌生，我对如何创建视图有一个问题。我在MVC3 Razor视图的级联下拉列表中引用了答案

如何根据郊区下拉列表的值刷新表?

根据下拉列表的值创建2个下拉列表和一个表

现在它有点老了，但是看看Stephen Walther的这篇文章就是这么做的:

http://stephenwalther.com/blog/archive/2008/09/07/asp-net-mvc-tip-41-creating-cascading-dropdown-lists-with-ajax.aspx

他创建了两个下拉框，并使用jQuery/Ajax来获取一个列表，以便在第一个下拉框中选择值时填充第二个下拉框(您可以轻松地将其扩展为第三个下拉框):

点击全文查看完整的代码，但这里有一个片段显示了一些重要的javascript(我添加了一些注释):

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" })
在Javascript中，您的populate方法看起来像这样: 
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;
}
相关文章：