jquery - asp.net/MVC 3/razor/jquery/cascading ドロップダウンリストが機能しない

Question

私はstackoverflowとjquery/javascriptが初めてです。現在のプロジェクトにカスケードドロップダウンリストを追加するさまざまな方法を 1 日中探していましたが、まだうまくいく方法を見つけていません。私の調査結果のほとんどは、MVC 2 に基づいた古いものから、Web フォーム、古いテクノロジに至るまでのものです。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>

Client ドロップダウンリストから Client を選択しても、Client Rep ドロップダウンリストに何も起こりません。私が欠けているのは明らかな何かに違いないことはわかっていますが、現時点では、この苛立たしい問題を解決するために馬鹿のように見えてもかまいません.

私のプロジェクトで他のjqueryが機能することを確認したので、私が知る限り、無効になっているものは何もありません。

助けてくれてありがとう！

T

アップデート

だから私はそれが表示されるように一歩前進しました。ビュー上でスクリプトの配置を移動し始めました。ページの上部と下部を試してみました。また、レイアウトページを見直して、適切な jquery ライブラリにリンクしていることを確認しました。それはすべてチェックアウトしましたが、考えさせられたので、スクリプトを独自のcustom.jsファイルに移動し、レイアウトページでリンクすると、カスケードドロップダウンリストが機能し始めました。

私の次の質問はなぜですか？で、今のままでいいの？ありがとう！

T

score 1 · Accepted Answer

OK -> Viewbag は Viewbag.ClientID ではなく、Viewbag.Clients である必要があります

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

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

そしてこれも同じ...

@Html.DropDownList("SupervisorID")

jQueryコードはOKです。

これを試してから、コードを入力してください：

作成.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);
    }

}

jquery - asp.net/MVC 3/razor/jquery/cascading ドロップダウン リストが機能しない

1 に答える 1

Related

Reference

jquery - asp.net/MVC 3/razor/jquery/cascading ドロップダウンリストが機能しない