我使用来自http://www.virtuosoft.eu/code/bootstrap-duallistbox/的双列表框控件,并尝试使用从JSON请求返回的信息填充它。
最初我在这个
中使用VB填充了DuallistboxPublic 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没有被填充,但是在页面上创建了另一个下拉列表而没有填充正确的控件。
非常感谢任何和所有帮助。
答案 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};
}
<强>结果:强>