1
我是新来的stackoverflow以及jQuery/javascript。我一整天都在搜索不同的方式来将级联下拉列表添加到我当前的项目中，并且还没有找到适合我的方法。我的大部分发现都来自过时并基于MVC 2，以网络形式陈旧的技术。我确实发现了一些基于MVC 3/4的教程和帖子，这些教程和帖子虽然有所帮助，但我仍然将我的鼠标放在我的电脑屏幕上。asp.net/MVC 3 /剃须刀/ jQuery的/级联下拉列表不工作
，我已经看了用于帮助一些链接： Radu Enuca's Tutorial on cascading dropdown lists 和 Rick_Anderson's Tutorial
了项目的一些背景：
我创建一个工作票制度，为员工日常提交时间到办公室。我有一个控制器，视图和下面列出的jQuery脚本。
控制器
public class WorkTicketController : Controller
{
private Context db = new Context();
public ActionResult GetClientReps(int id)
{
var Reps = from c in db.ClientReps
where c.ClientID == id
select c;
List<SelectListItem> clientReps = new List<SelectListItem>();
foreach (var item in Reps)
{
string clientRepId = item.ClientRepID.ToString();
string clientRepName = item.FirstName + " " + item.LastName;
clientReps.Add(new SelectListItem(){ Value = clientRepId, Text = clientRepName });
}
var List = new SelectList(clientReps, "Value", "Text");
return Json(List, JsonRequestBehavior.AllowGet);
}
public ActionResult Create()
{
ViewBag.Clients = GetGlobalItems.ClientList();
ViewBag.Supervisors = GetGlobalItems.UserListByRole("Supervisor");
return View();
}
protected override void Dispose(bool disposing)
{
db.Dispose();
base.Dispose(disposing);
}
}
}
查看
@model NewbyPortal.Models.WorkTicket
@{
ViewBag.Title = "Create";
}
<article>
<div class="linearBg1">Create Daily Work Ticket</div>
<br />
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<div class="linearBg1">
General Information
</div>
<div class="section-span-body">
<table>
<tr class="empTableRowBody2">
<th class="empTableRowBody2">
@Html.LabelFor(Model => Model.DateWorked) *
</th>
<th class="empTableRowBody2">
@Html.LabelFor(Model => Model.PayKey)
</th>
<th class="empTableRowBody2">
@Html.LabelFor(Model => Model.PONumber)
</th>
<th class="empTableRowBody2">
@Html.LabelFor(Model => Model.WONumber) *
</th>
</tr>
<tr>
<td>
@Html.EditorFor(Model => Model.DateWorked)
</td>
<td>
@Html.EditorFor(Model => Model.PayKey)
</td>
<td>
@Html.EditorFor(Model => Model.PONumber)
</td>
<td>
@Html.EditorFor(Model => Model.WONumber)
</td>
</tr>
<tr class="empTableRowBody2">
<th class="empTableRowBody2">
@Html.LabelFor(Model => Model.ProjectId)
</th>
<th class="empTableRowBody2">
@Html.LabelFor(Model => Model.ClientID)
</th>
<th class="empTableRowBody2">
@Html.LabelFor(Model => Model.ClientRepID)
</th>
<th class="empTableRowBody2">
@Html.LabelFor(Model => Model.SupervisorID) *
</th>
</tr>
<tr>
<td>
@Html.TextBoxFor(Model => Model.ProjectId)
</td>
<td>
@Html.DropDownList("ClientID", ViewBag.ClientID as SelectList, "Select a Client", new { id = "drop1" })
</td>
<td>
<select id="drop2"></select>
</td>
<td>
@Html.DropDownList("SupervisorID")
</td>
</tr>
<tr class="empTableRowBody2">
<th colspan="2" class="empTableRowBody2">
@Html.LabelFor(Model => Model.JobLocation) *
</th>
<th colspan="2" class="empTableRowBody2">
@Html.LabelFor(Model => Model.JobDescription) *
</th>
</tr>
<tr>
<td colspan="2">
@Html.TextBoxFor(Model => Model.JobLocation, new{@class="textboxlengthlong"})
</td>
<td colspan="2">
@Html.TextBoxFor(Model => Model.JobDescription, new{@class="textboxlengthlong"})
</td>
</tr>
</table>
</div>
<div class="section-span-footer"></div>
<p>
<input type="submit" value="Next" />
</p>
}
脚本
<script type="text/javascript">
$(document).ready(function() {
$("#drop1").change(function() {
var id = $(this).val();
$.getJSON("/WorkTicket/GetClientReps/", { id: id },
function (data) {
var select = $("#drop2");
select.empty();
select.append($('<option/>', {
value: 0,
text: "Select a Client Rep"
}));
$.each(data, function (index, data) {
select.append($('<option/>', {
value: data.Value,
text: data.Text
}));
});
});
});
});
</script>
当我选择从客户端客户端下拉列表中，没有任何反应了客户端代表下拉列表。我知道这一定是明显的，我失踪了，但在这一点上，我不介意看起来像一个白痴，以解决这个令人沮丧的问题。
我已经验证过，其他jquery在我的项目中工作，所以我没有任何残疾，据我所知。
非常感谢您的帮助！
牛逼
更新
所以我已经迈出了一步出现。我开始将脚本放置在视图上。我尝试了页面的顶部和底部。我也审查了布局页面，以确保我是链接到正确的jQuery库。所有检查出来，但它让我思考，所以我把我的脚本移动到它自己的custom.js文件，并链接到它在布局页面上，级联下拉列表开始工作。
我的下一个问题是为什么？我是否应该像现在这样离开它？谢谢！
牛逼
我在客户端下拉列表视图出现了拼写错误。 Viewbag应该是Viewbag.Clients，而不是Viewbag.ClientID –
我也证实了我的GetClientReps操作正在返回propper json –