How to refresh devexpress listbox without refreshing the page in ASP.NET using VB.NET - asp.net

Question

I'm working on a form where I have to have an upload control and a listbox to show the uploaded files. Right now the only way to show the change is to refresh the whole page. My boss wants the upload to automatically show in the listbox. I have been unable to find anything to do this after days of searching.
VB code:
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>

Answer 1

So, I'm not familiar with the up-loader you are using. But, your posted code stub suggest this works "much" like the ajaxtoolkit one.
That means after "all" files been up-loaded, then no post-back occures.
As noted, you do probably want some up-loader that allows up-loading of files, and does NOT require a post-back.
However, after say 4 files are done up-loading, then it not all that bad to have a post-back trigger, and at that point in time trigger a post-back to refresh your grid of files, or listbox or whatever.
And note that one should "find" + "adopt" some up-loader for this purpose. A number "will" preview the picture file EVEN before the up-load starts. (however, I not really interested in that feature).
So, I use the ajax tool kit. It has 3 events (all do NOT post back).
Start up load stub.
One file done uploading stub. Here we save the file, add to our "file list". In my following example I use a grid view in place of a list box.
And I have some code that pulls out a first page for a image preview if this is a PDF. For images, then I just preview the image.
And a lot of the nice up-loaders also have a "hot spot" in which you can just drag + drop files.
And most are "chunked", and thus show a progress bar. And being chunked, then file size is un-limited, and you don't get a huge browser "spinner" while such large files up-load.
However, once ALL files are done, then I do fire a client side event, and I do so since I need/want to up-date my up-loaded file list. That is "why" I asked about what file up-loader you are using.
You COULD (and so could I with the aj toolkit file uploader) do a web call, get the new files, and fill out the listbox. But, I'm using a gridview, and I just do a Post-back to refresh it.
The results look like this:
So, while and after each file is up-loaded? No, I don't want a post-back.
However, once the list of files is up-loaded? Then yes, I do a post-back to update (refresh) the grid view.
So, it much depends on the file up-loader you are using.
As noted, your "code stub" suggests that your file up-loader has this ability (to trigger a client side javascript event when done).
So, what I did was drop a button on to the page, hide it (with style = display none).
And the aj fileuploader has a "all done" client side event.
this was my markup:
(not really imporant, but as a fyi:).
<div id="uploadfiles" runat="server" style="width: 550px; float: left">
<ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server"
OnUploadComplete="AjaxFileUpload1_UploadComplete"
OnClientUploadCompleteAll="AllDone" />
</div>
<div id="myfiles" runat="server" style="float: left; width: 40%; margin-left: 30px">
<asp:GridView ID="GridFiles" runat="server"
AutoGenerateColumns="False" CssClass="table table-hover"
OnRowDataBound="GridFiles_RowDataBound">
<Columns>
<asp:BoundField DataField="FileName" HeaderText="FileName" />
<asp:BoundField DataField="UpLoadTime" HeaderText="UpLoaded" />
<asp:BoundField DataField="Size" HeaderText="Size" />
<asp:BoundField DataField="Pages" HeaderText="Pages" />
<asp:TemplateField HeaderText="Preview">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" Width="120px" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Download" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<button id="cmdDownLoad" runat="server" class="btn myshadow"
onserverclick="cmdDownLoad_Click">
<span aria-hidden="true" class="glyphicon glyphicon-cloud-download"></span>
</button>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Delete" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<button id="cmdDelete" runat="server" class="btn myshadow"
onclick="if (!delok(this)) {return false};"
onserverclick="cmdDelete_ServerClick">
<span aria-hidden="true" class="glyphicon glyphicon-trash"></span>
</button>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
</div>
And I have this javascript code to refresh the grid view.
<asp:Button ID="cmdLoadGrid" runat="server" Text="Button"
style="display:none" ClientIDMode="Static" OnClick="cmdLoadGrid_Click"
/>
<script>
function AllDone() {
$('#cmdLoadGrid').click()
}
So, I in fact "click" the button after everything is done, since the aj fileupload does not do a post-back, and I in fact wanted one!
And my file save after up-load looks rather simular to what you have:
this:
Protected Sub AjaxFileUpload1_UploadComplete(sender As Object,
e As AjaxControlToolkit.AjaxFileUploadEventArgs)
Dim sPath As String = Server.MapPath("~/UpLoadFiles/")
Dim sFilePath As String = sPath & e.FileName
AjaxFileUpload1.SaveAs(sFilePath)
Dim strSQL As String =
"INSERT INTO MyUploadFiles (FileName, UpLoadTime, Size, SavePath, Pages, Preview)
Values (#FileName, #UpLoadTime, #Size, #SavePath, #Pages, #Preview)"
Dim cmdSQL As New SqlCommand(strSQL)
cmdSQL.Parameters.Add("#FileName", SqlDbType.NVarChar).Value = e.FileName
cmdSQL.Parameters.Add("#UpLoadTime", SqlDbType.NVarChar).Value = DateTime.Now
cmdSQL.Parameters.Add("#Size", SqlDbType.Int).Value = e.FileSize
cmdSQL.Parameters.Add("#SavePath", SqlDbType.NVarChar).Value = sPath
Dim iBytes() As Byte
Dim PageCount As Integer = 0
Select Case Path.GetExtension(e.FileName)
Case ".pdf"
iBytes = GetPdfThumb2(sFilePath, PageCount)
Case ".zip"
iBytes = GimageF(Server.MapPath("~/Content/Pictures/zip.png"))
Case ".bmp", ".gif", ".jpeg", ".jpg", ".png"
iBytes = GimageF(sFilePath)
Case Else
' use generatic picture
iBytes = GimageF(Server.MapPath("~/Content/Pictures/generic.png"))
End Select
cmdSQL.Parameters.Add("#Pages", SqlDbType.Int).Value = PageCount
cmdSQL.Parameters.Add("#Preview", SqlDbType.Binary).Value = iBytes
MyrstPN(cmdSQL)
End Sub