Disable load page on button click

Question

I am trying to fill a gridView in asp.net when search imgButton is clicked. The problem is that whenever I click on this button, page enters in load event before reaching the event that handles the search click. I found some solutions:

I added an onclick="function();return false;" which is working perfectly but my I cannot reach my click event handled in code behind anymore, and I cannot reach my database from javascript.
I have found a solution like:

If not postback then
do something ..
Else
do something else ..
End IF

but still the page is refreshing and is entering in load event.
I tried to set causesValidation = false but still load event is reached
I tried also to change the gridView To AjaxData GridView, and calling a webservice from javascript function to fill my new Grid View, but I am now facing errors with AjaxData itself in design, pagination DataSource... and I cannot find useful documentations about it ..

So how can I get data and fill my gridView without loading my page? Below is my code before making the changes mentioned above:

In codeBehind:

Protected Sub btnSearch_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSearch.Click
        Try
           If Page.IsValid Then
            provider = New DataProvider
            Me.grdvUserInfo.DataSource = provider.ShowLoginUser(_userName, _providerName, _ip, _dateTimeInFrom, _dateTimeInTo, 0, 20)
            Me.grdvUserInfo.DataSourceID = ""
            Me.grdvUserInfo.DataBind()
            provider.Dispose()
           End If
        Catch ex As Exception
      End Try
    End Sub

I really really appreciate any help ...

DiegoS · Accepted Answer

ASP .NET Page Life Cycle:

The first thing you need to know is how the life cycle of a page works in ASP .NET Web Forms. Check Page Life Cycle. With this "rules" in mind, every time you click on the search button the following methods will execute:

1) Page pre init

2) Page init

3) Page init complete

4) Page pre load

5) Page Load

6) Event control. That's your btnSearch_Click method (Eureka!)

In this case you should not worry about events in 1-4. But you should do the following in your Page_Load event so the code inside doesnt execute more than once:

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //Do things only when page loads for the first time. 
        }
    }

So it just skips the execution of the code to the next step in the page life cycle (6, Event Control, aka btnSearch_Click).

Update Panel Control:

With these steps in mind, i would suggest you to use the Microsoft Ajax suite, particulary the ASP .NET control Update Panel which will make you search data in gridview without loading the whole page.

The full code looks like this:

To use UpdatePanel control you must include ScriptManager control, also if to indicate who is the control making the asyncronous postback you should use the AsyncPostbackTrigger property.

Web Methods:

There's another workaround if you REALLY want to skip the lifecycle (Page_Load event and others).

You can use Web Methods, Web Methods are methods in the server side accesible by javascript where you can even go to the database, but the disavantage is that there's no ViewState in these Web Methods because they are static so you cannot access directly to the grid making DataSource or Databind. You can try calling a WebMethod via ajax and then populate your grid in javascript but that's to complicated i will advise you to just swallow the page life cycle as it is. Check this sample of web methods for more info: Calling ASP.Net WebMethod using jQuery AJAX

Disable load page on button click

Answers (1)

ASP .NET Page Life Cycle:

Update Panel Control:

Web Methods:

Related Questions