Button Tips And Tricks: Part II

Introduction

In this article we are going to learn how to access the CommandArguments of the button, how to fire JavaScript function on click on the Button and prevent the Form submission, how to avoid multiple clicks while submitting the form on the server, how to post a page to another page in ASP.NET, how to specify the Tab index for the TextBox, Button or any other ASP.Net form control, how to specify the Tooltip for the ASP.NET Server controls and how to specify a default button on the page so that when user hits the Enter key that button gets clicked.

Let's learn all the above mentioned tips and tricks one by one. 

How to access the CommandArguments of the button?

In case we want to set an optional parameter for the button to determine some values in the server side code, we can use this approach.

CommandArguments is a way to get or set optional parameters to the command events along with CommandName.

ASPX PAGE

  <p>

        <asp:Button ID="Button4" runat="server" Text="Sort in Ascending Order"

            CommandName="Sort"

            CommandArgument="Ascending" OnCommand="SortData" /></p>

    <p>

        <asp:Button ID="Button5" runat="server" Text="Sort in Descending Order"

            CommandName="Sort"

            CommandArgument="Descending" OnCommand="SortData" /></

CODE BEHIND 

 protected void SortData(object sender, CommandEventArgs e)

     {

         string commandName = e.CommandName;

         if (commandName.Equals("Sort"))

         {

             var commandArguments = e.CommandArgument;

             if (commandArguments.Equals("Ascending"))

             {

                 Response.Write("Sort in ascending order");

             }

             else if (commandArguments.Equals("Descending"))

             {

                 Response.Write("Sort in descending order");

             }

         }

     }

In the above code snippet, I have specified the same CommandName, OnCommand method for both buttons but different CommandArguments. On click of the first button, "Sort in ascending order" is written and on click on second button "Sort in descending order" is written on the page.

How to fire JavaScript function on click on the Button and prevent the Form submission?

In case we want to fire a JavaScript function on click of the button and prevent web form submission, we can use this approach. 

ASPX PAGE

 <p>

        <asp:Button ID="btnSubmit" runat="server" UseSubmitBehavior="false" OnClientClick="return AlertMe()"

            Text=" Show Alert and Do not submit the form" /></p>

    <script language="javascript" type="text/javascript">

        function AlertMe() {

            alert("JavaScript function called");

            return false;

        }

    </script> 

To fire a JavaScript function in the click event of the asp:Button, we can specify the OnClientClick event of the button to the JavaScript function. 

In the above code, I have placed a button with UseSubmitBehavior=false. In most browsers even if we keep UseSubmitBehavior=false, the form is submitted to the server and we will notice a browser refresh. To avoid this, we can place a return statement on the OnClientClick event and in the JavaScript function we can return false. Returning false stops the form being submitted to the server.

How to avoid multiple clicks while submitting the form on the server?

In case we want to avoid multiple clicks while submitting the form on the server we can use this approach. Generally this is used in case of Payment button or financial application to avoid multiple debit or credit however it can also be used in normal applications to avoid duplicate data submission.

 ASPX PAGE

  <form id="form1" runat="server">

    <div>

        <p>Payment amount: <asp:TextBox ID="txtAmount" runat="server" />

        <asp:RequiredFieldValidator ID="req1" runat="server" Text="*"

        ErrorMessage="Mandatory !" ControlToValidate="txtAmount" />

       </p>

       <p>Description: <asp:TextBox ID="txtDescription" runat="server" /> </p>

       <p><asp:Button ID="btnPay" runat="server" Text="Submit" OnClick="SubmitData"/></p>

    </div>

</form>

CODE BEHIND 

  protected void Page_Load(object sender, EventArgs e)

    {

        // Just disable the button after click

        this.btnPay.Attributes.Add("onclick",

       DisableTheButton(this.Page, this.btnPay));

    }

    protected void SubmitData(object sender, EventArgs e)

    {

        System.Threading.Thread.Sleep(5000);

        Response.Write("Amount: " + txtAmount.Text + " | Description: " + txtDescription.Text);

    }

    // ideally you should keep this into any utility class and call it from the page_load event

    public static string DisableTheButton(Control pge, Control btn)

    {

        System.Text.StringBuilder sb = new System.Text.StringBuilder();

        sb.Append("if (typeof(Page_ClientValidate) == 'function') {");

        sb.Append("if (Page_ClientValidate() == false) { return false; }} ");

        sb.Append("this.value = 'Please wait...';");

        sb.Append("this.disabled = true;");

        sb.Append(pge.Page.GetPostBackEventReference(btn));

        sb.Append(";");

        return sb.ToString();

    }

In the above code snippet (aspx), I have two textboxes (Amount and Description). The Amount is mandatory as I have used RequiredFieldValidator with it. I want to avoid the scenario where a user clicks the Pay button multiple times and the amount will be deducted multiple times (in a real scenario).

OUTPUT 
 

