0

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

但是我不能。我的错误是什么？我在 LoadJobByCustomerId 方法上添加了调试红点。但不工作。Pleqase 不要说让谷歌搜索我在 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);
        }
4

2 回答 2

1

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

<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 Overflow 上发布调查。FireBug 会提醒您至少 50% 您在代码中犯下的错误。

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

于 2012-06-30T11:18:20.363 回答
0

我建议使用 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 使用类似的技术，并且代码非常易于维护和扩展。

于 2012-07-01T14:37:24.200 回答