How to append to DataGrid on button click without page reload in VB

0
votes

I have a method that returns strings from DB, this is added to the Datagrid initially. Now I want to change the implementation so that after the is fully rendered, users can click on a button and append the strings to Datagrid without reloading the page again.

   Private Sub GetCustomerAlternateChannels()

        Dim accountNo = GenericManager.decryptQueryString(Request.QueryString("AccountNumber"))
        Dim CustomerChannels = GetCustomerDetails(accountNo)
        Dim mobileOne As String = CustomerChannels.mobileOne + "/" + CustomerChannels.mobileOneStatus
        Dim mobileTwo As String = CustomerChannels.mobileTwo + "/" + CustomerChannels.mobileTwoStatus
        Dim mobileThree As String = CustomerChannels.mobileThree + "/" +CustomerChannels.mobileThreStatus
        Dim mobileFour As String = CustomerChannels.mobileFour + "/" + CustomerChannels.mobileFourtatus
        Dim mobileFive As String = CustomerChannels.mobileFiveStatus



        Dim ChannelTable As 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 )
        DataGrid1.DataSource = ChannelTable
        DataGrid1.DataBind()
    End Sub

This is the view. I want users to click on this button to get "<asp:Button ID="btnSubmit" runat="server" CssClass="button_alt_2" Text="Submit" OnClick="btnSubmit_Click" />" and call the above method and append without reloading the page

 <div class="purplebackground"  style="color:#ffffff; margin-top: 5px; font-size: 12px">
             <p  style="font-weight: 700; font-weight: 700; margin-left: 10px; font-weight: normal; font-size: 14px;">Alternate Channel </p>   
                <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> 
        </div>
2
asp.netajaxvb.netwebformsasp.net-ajax

2 Answers

1
votes

I got it to work with asp:UpdatePanel All I did was to wrap the datagrid with asp:UpdatePanel and create a click event

<asp:UpdatePanel ID="UpdatePanel4" runat="server" class=""  style="color:#ffffff; margin-top: 5px; font-size: 12px">
    <ContentTemplate>
       <p  style="font-weight: 700; font-weight: 700; margin-left: 10px; font-weight: normal; font-size: 14px;">Channels<span> <asp:Button ID="availableChannel" runat="server" Text="Get channels"  CssClass="tdcolor" /> </span></p>
          <asp:DataGrid ID="DataGrid1" runat="server" style="width: 100%; margin-top: -8px; font-weight: 600; border: 1px solid #5c2684;">  
          </asp:DataGrid>         
    </ContentTemplate>
</asp:UpdatePanel>
-1
votes

Use Update panel to avoid post back.

 <asp:UpdatePanel ID="UpdatePanel4" runat="server">
    <ContentTemplate>

    // Write your code here

    </ContentTemplate>
  </asp:UpdatePanel>