MVC 3: Wie man die Checkboxliste aktualisiert, wenn dropdownlistitem ausgewählt ist?

Question

für die letzten zwei Tage versuchte ich herauszufinden, wie man eine Checkboxliste dynamisch aktualisiert, wenn ein neues Element in der Dropdownliste mit Hilfe von Javascript ausgewählt wird.

Ich habe dasselbe vor einer Woche getan, wo ich Update zu einem von einer Dropdown-Liste zu einer Dropdown-Liste tun sollte.

Was ive bekam bisher:

Ansicht

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

wenn ich Ansicht bin Laden Model.checkboxlist ist null, weil ich etwas nicht zurückgeben abgesehen von Dropdownlist-Elemente zu modellieren.

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

Gerade jetzt sogar Alert ("HEJ") sogar gefeuert doesnt, und ich einfach kann nicht herausfinden, warum ... Hilfe bitte?

Answer 1

Sie könnten Teilansichten verwenden und Ihren Controller-Aktion eine teilweise Rückkehr und das Markup auf dem Server aufzubauen, anstatt sie auf dem Client zu tun:

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

und dann definieren _checkboxlist.cshtml:

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

und schließlich die Editor-Vorlage ~/Views/Shared/EditorTemplates/PDFCheckBoxList.cshtml, die für jedes Element gerendert wird:

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

Jetzt können Sie Ihr Javascript ändern wie folgt:

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

und schließlich Ihre getPdfCheckBoxList Aktion:

Wenn Sie das Markup auf dem Client erstellen und die Controlleraktion JSON zurückgeben möchten, würde ich Ihnen die Verwendung eines Javascript-Templating-Frameworks empfehlen.

Answer 2

Sie entweder die Wähler falsch "#User", oder dass id mehrere Male auf der gleichen Seite

Ansicht generierte Seite Quelle aus dem Browser verwendet wird, und finden, wenn das <select> Element id="User" hat oder es gibt mehrere IDs gleich