Preventing page refresh from button in ASP.NET

Question

I'm trying to display GridView on a jquery dialog. To bind data into gridview , i'm clicking button via jquery as below.

$('#' + '<%= btnBindGridViewData.ClientID %>').trigger("click");

But with this button click, page is refresh. so jquery dialog is disappearing.

Button

<asp:Button runat="server" ID="btnBindGridViewData" OnClick="btnBindGridViewData_Click" Style="visibility: hidden;
    display: none;" />

Code Behind

protected void btnBindGridViewData_Click(object sender, EventArgs e)
{
    //bind data into gridview from here
}

via jquery, click button as below.

$('#' + '<%= btnBindGridViewData.ClientID %>').trigger("click");

above code trigger click event of button and execute btnBindGridViewData_Click() and bind data into gridview .

Is there any way to prevent page refresh with button click and display gridview on jquery dialog ?

Answer 1

This won't work.

You have written logic of binding gridview in code behind file. In order for code behind file to execute, the page needs to refresh (post back)

You could stop the button from refreshing the page ( onclick = "return false;" ), but that would not execute your click event on server. You need to rethink your approach.

One way to run gridview on jQuery dialog is that you could set a hidden variable on page (to indicate that the button is clicked) and then in document ready you can open the jQuery dialog.

$(document).ready(function(){
  // if flag == true, open dialog
});

Note: I won't recommend this approach though.

Answer 2

Achieved using UpdatePanel as below.

<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="btnBindGridViewData" EventName="Click" />
  </Triggers>
  <ContentTemplate>
      //GridView here
  </ContentTemplate>
</asp:UpdatePanel>