asp.net/MVC 3 /剃刀/ jQuery的/级联下拉不工作列表 [英] asp.net/MVC 3/razor/jquery/cascading dropdown list not working
问题描述
我是新来的StackOverflow以及将jQuery / JavaScript的。我一直在寻找整天不同的方法来添加级联下拉列表，以我目前的项目，还没有找到已经为我工作的一种方式。我的大部分调查结果已经从过时的和基于MVC 2 WebForms的旧技术。我发现基于MVC的3/4已经帮助了一些教程和文章，但我还是要块我的鼠标在我的电脑屏幕。
I'm new to stackoverflow as well as to jquery/javascript. I've been searching all day for different ways to add cascading drop down lists to my current project and have yet to find a way that has worked for me. Most of my finding have been from out of date and based upon MVC 2 to webforms to older technologies. I did find a few tutorials and posts based upon MVC 3/4 that have helped but I'm still about to chunk my mouse at my computer screen.
这是我看过的帮助一些链接：
<一href=\"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\"相对=nofollow>拉杜Enuca的教程级联下拉列表的
和
Rick_Anderson的教程
Some links that I've looked at for help are: Radu Enuca's Tutorial on cascading dropdown lists and Rick_Anderson's Tutorial
在某些项目背景：
我创建一个工作票制度，为员工提交的时间，每天到办公室。我有一个控制器，视图和jQuery脚本如下。
I'm creating a work ticket system for employees to submit their daily time to the office. I have a controller, view, and jquery script listed below.
控制器
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>
当我选择从客户端客户端下拉列表中，没有任何反应为客户众议员下拉列表。我知道这一定有什么明显的是我失踪，但在这一点上我不介意看起来像一个白痴来解决这个令人沮丧的问题。
When I choose a Client from the Client drop down list, nothing happens for the Client Rep drop down list. I know it must be something obvious that I'm missing but at this point I don't mind looking like an idiot to solve this frustrating problem.
我已经验证了，其他的jQuery在我的项目，所以我没有什么，据我可以告诉禁用工作。
I have verified that that other jquery works in my project so I don't have anything disabled as far as I can tell.
感谢您预先的帮助！
T
的更新的
所以我做了一个向前迈进一步出现。我开始在视图中移动我的脚本位置。我尝试了网页顶部和底部。我还审查了页面布局，以确保我的链接到右侧的jQuery库。这一切都检查了，但它让我思考让我感动我的剧本到它自己的custom.js文件，并链接到它的布局页和级联下拉列表开始工作。
So I have made one step forward it appears. I started moving my script placement around on the view. I tried the top and the bottom of the page. I also reviewed the layout page to make sure I was link to the right jquery libraries. That all checked out but it got me thinking so I moved my script into it's own custom.js file and linked to it on the layout page and the cascading drop down lists started working.
我的下一个问题是为什么呢？我应该把它现在的方式吗？谢谢！
My next question is why? and should I leave it the way it is now? Thanks!
T
推荐答案
确定 - >的Viewbag应该是Viewbag.Clients，不Viewbag.ClientID
Ok -> The Viewbag should be Viewbag.Clients, not Viewbag.ClientID
@Html.DropDownList("ClientID", ViewBag.ClientID as SelectList, "Select a Client", new { id = "drop1" })
<select id="drop2"></select>
和同样为这...
@Html.DropDownList("SupervisorID")
jQuery的code是好的。
jQuery code is Ok.
试试这个，然后用你的code填写：
Try this, and then fill with your code:
Create.cshtml
Create.cshtml
@{
ViewBag.Title = "Create";
}
<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>
<div class="linearBg1">Create Daily Work Ticket</div>
<br />
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
@Html.DropDownList("ClientID", ViewBag.Clients as SelectList, "Select a Client", new { id = "drop1" })
<select id="drop2"></select>
<div class="section-span-footer"></div>
<p>
<input type="submit" value="Next" />
</p>
}
WorkTicketController
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<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 });
}*/
clientReps.Add(new SelectListItem() { Value = "10", Text = "name" });
var List = new SelectList(clientReps, "Value", "Text");
return Json(List, JsonRequestBehavior.AllowGet);
}
public ActionResult Create()
{
List<SelectListItem> clientReps = new List<SelectListItem>();
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);
}
}
这篇关于asp.net/MVC 3 /剃刀/ jQuery的/级联下拉不工作列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
