如何在mvc 3中使用jquery来填充级联下拉列表？

如何加载级联下拉列表对方asp.net mvc3？ 我能怎么做？ 我一直在使用http://geekswithblogs.net/ranganh/archive/2011/06/14/cascading-dropdownlist-in-asp.net-mvc-3-using-jquery.aspx

但是我不能。 什么是mymistake？ 我在LoadJobByCustomerId方法上添加了调试红点。 但不工作.Pleqase不要说谷歌搜索我在48小时内做…查看：

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ChildSite.Master" Inherits="System.Web.Mvc.ViewPage" %>  Index    $(document).ready(function () { $("#ddlCustomers").change(function () { var idColour = $(this).val(); $.getJSON("/Job/LoadJobByCustomerId", { customerId: idColour }, function (modelData) { var select = $("#ddlJobs"); select.empty(); select.append($('', { value: 0, text: "Select a Colour" })); $.each(modelData, function (index, itemData) { select.append($('', { value: itemData.Value, text: itemData.Text })); }); }); });   
 
Customer Name: 
  
 
Job Name:
  
 
 
 
 
   

控制器：

 public class JobController : Controller { public ActionResult Index() { ViewData["Customers"] = new SelectList(CustomerOperation.GetCustomers().Items, "Id", "Name", null); ViewData["Jobs"] = new SelectList(JobOperation.GetCustomersAssemblyList().Items, "scheduleId", "name", null); return View(); } [AcceptVerbs(HttpVerbs.Get)] public JsonResult LoadJobByCustomerId(int customerId) { var jobs = JobOperation.GetCustomersAssemblyList(customerId).Items; var jobItems = jobs.Select(c => new SelectListItem() { Text = c.name, Value = c.scheduleId.ToString() }); return Json(jobItems, JsonRequestBehavior.AllowGet); } 

Answer 1

对于初学者，正在加载jquery的标记未正确关闭：

它应该是这样的：

   <% using (Html.BeginForm()) { %> 
 
 
Customer Name: 
 
 <%= Html.DropDownList( "Customers", null, "** Please Select **", new { id = "ddlCustomers" } )%> 
 
 
 
Job Name:
 
 <%= Html.DropDownList( "Jobs", null, "** Please Select **", new { id = "ddlJobs" } )%> 
 
 
 <% } %> 

jQuery 1.4.4也有点老了。 也许你想切换到更新的版本。

我在你的代码中修复的另一件事是使用Url助手而不是硬编码url，缺少关闭}); 对于document.ready处理程序，具有不一致的打开和关闭

和

标记的损坏标记，...

我不知道你们是怎么写/缩进你的代码的，但我真的建议你多关注一下。

下次开发javascript密集型Web应用程序并且无法正常工作时，您的直接反应应该是查看FireBug控制台或Chrome开发人员工具栏（取决于您使用的Web浏览器），而不是在Stack Overflow上发布调查。 FireBug会在您的代码中至少提醒您50％的错误。

这段代码的进一步改进是通过引入视图模型和强类型助手的使用来摆脱ViewData ，正如我在这篇文章中举例说明的那样： https ： //stackoverflow.com/a/4459084/29407

Answer 2

我建议使用Knockout http://knockoutjs.com/并使用它创建级联下拉列表。 如果创建一个驱动页面行为的ViewModel，则可以创建更清晰，更易维护的代码。

看一下这篇文章http://weblogs.asp.net/raduenuca/archive/2011/03/06/asp-net-mvc-cascading-dropdown-lists-tutorial-part-1-defining-the-problem-而最context.aspx

我们一直对Continent，Region，Nation使用类似的技术，代码很容易维护和扩展。