ASP.NET(VB.NET)实现DevExpress ListBox无页面刷新更新方法

我正在开发一个表单，其中包含DevExpress的BootstrapUploadControl上传控件和BootstrapListBox控件，用于展示已上传的文件。目前上传文件后，必须刷新整个页面才能在ListBox中看到新上传的文件。需求是实现上传完成后自动更新ListBox，无需整页刷新，但找了很久都没找到可行方案。

现有VB后台代码：

Protected Sub BootstrapUploadControl1_FileUploadComplete(sender As Object, e As DevExpress.Web.FileUploadCompleteEventArgs) Handles BootstrapUploadControl1.FileUploadComplete
    Dim fileName = e.UploadedFile.FileName
    Dim contentType = e.UploadedFile.ContentType
    Try
        Using fs As Stream = e.UploadedFile.FileContent
            Using br As New BinaryReader(fs)
                Dim bytes As Byte() = br.ReadBytes(CType(fs.Length, Integer))
                Dim constr As String = "Data Source=mgm-sql-pub101;Initial Catalog=KidVid;Integrated Security=True;"
                Dim query = "INSERT INTO Attachments(RequestID,FileName,FileBytes,Description) VALUES (@RequestID, @FileName, @FileBytes, @Description)"
                Using con As SqlConnection = New SqlConnection(constr)
                    Dim cmd As SqlCommand = New SqlCommand(query, con)
                    cmd.Parameters.AddWithValue("RequestID", 1)
                    cmd.Parameters.AddWithValue("FileName", fileName)
                    cmd.Parameters.AddWithValue("FileBytes", bytes)
                    cmd.Parameters.AddWithValue("Description", "Binary File")
                    Try
                        con.Open()
                        If con.State = ConnectionState.Open Then
                            MsgBox("It's open! Yay!")
                        End If
                        Dim obj As Object = cmd.ExecuteNonQuery()
                        MsgBox("Record inserted successfully. ID = " & obj.ToString())
                        con.Close()
                        If con.State = ConnectionState.Closed Then
                            MsgBox("It's closed! Yay!")
                        End If
                    Catch ex As Exception
                        Throw ex
                    End Try
                End Using
            End Using
        End Using
    Catch ex As Exception
        Throw New Exception(ex.Message)
    End Try
End Sub

前端HTML代码：

<div class="col">
    <h5><i class='fas fa-paperclip' style='font-size:24px'></i>Attachments:</h5>
    <div class="row mb-3">
        <div class="col-5">
            <dx:BootstrapUploadControl ID="BootstrapUploadControl1" runat="server" AutoPostBack="true" UploadMode="Auto" ShowProgressPanel="True" ShowUploadButton="True"></dx:BootstrapUploadControl>
            <dx:ASPxButton ID="ASPxButton1" runat="server" Text="ASPxButton" AutoPostBack="true" />
        </div>
        
    </div>
    <h6><i class="fas fa-file-download" style="font-size: 24px"></i> Double-click filename to download file:</h6>
    <dx:BootstrapListBox ID="AttachmentsListBox" runat="server" DataSourceID="KidVidAttachmentsDataSource" AutoPostBack="true">
        <Fields>
            <dx:BootstrapListBoxField FieldName="FileName"></dx:BootstrapListBoxField>
        </Fields>
    </dx:BootstrapListBox>
    <asp:SqlDataSource runat="server" ID="KidVidAttachmentsDataSource" ConnectionString="<%$ ConnectionStrings:KidVidConnectionString %>" SelectCommand="SELECT [FileName] FROM [Attachments] ORDER BY [FileName]"></asp:SqlDataSource>

方案1：上传完成后直接重新绑定ListBox #

在BootstrapUploadControl1_FileUploadComplete事件末尾添加重新绑定代码，同时替换服务器端MsgBox为客户端提示：

' 上传成功后设置回调数据，用于客户端提示
e.CallbackData = "文件 " & fileName & " 上传成功"
' 重新绑定数据源与ListBox
KidVidAttachmentsDataSource.Select(DataSourceSelectArguments.Empty)
AttachmentsListBox.DataBind()

前端给UploadControl添加客户端事件处理提示：

<dx:BootstrapUploadControl ID="BootstrapUploadControl1" runat="server" AutoPostBack="true" UploadMode="Auto" ShowProgressPanel="True" ShowUploadButton="True">
    <ClientSideEvents FileUploadComplete="function(s, e) {
        if(e.callbackData) {
            alert(e.callbackData);
        }
    }" />
</dx:BootstrapUploadControl>

方案2：用CallbackPanel实现优雅局部刷新 #

将ListBox和数据源包裹在BootstrapCallbackPanel中，实现精准局部刷新：

1. 前端修改结构：

<dx:BootstrapCallbackPanel ID="CallbackPanel1" runat="server">
    <PanelCollection>
        <dx:PanelContent>
            <h6><i class="fas fa-file-download" style="font-size: 24px"></i> 双击文件名下载文件:</h6>
            <dx:BootstrapListBox ID="AttachmentsListBox" runat="server" DataSourceID="KidVidAttachmentsDataSource" AutoPostBack="true">
                <Fields>
                    <dx:BootstrapListBoxField FieldName="FileName"></dx:BootstrapListBoxField>
                </Fields>
            </dx:BootstrapListBox>
            <asp:SqlDataSource runat="server" ID="KidVidAttachmentsDataSource" ConnectionString="<%$ ConnectionStrings:KidVidConnectionString %>" SelectCommand="SELECT [FileName] FROM [Attachments] ORDER BY [FileName]"></asp:SqlDataSource>
        </dx:PanelContent>
    </PanelCollection>
</dx:BootstrapCallbackPanel>

2. 客户端触发回调：

<dx:BootstrapUploadControl ID="BootstrapUploadControl1" runat="server" AutoPostBack="true" UploadMode="Auto" ShowProgressPanel="True" ShowUploadButton="True">
    <ClientSideEvents FileUploadComplete="function(s, e) {
        if(e.isValid) {
            CallbackPanel1.PerformCallback();
            alert('文件上传成功');
        }
    }" />
</dx:BootstrapUploadControl>

3. 后台添加CallbackPanel的回调处理：

Protected Sub CallbackPanel1_Callback(sender As Object, e As DevExpress.Web.CallbackEventArgsBase) Handles CallbackPanel1.Callback
    ' 重新绑定数据
    KidVidAttachmentsDataSource.Select(DataSourceSelectArguments.Empty)
    AttachmentsListBox.DataBind()
End Sub

注意事项 #

• 移除服务器端MsgBox：该方法仅在服务器环境生效，客户端无法看到弹窗，会导致无响应或异常。
• 按需过滤数据源：如果需要根据当前请求ID展示对应附件，需修改SqlDataSource的SelectCommand为带参数的查询，比如SELECT [FileName] FROM [Attachments] WHERE RequestID = @RequestID ORDER BY [FileName]，并添加对应参数配置。

内容的提问来源于stack exchange，提问作者Timothy Waters