如何填写级联的DropDownList对方在MVC 3使用jQuery？ [英] How to fill cascading dropdownlist each other by using jquery in mvc 3?
问题描述
如何加载的DropDownList级联互相asp.net MVC3？我能怎么做？我已经从利用
<一href=\"http://geekswithblogs.net/ranganh/archive/2011/06/14/cascading-dropdownlist-in-asp.net-mvc-3-using-jquery.aspx\" rel=\"nofollow\">http://geekswithblogs.net/ranganh/archive/2011/06/14/cascading-dropdownlist-in-asp.net-mvc-3-using-jquery.aspx
但我不能。什么是mymistake？我加入的调试方法LoadJobByCustomerId红点。但并不是working.Pleqase不要说让谷歌上搜索我做到这一点在48小时内...
查看：
<％@页标题=LANGUAGE =C＃的MasterPageFile =〜/查看/共享/ ChildSite.Master继承=System.Web.Mvc.ViewPage <动态>％>的
指数
的
<脚本类型=文/ JavaScript的SRC =../../脚本/ jQuery的-1.4.4.js>
$（文件）。就绪（函数（）{
$（＃ddlCustomers）。改变（函数（）{
VAR idColour = $（本）.VAL（）;
$ .getJSON（/招聘/ LoadJobByCustomerId，{客户ID：idColour}，
功能（modelData）{
VAR选择= $（＃ddlJobs）;
select.empty（）;
select.append（$（'<选项/>'，{
值：0，
文本：选择颜色
}））;
$。每个（modelData，功能（指数的ItemData）{ select.append（$（'<选项/>'，{
值：itemData.Value，
文本：itemData.Text
}））;
}）;
}）;
}）;
<％
使用（Html.BeginForm（））
{％> <表格样式=边距：25像素;保证金：10px的10px的10px的10px的; ID =样品>
客户名称：
<％= Html.DropDownList（客户，NULL，**请选择**，新{ID =ddlCustomers}）％>
项目名称：
<％= Html.DropDownList（乔布斯，NULL，**请选择**，新{ID =ddlJobs}）％>
<％}％>
控制器：
公共类JobController：控制器
{
公众的ActionResult指数（）
{
计算机[客户] =新的SelectList（CustomerOperation.GetCustomers（）项，ID，姓名，NULL）;
计算机[工作] =新的SelectList（JobOperation.GetCustomersAssemblyList（）项，scheduleId，名，NULL）;
返回查看（）;
}
的[AcceptVerbs（HttpVerbs.Get）
公共JsonResult LoadJobByCustomerId（INT客户ID）
{
VAR工作= JobOperation.GetCustomersAssemblyList（客户ID）.Items; VAR jobItems = jobs.Select（C =>新SelectListItem（）
{
文= c.name，
值= c.scheduleId.ToString（） }）; 返回JSON（jobItems，JsonRequestBehavior.AllowGet）;
}对于初学者来说，＆LT;脚本＆gt;在您加载的jQuery 标签是没有正确关闭：
＆LT;脚本类型=文/ JavaScript的SRC =../../脚本/ jQuery的-1.4.4.js＆GT;
这应该是这样的：
＆LT;脚本类型=文/ JavaScript的SRC =＆LT;％= Url.Content（〜/脚本/ jQuery的-1.4.4.js）％＆GT; ＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（'＃ddlCustomers'）。改变（函数（）{
VAR idColour = $（本）.VAL（）;
VAR URL ='＆LT;％= Url.Action（LoadJobByCustomerId，工作）％＆GT;';
$ .getJSON（URL，{客户ID：idColour}，功能（modelData）{
VAR选择= $（＃ddlJobs）;
select.empty（）;
select.append（$（'＆LT;选项/＆GT;'，{
值：0，
文本：选择颜色
}））;
$。每个（modelData，功能（指数的ItemData）{
select.append（$（'＆LT;选项/＆GT;'，{
值：itemData.Value，
文本：itemData.Text
}））;
}）;
}）;
}）;
}）;
＆LT; / SCRIPT＆GT;＆下;使用％（Html.BeginForm（））{％GT;
＆LT;表样式=边距：25像素;保证金：10px的10px的10px的10px的; ID =样品＆GT;
＆所述; TR＆GT;
＆LT; TD＆GT;客户名称：＆LT; / TD＆GT;
＆所述; TD＆GT;
＆所述;％= Html.DropDownList（
顾客，
空值，
** 请选择 **，
新{ID =ddlCustomers}
）％GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD＆GT;项目名称：＆LT; / TD＆GT;
＆所述; TD＆GT;
＆所述;％= Html.DropDownList（
工作，
空值，
** 请选择 **，
新{ID =ddlJobs}
）％GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT;％}％GT;
另外的jQuery 1.4.4的还挺岁。也许你想切换到最新版本。
这是我有固定在你的code另一个事情是网址助手，而不是硬编码的URL，缺少的结束}）的使用; 为的document.ready 处理，破碎的标记不一致开始和结束＆LT; TR＆GT; 和＆LT; TD＆GT; 标签，...
我不知道你怎么样的家伙写/缩进你的code，但我真的建议你把多一点的关注。
和制定一个JavaScript密集型的Web应用程序和东西不工作，你的直接反射应该在萤火控制台或Chrome开发者工具栏，寻找当在下一次（取决于您使用的网络浏览器），而不是张贴在堆栈溢出没有任何调查。萤火会提醒你，你在你的code犯下的错误，至少50％。
这code的进一步改善是通过引入视图模型和强类型的辅助的使用摆脱的ViewData ，因为我在这个岗位已经例证： http://stackoverflow.com/a/4459084/29407
how to load cascading dropdownlist each other asp.net mvc3? how can i do? i have been utilizing from http://geekswithblogs.net/ranganh/archive/2011/06/14/cascading-dropdownlist-in-asp.net-mvc-3-using-jquery.aspx
but i can not. what is mymistake? i added debug red point on LoadJobByCustomerId method. But not working.Pleqase dont say make googling i do it in 48 hours... View:
<%@ 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>
Controller:
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);
}
For starters, the <script> tag in which you are loading jquery is not properly closed:
<script type="text/javascript" src="../../Scripts/jquery-1.4.4.js">
It should be like this:
<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>
<% } %>
Also jQuery 1.4.4's kinda old. Maybe you wanna switch to a more recent version.
Another things that I have fixed in your code is the usage of Url helpers instead of hardcoding urls, missing closing }); for the document.ready handler, broken markup with inconsistent opening and closing <tr> and <td> tags, ...
I don't know how are you guys writing/indenting your code, but I would really recommend you putting a little more attention.
And next time when developing a javascript intensive web application and something doesn't work, your immediate reflex should be to look in the FireBug console or Chrome developer toolbar (depending on the web browser you are using) instead of posting on Stack Overflow without any investigation. FireBug would have alerted you on at least 50% of the errors you committed in your code.
Further improvement of this code is to get rid of ViewData by introducing view models and the usage of strongly typed helpers, as I have exemplified in this post: http://stackoverflow.com/a/4459084/29407
这篇关于如何填写级联的DropDownList对方在MVC 3使用jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
