ASP.NET Solutions: Submitting and Running JavaScript off a Button Control


This question has come up quite a bit over the past few months, although it is generally asked with a solution already in mind, ie “how do I fix this code to do what I want it to do”. As with many things, fixing the code is not always the best option, as you end up tying the problem to the proposed solution. So, I have this one down to a single question “How do I submit a page, run code on the server, and still fire a JavaScript routine"?” Problem identified:

Server Primacy

By server primacy, I mean that the server decides whether or not the client code runs. This option is useful if you are running both pieces of code regardless, or if the client code may not run under certain conditions.

ASPX page code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Label ID="messageLabel" runat="server">Click the button</asp:Label><br />
    <asp:Button ID="submitButton" runat="server" Text="Click Me!"
        onclick="submitButton_Click" />
    </form>
</body>
</html>

Code Behind (C#):

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Text;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void submitButton_Click(object sender, EventArgs e)
    {
        messageLabel.Text = "You clicked me!";

        string myScript = GetClientPopupScript();

        Page.RegisterClientScriptBlock("popupScript", myScript);
    }

    private string GetClientPopupScript()
    {
        StringBuilder builder = new StringBuilder();
        builder.Append("<script type="text/javascript">rn");
        builder.Append("alert(‘I popped something up!’);rn");
        builder.Append("</script>rn");

        return builder.ToString();
    }
}

When you run this, the popup will appear before any changes are shown. If you want the popup after the change is shown, change this line:

Page.RegisterClientScriptBlock("popupScript", myScript);

to

Page.RegisterStartupScript("popupScript", myScript);

That will reverse the order of the popup and the changes being shown. From this point, you can make the JavaScript conditional.

Client Side Primacy

What if you have to have the client side determine whether or not the server side code runs? There are a couple of ways of handling this, but my favorite is the simplest. It involves adding an attribute to the button control.

protected void Page_Load(object sender, EventArgs e)
{
    submitButton.Attributes.Add("onClick", "javascript:if(confirm(‘Are you sure everything is correct?’)== false) return false;");
}

This is by far the simplest way. Pretty much any short script can be done here, as this shows:

protected void Page_Load(object sender, EventArgs e)
{

    submitButton.Attributes.Add("onClick", "javascript:alert(‘I poppped up before submit!’);");
}
 

Want a whole litany of stuff to run to confirm, then put the code in a routine and have a Page_Load like this:

protected void Page_Load(object sender, EventArgs e)
{
    submitButton.Attributes.Add("onClick", "javascript:if(confirmButton() == false) return false;");
}

Or, more simply:

protected void Page_Load(object sender, EventArgs e)
{
    submitButton.Attributes.Add("onClick", "javascript:return confirmButton();");
}

Either of these will run the following routine:

function confirmButton() {
    return confirm(‘Are you sure everything is correct?’);
}

But the routine can be as complex as needed.

Another option is the <asp:Button> OnClientClick, but I was not able to get a sample up running quickly, so I ditched that method. If you want to play in that direction, feel free.

Peace and Grace,
Greg

Twitter: @gbworld

Advertisements

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

%d bloggers like this: