MVC 根据另一个选择动态加载下拉列表答案

【问题标题】：MVC dynamically load a dropdown based on a selection from anotherMVC 根据另一个选择动态加载下拉列表
【发布时间】：2016-07-14 23:48:35
【问题描述】：

我正在使用 MVC，我希望有两个下拉列表，其中一个值依赖于另一个值。另外根据两个下拉菜单上的组合保存了相应的 ID。

我有一个由

组成的代码表

我希望下拉列表之一是制造商列表，然后根据选择我希望下拉列表二是任何具有该制造商的模型。然后，当我保存使用这些下拉列表的记录时，我想记录分配给该组合的 ManufacturerModelID。这可能吗？

【问题讨论】：

这通常被称为“级联下拉”，网上有很多例子。基本上，您将响应第一个下拉列表的更改事件以填充第二个下拉列表的值。这些值可以存在于 JavaScript 中的客户端，可以通过 AJAX 获取，也许有基于 AJAX 的开箱即用控件可以提供帮助，等等。

标签： asp.net-mvc drop-down-menu

【解决方案1】：

如果我理解得很好，您想将 MVC 模型应用到您的应用程序中。

如果是，则不存在“如果”的问题，您可以实施任何事情。您只需要将模型与视图和控制器分开即可。

在您的情况下，我会选择“面向对象”的 javascript。分离对象中的模型有助于理解 MVC 本身。在“MANUFACTUREAPP”之类的命名空间下对所有内容进行编程也会有所帮助。

1)对于模型
a) 您需要一个对象“制造商”，其中包含 this.id、this.description、this.models = [] 等字段。然后你需要 setter、getter 和你的魔法函数来推送到 this.models 它拥有的模型。所以最后只有一个像 getManufacturer() 这样的函数，它会给你一个对象，里面装满了这个制造商所拥有的一切。
b) 你需要一个带有 this.model、this.modelDescription、this.manufacturerID = []、setter、getter、init 和所有时髦函数的“ManufacturerModel”。

2) 对于视图 a）您需要具有以下功能的“视图”对象：

 onManufacturerClick =  function(){
    manufacturersModels = MANUFACTUREAPP.manufacturers.getMeWhatIwant(howIwantIt);
}

所以现在您可以为您的应用支持 MVC 架构而感到自豪。
3) 对于控制器，只需遵循相同的概念即可。

在你的 main 你想在你的 init 函数中创建你的对象，比如：

init = function(){
  MANUFACTUREAPP.manufacturers = new MANUFACTUREAPP.init();
}

两个友好的建议。从理论上研究 MVC，因为如果你没有 100% 理解它，它可能会变得很棘手。我最好的建议是……如果您想节省时间和精力，请先拿起笔画出您的模型！

编辑
刚刚注意到 asp.net 标签。无论如何，我要把它留在这里。我不熟悉asp.net，但我想理论应该是一样的..

【讨论】：

【解决方案2】：

您可以使用 jQuery 和 ajax 来实现。

假设您的 razor 视图呈现这样的标记。

<select name="Manufacturer" id="Manufacturer">
   <option value="1">Aaaaa</option>
   <option value="2">Bbbbb</option>
   <option value="3">Ccccc</option>
</select>
<select name="Model" id="Model">   
</select>

现在在您的页面中添加此 javascript，它会侦听第一个选择元素的更改事件并获取所选选项的值并使用 ajax 将其发送到您的服务器。让您的服务器操作方法返回属于制造商 id 的模型。

$(function(){

   var urlForModesl = "/Manufacturer/Models";
   $("#Manufacturer").change(function(){
       var manufacturerId= $(this).val();
       $.getJSON(urlForModesl,function(data){
           var modelsHtml="";
           $.each(data,function(a,b){
              modelsHtml+="<option value='"+b.Id+"'>"+b.Name+"</option>";
           });          
           $("#Model").html(modelsHtml);
       });
   });


});

假设您的 Models 操作方法以 JSON 格式返回具有 Id 和 Name 属性的对象列表。

public ActionResult Models(int id)
{
   var list= db.ModelManufactors.Where(s=>s.ManufacturerId==id)
             .AsEnumerable()
             .Select(s=> new { Id=s.ManufacturerModelId, Name=s.Name}).ToList();
   return Json(list,JsonRequestBehaviour.AllowGet);
}

【讨论】：