1

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

我查看的一些帮助链接是： 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<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 文件中，并在布局页面上链接到它，级联下拉列表开始工作。

我的下一个问题是为什么？我应该保持现在的状态吗？谢谢！

吨

4

1 回答 1

1

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

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

<select id="drop2"></select>

同样的...

@Html.DropDownList("SupervisorID")

jQuery 代码是好的。

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

创建.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>
}

工作票控制器

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);
    }

}
于 2012-09-29T00:22:30.213 回答