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

Posted 2023-04-12

【中文标题】根据下拉列表的值创建 2 个下拉列表和一个表

【英文标题】：Create 2 dropdowns and a table based on the value of the dropdown

【发布时间】：2011-05-02 05:57:53

【问题描述】：

我有一个 MVC3 项目（使用 C#）并且正在使用 Razor 和 EntityFramework 4.1，我想完成以下任务：

创建一个显示省份的下拉菜单。选择一个省后，它会自动填充第二个下拉列表，显示该省下的城市。 显示城市的第二个下拉菜单（由第一个下拉菜单填充），一旦用户选择城市，它会自动填充一个表格，显示城市下的郊区。 包含郊区列表的表格（基于第二个下拉菜单）。

提前致谢！

我已经创建了我的模型，

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 视图 Cascading drop-downs in MVC 3 Razor view 的级联下拉菜单中引用了答案

如何根据 Suburb 下拉菜单的值刷新表格？

【问题讨论】：

那么到目前为止你有什么？当您尝试实现此功能时，您是否遇到过一些您想询问的具体问题？就目前而言，您似乎正在发布您的客户/老师/老板的要求，并期望有人为您完成该项目，这不太可能发生。

听起来像 GiveMeSomeCodesPlz，我投票结束。

【参考方案1】：

现在有点老了，但看看斯蒂芬沃尔特的这篇文章就是这样做的：

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

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

点击文章查看完整代码，但这里有一个显示一些重要 javascript 的 sn-p（我添加了一些 cmets）：

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

【参考方案2】：

在您看来，您需要定义两个下拉菜单，类似于：

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

在您的控制器中：

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;