Json zum Füllen Dual ListBox

Question

Ich arbeite mit einem doppelten Listbox-Steuerelement von http://www.virtuosoft.eu/code/bootstrap-duallistbox/ und versuche, es mit Informationen zu füllen, die von einer JSON-Anfrage zurückkommt.

Ursprünglich war ich die Duallistbox mit einem Unter in VB wie diese bevölkern

Public Shared Sub GenerateDropDownListAndValues(dt As DataTable, ddl As DropDownList, addSelect As Boolean) 

    ddl.DataSource = dt 
    ddl.DataTextField = dt.Columns(1).ToString() 
    ddl.DataValueField = dt.Columns(0).ToString() 
    ddl.DataBind() 
    If addSelect = True Then 
     ddl.Items.Insert(0, New ListItem("Please select")) 
    End If 

End Sub 

und dann mit dem JQuery mit diesen

$('#MainContent_ddlUnassignedFiles').bootstrapDualListbox(
     { 
      nonSelectedListLabel: 'Non-selected', 
      selectedListLabel: 'Selected', 
      preserveSelectionOnMove: 'moved', 
      moveOnSelect: true 
     }); 

auf Seite laden und Postback das funktioniert gut, füllt kein Problem .

Allerdings, wenn ich die DLB bevölkern Ajax ich nichts zurück

dies ist die Ajax

$.ajax({ 
     type: "POST", 
     url: "Assignments.aspx/GetIncompleteSpreadsheets", 
     data: JSON.stringify(params), 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (data) { 
      $("#MainContent_ddlUnassignedFiles").select2("destroy"); 

      var ddlUnassignedFiles = $("#MainContent_ddlUnassignedFiles"); 
      ddlUnassignedFiles.empty(); 
      $.each(data.d, function() { 
       ddlUnassignedFiles.append($("<option></option>").val(this['Value']).html(this['Text'])); 
      }); 
      $("#MainContent_ddlUnassignedFiles").select2(); 

      $("#saveModal").modal("hide"); 

     }, 
     error: function (data) { 
      console.log("error :" + data); 
      console.log(data); 
      $("#saveModal").modal("hide"); 
     } 
    }); 

und das ist der Ruf, der die json \ Antwort

<Script.Services.ScriptMethod(), Services.WebMethod()> _ 
Public Shared Function GetIncompleteSpreadsheets(val As Integer) As List(Of ListItem) 
    Dim listOfParam As New List(Of SqlParameter) 

    Dim userIdParam As New SqlParameter("@UserId", SqlDbType.VarChar) 
    userIdParam.Value = GetUserId() 
    listOfParam.Add(userIdParam) 

    Dim groupParam As New SqlParameter("@GroupId", SqlDbType.Int) 
    groupParam.Value = val 
    listOfParam.Add(groupParam) 

    Dim dt = GetDataAsDatatable(listOfParam, ConnStr, "App.usp_GetAssignedLists") 

    Dim retVal = (From row As Object In dt.Rows Select New ListItem() With { 
     .Value = row("RequestHeaderId"), 
    .Text = row("FileName")}).ToList() 

    Return retVal 
End Function 

bieten hat Die Frage, die ich hier habe, ist, wenn Sie denselben Code verwenden, um eine andere Dropdown-Liste zu füllen, das funktioniert perfekt. Das Problem, das ich habe, ist, dass der DLB nicht gefüllt wird, aber eine andere Dropdown-Liste auf der Seite erstellt wird und nicht das richtige Steuerelement auffüllt.

Jede und alle Hilfe wird sehr geschätzt.

Answer 1

Die folgenden für mich gearbeitet:

HTML: Update

<select id="test"> 
    <option>A</option> 
    <option>B</option> 
</select> 

JS: Update

$("#test").bootstrapDualListbox(); 

$.getJSON("/api/Home/").success(function (array) { 
    $("#test").children().remove(); 
    $.each(array, function() { 
     $('<option>').text(this).appendTo("#test"); 
    }) 

    $("#test").bootstrapDualListbox('refresh', true); 
}) 

Mein Controller-Methode (C#):

public List<int> Get() 
{ 
    return new List<int>{1,2,3,4}; 
} 

Ergebnis: