Call a JavaScript Function After an ASP.NET Save Event

Why/How

It can be useful to be able to call a JavaScript function after an ASP.NET event has completed, but it is not immediately intuitive how this can be done.

Adding an onClientClick event to an ASP.NET button control will execute the JavaScript call before the ASP.NET server side code executes, so an alternate solution is required.

For example today I was working on a WebForms page that has a Gridview presenting data, and that displays a detailed form page for each row in the GridView in an IFrame when one of the GridView rows is clicked. I use a FormView to handle the detailed form page information.

After editing the data contained in the detailed form page, a user can click the save button at which point the FormView’s ASP.NET Update event is triggered, and then subsequently the button’s click event fires.

To recap: after the .NET button ItemUpdating click event executes I want the GridView of the parent page to refresh itself to display the modified data, which is not easily possible in ASP.NET, but is quite straightforward in JavaScript.

So, I set up the ASP.NET button click event in the traditional way:

<asp:LinkButton ID="btUpdateButton" runat="server" CausesValidation="True"
CommandName="Update" Text="Update" OnClick="btUpdateButton_Click" />

And of course the actual ASP.NET event handler also in the traditional way:

 Protected Sub btUpdateButton_Click(sender As Object, e As System.EventArgs)
 End Sub

Solution:

When the click event executes, the FormView Update event has already taken place and saved the form results. Therefore one can register a JavaScript call that is dynamically built at the server side using the  ‘ClientScript.RegisterStartupScript(‘ method.

So here is the code I added to my ASP.NET update button’s click event:

Protected Sub btUpdateButton_Click(sender As Object, e As System.EventArgs)
 Dim strValue As String = CType(btFVContractDetailByDetail.FindControl("btValueIdTextBox"), TextBox).Text
 Dim strValueDetail As String = btHdnValueDetailId.Value
 Dim sb As StringBuilder = New StringBuilder()
 sb.Append("<script>")
 sb.Append("parent.RefreshWithReference('" & strValue & "','" & strValueDetail & "');")
 sb.Append("</scri")
 sb.Append("pt>")
 ClientScript.RegisterStartupScript(Me.GetType, "SaveComplete", sb.ToString())
 End Sub

As you can see in the code above, a call to a JavaScript function that exists on the parent frame is registered in the ASP.NET Click event of the child frame. The JavaScript function can then handle the logic of updating itself and it’s child frame (if necessary) based on the parameters passed to it as part of the reload.

Here is an example of the JavaScript function that gets called on the parent page:

 function RefreshWithReference(strValueId,strValueDetailId) {
 var selfLocation = 'ValueDetailInfo.aspx?valueId=' + strValueId + '&valueDetailId=' + strValueDetailId;
 self.document.location.href = selfLocation;
 }

Conclusion:

It can be useful to have the ability to call a client-side JavaScript function after an ASP.NET event has completed execution. This gives the programmer the ability to harness the power of both the server-side and the client side code, and gives the programmer finer control over the behavior of their Web application.

In my example I made good use of the ability to call client-side JavaScript after an ASP.NET button click event in order to have a details form located within an IFrame call its parent page with parameters in order for the parent page to be able to do a smart refresh of itself.

I hope this example has been useful in illustrating the power of server-side ASP.NET integration with client-side JavaScript.

Advertisements

2 thoughts on “Call a JavaScript Function After an ASP.NET Save Event

  1. Excellent article Justin. I learned a lot from it.

    Your statement:
    “Adding an onClientClick event to an ASP.NET button control will execute the JavaScript call before the ASP.NET server side code executes, so an alternate solution is required.”

    really wraps up how important it is to be aware of this solution. It is now part of my knowledge base. Thank you!!

    Luvy

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s