2

過去 2 日間、javascript を使用してドロップダウン リストの新しい項目が選択されたときに、チェックボックス リストを動的に更新する方法を見つけようとしていました。

ドロップダウンリストからドロップダウンリストに更新する必要がある1週間前に同じことをしました。

これまでに得たもの：

意見

@using (Html.BeginForm())
{
    @Html.DropDownListFor(x => x.User, (IEnumerable<SelectListItem>)Model.UserList, "-- vælg bruger --")
    if (Model.checkboxlist != null)
    {
       for (var i = 0; i < Model.checkboxlist.Count; i++)
       {
        <div class="editor-label">
           @Html.CheckBoxFor(c => Model.checkboxlist[i].check)
            @Html.LabelFor(c => Model.checkboxlist[i].Id, Model.checkboxlist[i].Id)
            @Html.HiddenFor(c => Model.checkboxlist[i].Id)

        </div>
       }
    }
}
<script type="text/javascript">
    $('#User').change(function () {
    alert('HEJ!');
        var selectedUser = $(this).val();
        alert(selectedUser);
        if (selectedUser != null && selectedUser != '-- vælg bruger --' && selectedUser != '') {
            $.getJSON('@Url.Action("getPdfCheckBoxList","Admin")', { username: selectedUser },
            function (employee) {

                var checkboxlist = $('#checkboxlist');
                checkboxlist.empty();

                $.each(employee, function (index, employee) {
                    checkboxlist.append($('<checkbox/>', {
                        checked = 'false'
                    }));
                });
            });

        }
    });
</script>

ビューをロードしているとき Model.checkboxlist が null であるため、ドロップダウンリスト項目以外のモデルには何も返されません。

コントローラーアクション:

public ActionResult getPdfCheckBoxList(String username)
{
    MethodService service = new MethodService();
    var list = new List<PDFCheckBoxList>();


    foreach (var pdfCheckBoxList in getPDFFileNames(username))
    {
        list.Add(new PDFCheckBoxList { check = false, Id = pdfCheckBoxList });
    }
    return Json(list, JsonRequestBehavior.AllowGet);
}

現在、Alert("HEJ") でさえクビにならず、理由がわかりません... 助けてください。

4

2 に答える 2

6

部分ビューを使用して、コントローラー アクションでパーシャルを返し、クライアントではなくサーバーでマークアップを作成することができます。

@using (Html.BeginForm())
{
    @Html.DropDownListFor(
        x => x.User, 
        Model.UserList, 
        "-- vælg bruger --",
        data_url = Url.Action("getPdfCheckBoxList", "Admin")
    )
    <div id="checkboxlist">
        @if (Model.checkboxlist != null)
        {
            @Html.Partial("_checkboxlist", Model.checkboxlist)
        }
    </div>
}

そして次のように定義します_checkboxlist.cshtml:

@model IEnumerable<PDFCheckBoxList>
@{
    ViewData.TemplateInfo.HtmlFieldPrefix = "checkboxlist";
}
@Html.EditorForModel()

最後に、~/Views/Shared/EditorTemplates/PDFCheckBoxList.cshtml各要素に対してレンダリングされるエディター テンプレート:

@model PDFCheckBoxList
<div class="editor-label">
    @Html.CheckBoxFor(c => c.check)
    @Html.LabelFor(c => c.Id, Model.Id)
    @Html.HiddenFor(c => c.Id)
</div>

これで、JavaScript を次のように変更できます。

<script type="text/javascript">
    // Now that we no longer have any server side 
    // code here we could externalize this script
    // into a separate javascript file

    $('#User').change(function () {
        if (selectedUser != null && selectedUser != '') {
            var selectedUser = $(this).val();
            var url = $(this).data('url');
            var data = { username: selectedUser };
            $('#checkboxlist').load(url, data);
        }
    });
</script>

そして最後にあなたのgetPdfCheckBoxList行動：

public ActionResult getPdfCheckBoxList(String username)
{
    var service = new MethodService();
    var list = getPDFFileNames(username)
        .Select(x => new PDFCheckBoxList 
        { 
            check = false, 
            Id = x 
        })
        .ToList();
    return PartialView("_checkboxlist", list);
}

クライアント上でマークアップを作成し、コントローラー アクションが JSON を返すようにする場合は、javascript テンプレート フレームワークを使用することをお勧めします。

于 2012-04-10T06:30:31.073 に答える
0

セレクターが間違っているか"#User"、同じページで id が複数回使用されています。

ブラウザから生成されたページのソースを表示し、<select>要素にid="User"等しい ID があるか、複数の ID があるかどうかを確認します。"User"

于 2012-04-09T16:06:13.753 に答える