Json填写Dual ListBox

时间:2016-07-15 09:18:02

标签: jquery asp.net json ajax

我使用来自http://www.virtuosoft.eu/code/bootstrap-duallistbox/的双列表框控件,并尝试使用从JSON请求返回的信息填充它。

最初我在这个

中使用VB填充了Duallistbox
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

然后使用这个

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

在页面加载和回发这工作正常,填充没有问题。

但是,当我ajax填充DLB时,我什么也得不回来

这是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");
        }
    });

这是提供json \ response

的调用
    <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

我在这里的问题是当使用相同的代码填充另一个下拉列表时,这非常有效。但是我遇到的问题是DLB没有被填充,但是在页面上创建了另一个下拉列表而没有填充正确的控件。

非常感谢任何和所有帮助。

1 个答案:

答案 0 :(得分:1)

以下对我有用:

HTML:更新

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

JS:更新

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

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

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

我的控制器方法(C#):

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

<强>结果:

duallistboxresult