To avoid multiple clicks, we can attach a JavaScript onclick event from the code behind and in that event we can specify DisableTheButton server side method that basically writes the JavaScript code that ensures that the Submit event only fires when ASP.NET Validation have successfully passed and the page is ready to be submitted.

If the ASP.Net client side validation is passed, the button text is changed to "Please wait …" and it is disabled to make sure that end user shall not be able to click on this button again and then the normal do Postback events to fires. These normal do Postback events are written because of the GetPostBackEventReference method called in the last but one line in DisableTheButton server side method.

How to post a page to another page in ASP.NET?

In case we want to post a page to another page in ASP.NET we can use this approach.
 

ASPX PAGE

<p><asp:TextBox ID="txtName" runat="server" /></p>

<p><asp:Button ID="Button1" runat="server" Text="Submit to another page" PostBackUrl="~/PosttoAnotherPageResult.aspx" /></p>

<p><asp:LinkButton ID="lnkSubmit" runat="server" Text="Submit to another page" PostBackUrl="~/PosttoAnotherPageResult.aspx" /></p>

 To post a page to another page, we can set the PostBackUrl properties of the asp:Button or asp:LinkButton control.

OUTPUT

Source Page

 

On the target page, we need to retrieve the previous page Form data using Request.Form object.

CODE BEHIND - TARGET PAGE (POSTTOANOTHERPAGERESULT.ASPX)

 protected void Page_Load(object sender, EventArgs e)

{

    if (Request.Form != null)

    {

        Response.Write(Request.Form["txtName"]);

    }

}
Target Page 

How to specify the Tab index for the TextBox, Button or any other ASP.Net form control?

In case we want to specify the tab index to the control so that when the user presses the tab he is navigated to different controls (textbox, dropdown) on the page in a sequence, we can use this approach.

ASPX PAGE

<p><asp:TextBox ID="txtName" runat="server" TabIndex="1" /></p>

<p><asp:TextBox ID="TextBox1" runat="server" TabIndex="3" /></p>

<p><asp:TextBox ID="TextBox2" runat="server" TabIndex="2" /></p>

In the above code, the TabIndex property has been specified to TextBoxes 1, 3 and 2 respectively so if tab key will be pressed from first TextBox the cursor shall jump to third TextBox and then on second TextBox.

This applies to the HTML Form controls as well. 
 

How to specify the Tooltip for the ASP.NET Server controls?

In case we want to specify tooltip for a ASP.Net server controls to give hint to the user about a                             

particular textbox or dropdown etc, we can use this approach. Tooltip appears when user mouse

over that control.

ASPX PAGE

<p><asp:TextBox ID="txtName" runat="server" TabIndex="1" ToolTip="Please enter search keyword" /></p>

<p><asp:TextBox ID="TextBox1" runat="server" TabIndex="3" /></p> 

OUTPUT
 

 

To apply the Tooltip for the button or any other ASP.Net server controls, the Tooltip property can be set. As displayed in the above code snippet, I have set "Please enter search keyword" as Tooltip for the first textbox and that is displayed as tooltip to the end user when he/she mouses over it.

How to specify a default button on the page so that when user hits the Enter key that button gets clicked?

In case we have multiple buttons on the data entry page and we want to specify a default button so that when the user hits the enter key after entering data then the default button gets clicked automatically, we can use this approach. 

ASPX PAGE

<form id="form1" runat="server" defaultbutton="Button5">

   <div>

     <p><asp:TextBox ID="txtName" runat="server" TabIndex="1" ToolTip="Please enter search keyword" /></p>

    <p><asp:TextBox ID="TextBox1" runat="server" TabIndex="2" /></p>

    <p><asp:Button ID="Button1" runat="server" Text="Button 1" OnClick="SubmitData" CommandName="Command1" />

    <asp:Button ID="Button2" runat="server" Text="Button 2" OnClick="SubmitData" CommandName="Command2" />

    <asp:Button ID="Button3" runat="server" Text="Button 3" OnClick="SubmitData" CommandName="Command3" />

    <asp:Button ID="Button4" runat="server" Text="Button 4" OnClick="SubmitData" CommandName="Command4" />

    <asp:Button ID="Button5" runat="server" Text="Submit" OnClick="SubmitData"  CommandName="Command5" /></p>

  </div>

</form>

CODE BEHIND

protected void SubmitData(object sender, EventArgs e)

{

    Button btn = (Button)sender;

    Response.Write(btn.CommandName);

}

To specify the default button, we can specify the defaultbutton attribute of the Form element. In the above code snippet, we have 5 buttons and we have specified a defaultbutton to "Button5" so the 5th button shall be active and when use hits enter key after entering the data into the form the 5th button fires. As we have attached SubmitData method to all 5 buttons (you can attach different methods as well) so the same method fires on click of every button and write its CommandName on the page.

OUTPUT
 

Thanks for reading ! Do let us know your feedback.