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

【问题标题】：How to fill cascading dropdownlist each other by using jquery in mvc 3?如何在 mvc 3 中使用 jquery 填充级联下拉列表？
【发布时间】：2012-07-01 16:18:02
【问题描述】：

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

但我不能。我的错误是什么？我在 LoadJobByCustomerId 方法上添加了调试红点。但不工作。请不要说谷歌搜索我会在 48 小时内完成...... 查看：


<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ChildSite.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Index
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript" src="../../Scripts/jquery-1.4.4.js">


    $(document).ready(function () {
        $("#ddlCustomers").change(function () {
            var idColour = $(this).val();
            $.getJSON("/Job/LoadJobByCustomerId", { customerId: idColour },
function (modelData) {
    var select = $("#ddlJobs");
    select.empty();
    select.append($('<option/>', {
        value: 0,
        text: "Select a Colour"
    }));
    $.each(modelData, function (index, itemData) {

        select.append($('<option/>', {
            value: itemData.Value,
            text: itemData.Text
        }));
    });
});
        }); 


</script>
  <% 
   using (Html.BeginForm())
      { %>

       <table style="padding:25px; margin:10px 10px 10px 10px;" id="sample">
                <tr><td>Customer Name: </td><td>
               <%= Html.DropDownList("Customers", null, "** Please Select **", new { id="ddlCustomers"})%>
                </td></tr>
                 <tr><td>Job Name:</td><td>
              <%= Html.DropDownList("Jobs", null, "** Please Select **", new { id = "ddlJobs" })%>
                </td></tr>
                </table>
                <br />
                <div>

                </div>
         <%}%>

</asp:Content>

控制器：


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

【问题讨论】：

标签： jquery .net asp.net-mvc asp.net-mvc-3 html-select

【解决方案1】：

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

<script type="text/javascript" src="../../Scripts/jquery-1.4.4.js">

应该是这样的：

<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-1.4.4.js") %>"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#ddlCustomers').change(function () {
            var idColour = $(this).val();
            var url = '<%= Url.Action("LoadJobByCustomerId", "Job") %>';
            $.getJSON(url, { customerId: idColour }, function (modelData) {
                var select = $("#ddlJobs");
                select.empty();
                select.append($('<option/>', {
                    value: 0,
                    text: "Select a Colour"
                }));
                $.each(modelData, function (index, itemData) {
                    select.append($('<option/>', {
                        value: itemData.Value,
                        text: itemData.Text
                    }));
                });
            });
        }); 
    });
</script>

<% using (Html.BeginForm()) { %>
    <table style="padding:25px; margin:10px 10px 10px 10px;" id="sample">
        <tr>
            <td>Customer Name: </td>
            <td>
                <%= Html.DropDownList(
                    "Customers", 
                    null, 
                    "** Please Select **", 
                    new { id = "ddlCustomers" }
                )%>
            </td>
        </tr>
        <tr>
            <td>Job Name:</td>
            <td>
                <%= Html.DropDownList(
                    "Jobs", 
                    null, 
                    "** Please Select **", 
                    new { id = "ddlJobs" }
                )%>
            </td>
        </tr>
    </table>
<% } %>

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

我在您的代码中修复的另一件事是使用 Url 帮助程序而不是硬编码 url，缺少 document.ready 处理程序的关闭 });，带有不一致打开和关闭 <tr> 和 <td> 标记的标记损坏, ...

我不知道你们是如何编写/缩进代码的，但我真的建议你们多加注意。

下次当开发一个 javascript 密集型 Web 应用程序并且某些东西不起作用时，您的第一反应应该是查看 FireBug 控制台或 Chrome 开发人员工具栏（取决于您使用的 Web 浏览器），而不是在 Stack 上发布溢出没有任何调查。 FireBug 会在您在代码中犯下的至少 50% 的错误时提醒您。

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

【讨论】：

【解决方案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-and-the-context.aspx

我们一直对 Continent、Region、Nation 使用类似的技术，并且代码非常易于维护和扩展。

【讨论】：