MVC 3：dropdownlistitemを選択したときにチェックボックスリストを更新する方法は？

Question

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

アイブ氏は、私がドロップダウンリストからドロップダウンリストへの更新を行う必要があります前の週のために同じことを行って。

何アイブ得たこれまでのところ：

ビュー

@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ヌル原因は私が離れてドロップダウンリストの項目のモデル化するために何も返さいけないです。

ControllerAction：

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

は今でもアラート（ "HEJ"）のdoesntも解雇、と私は単純に、なぜ把握カント...ヘルプしてください？

Answer 1

あなたは部分的なビューを使用して、コントローラのアクションは部分を返す必要があり、クライアント上でそれをやってするのではなく、サーバー上のマークアップを構築することができ：

@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：

<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> 

：

@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を修正することができます

、最後に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のテンプレートフレームワークを使用することをおすすめします。

Answer 2

あなたは、どちらかの選択が間違っ"#User"、またはブラウザからそのIDが同じページに複数回使用されて

ビュー生成されたページのソースを持っていると<select>要素がid="User"を持っているかに等しい複数のIDがあるかどうかを見つけます