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 –