asp.net/MVC 3 / razor / jquery / cascading下拉列表无法正常工作

我是stackoverflow以及jquery / javascript的新手。 我一直在寻找不同的方法来为我当前的项目添加级联下拉列表，并且还没有找到适合我的方法。 我的大部分发现都是从过时的，基于MVC 2到webforms到旧技术。 我确实找到了一些基于MVC 3/4的教程和post，这些教程和post都有帮助，但我仍然要把鼠标放在电脑屏幕上。

我寻求帮助的一些链接是： Radu Enuca关于级联下拉列表 的教程和Rick_Anderson的教程

该项目的一些背景：

我正在创建一个工作单系统，供员工每天将时间提交到办公室。 我有一个下面列出的控制器，视图和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 clientReps = new List(); 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"; } 
 
Create Daily Work Ticket
 
 @using (Html.BeginForm()) { @Html.ValidationSummary(true) 
 General Information 
 
 
 
 
 @Html.LabelFor(Model => Model.DateWorked) * 
 
 @Html.LabelFor(Model => Model.PayKey) 
 
 @Html.LabelFor(Model => Model.PONumber) 
 
 @Html.LabelFor(Model => Model.WONumber) * 
 
 
 
 @Html.EditorFor(Model => Model.DateWorked) 
 
 @Html.EditorFor(Model => Model.PayKey) 
 
 @Html.EditorFor(Model => Model.PONumber) 
 
 @Html.EditorFor(Model => Model.WONumber) 
 
 
 
 @Html.LabelFor(Model => Model.ProjectId) 
 
 @Html.LabelFor(Model => Model.ClientID) 
 
 @Html.LabelFor(Model => Model.ClientRepID) 
 
 @Html.LabelFor(Model => Model.SupervisorID) * 
 
 
 
 @Html.TextBoxFor(Model => Model.ProjectId) 
 
 @Html.DropDownList("ClientID", ViewBag.ClientID as SelectList, "Select a Client", new { id = "drop1" }) 
 
  
 
 @Html.DropDownList("SupervisorID") 
 
 
 
 @Html.LabelFor(Model => Model.JobLocation) * 
 
 @Html.LabelFor(Model => Model.JobDescription) * 
 
 
 
 @Html.TextBoxFor(Model => Model.JobLocation, new{@class="textboxlengthlong"}) 
 
 @Html.TextBoxFor(Model => Model.JobDescription, new{@class="textboxlengthlong"}) 
 
 
 
 
 
  
 } 

脚本

  $(document).ready(function () { $("#drop1").change(function () { var id = $(this).val(); $.getJSON("/WorkTicket/GetClientReps/", { id: id }, function (data) { var select = $("#drop2"); select.empty(); select.append($('', { value: 0, text: "Select a Client Rep" })); $.each(data, function (index, data) { select.append($('', { value: data.Value, text: data.Text })); }); }); }); });  

当我从客户端下拉列表中选择客户端时，客户端代表下拉列表没有任何反应。 我知道它一定是显而易见的，我不知道但是在这一点上我不介意看起来像个白痴来解决这个令人沮丧的问题。

我已经validation了其他jquery在我的项目中有效，所以据我所知，我没有禁用任何东西。

提前谢谢你的帮助！

Ť

更新

所以我向前迈出了一步。 我开始在视图上移动脚本放置。 我尝试了页面的顶部和底部。 我还查看了布局页面，以确保我链接到正确的jquery库。 这一切都检查了但它让我思考所以我将我的脚本移动到它自己的custom.js文件并在布局页面上链接到它并且级联下拉列表开始工作。

我的下一个问题是为什么？ 我应该像现在这样离开吗？ 谢谢！

Ť

Answer 1

好的 – > Viewbag应该是Viewbag.Clients，而不是Viewbag.ClientID

 @Html.DropDownList("ClientID", ViewBag.ClientID as SelectList, "Select a Client", new { id = "drop1" })  

同样的……

 @Html.DropDownList("SupervisorID") 

jQuery代码很好。

试试这个，然后填写你的代码：

Create.cshtml

 @{ ViewBag.Title = "Create"; }  
Create Daily Work Ticket
 
 @using (Html.BeginForm()) { @Html.ValidationSummary(true) @Html.DropDownList("ClientID", ViewBag.Clients as SelectList, "Select a Client", new { id = "drop1" })  
 
  
 } 

WorkTicketController

 public class WorkTicketController : Controller { // // GET: /WorkTicket/ public ActionResult Index() { return View(); } private Context db = new Context(); public ActionResult GetClientReps(int id) { /*var Reps = from c in db.ClientReps where c.ClientID == id select c; */ List clientReps = new List(); /*foreach (var item in Reps) { string clientRepId = item.ClientRepID.ToString(); string clientRepName = item.FirstName + " " + item.LastName; clientReps.Add(new SelectListItem() { Value = clientRepId, Text = clientRepName }); }*/ clientReps.Add(new SelectListItem() { Value = "10", Text = "name" }); var List = new SelectList(clientReps, "Value", "Text"); return Json(List, JsonRequestBehavior.AllowGet); } public ActionResult Create() { List clientReps = new List(); clientReps.Add(new SelectListItem() { Value = "1", Text = "client 1" }); clientReps.Add(new SelectListItem() { Value = "2", Text = "client 2" }); ViewBag.Clients = new SelectList(clientReps, "Value", "Text"); //ViewBag.Supervisors = GetGlobalItems.UserListByRole("Supervisor"); return View(); } protected override void Dispose(bool disposing) { //db.Dispose(); base.Dispose(disposing); } }