VB.NET中点击按钮无刷新向DataGrid追加数据的实现方法

Alright, let's get this working so clicking the Submit button appends new data to your DataGrid without reloading the whole page. The easiest way to do this in ASP.NET is using the UpdatePanel control from ASP.NET AJAX, which handles partial page updates for us. Here's a step-by-step fix:

Step 1: Refactor the Backend Logic #

First, we need to adjust your GetCustomerAlternateChannels method to support appending data instead of replacing it every time. We'll also fix a couple of typos in your original code that would cause runtime errors.

Private Sub GetCustomerAlternateChannels(appendData As Boolean)
    Dim accountNo = GenericManager.decryptQueryString(Request.QueryString("AccountNumber"))
    Dim CustomerChannels = GetCustomerDetails(accountNo)
    
    ' Fix typos in property names (mobileThreStatus → mobileThreeStatus, mobileFourtatus → mobileFourStatus)
    Dim mobileOne As String = CustomerChannels.mobileOne + "/" + CustomerChannels.mobileOneStatus
    Dim mobileTwo As String = CustomerChannels.mobileTwo + "/" + CustomerChannels.mobileTwoStatus
    Dim mobileThree As String = CustomerChannels.mobileThree + "/" + CustomerChannels.mobileThreeStatus
    Dim mobileFour As String = CustomerChannels.mobileFour + "/" + CustomerChannels.mobileFourStatus
    Dim mobileFive As String = CustomerChannels.mobileFiveStatus ' Consider adding mobileFive number here if available
    
    Dim ChannelTable As DataTable
    
    If appendData AndAlso DataGrid1.DataSource IsNot Nothing Then
        ' Reuse existing DataTable from the DataGrid to append a new row
        ChannelTable = DirectCast(DataGrid1.DataSource, DataTable)
        ChannelTable.Rows.Add(mobileOne, mobileTwo, mobileThree, mobileFour, mobileFive)
    Else
        ' Create a new DataTable for initial load or if no existing data exists
        ChannelTable = New DataTable
        ChannelTable.Columns.Add("Mobile One")
        ChannelTable.Columns.Add("Mobile Two")
        ChannelTable.Columns.Add("Mobile Three")
        ChannelTable.Columns.Add("Mobile Four")
        ChannelTable.Columns.Add("Mobile Five")
        ChannelTable.Rows.Add(mobileOne, mobileTwo, mobileThree, mobileFour, mobileFive)
    End If
    
    DataGrid1.DataSource = ChannelTable
    DataGrid1.DataBind()
End Sub

' Button click handler to trigger data append
Protected Sub btnSubmit_Click(sender As Object, e As EventArgs)
    GetCustomerAlternateChannels(True) ' Pass True to append new data
End Sub

Step 2: Update the Frontend with Partial Refresh Support #

Wrap your button and DataGrid in an UpdatePanel (you'll also need a ScriptManager to enable ASP.NET AJAX functionality):

<div class="purplebackground" style="color:#ffffff; margin-top: 5px; font-size: 12px">
    <p style="font-weight: 700; margin-left: 10px; font-size: 14px;">Alternate Channel </p>
    
    <!-- Required for ASP.NET AJAX partial updates -->
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    
    <!-- Wrap controls in UpdatePanel to enable partial page refresh -->
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="btnSubmit" runat="server" CssClass="button_alt_2" Text="Submit" OnClick="btnSubmit_Click" />
            <asp:DataGrid ID="DataGrid1" runat="server" style="width: 100%; margin-top: -8px; font-weight: 600; border: 1px solid #5c2684;">
            </asp:DataGrid>
        </ContentTemplate>
        <Triggers>
            <!-- Explicitly map the button click to an async postback -->
            <asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>
</div>

Key Notes: #

• Partial Refresh: The UpdatePanel ensures only the content inside it refreshes when the button is clicked—no full page reload.
• Append Logic: The appendData parameter lets us decide whether to add to existing data or start fresh.
• Typo Fixes: The original code had misspelled property names (mobileThreStatus, mobileFourtatus) which would have thrown errors—these are corrected here.
• Initial Load: If you want to show data when the page first loads, add this to your Page_Load method:

  Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
      If Not IsPostBack Then
          GetCustomerAlternateChannels(False) ' Load initial data without appending
      End If
  End Sub
  

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