Button Tips and Tricks Part-I

Introduction

Button control is usually used to submit the HTML form (in this case we can say asp.net) to the server. Apart from this we can also perform some client side operations on click of the button.

I have written hundreds of ASP.NET, jQuery, HTML, CSS and JavaScript How to Tips and Tricks, click here to get them all.

How to fire Server Side method on click of the button?

In case we want to fire a server side method on click of a button, we can use this approach. 

To fire the server side event on click of the button, we need to specify a method name on OnClick event of the button and then declare that method in the code behind.

ASPX PAGE

<p>Enter your name:<asp:TextBox ID="txtBox1" runat="server" /></p>
<p><asp:Button ID="btnSubmit" runat="server" Text="Submit" 
OnClick="SubmitData" /></p>
 

CODE BEHIND

 
protected void SubmitData(object sender, EventArgs e)
{
Response.Write("Your name is : " + txtBox1.Text);
}

OUTPUT

In the above code snippet, on click of the “btnSubmit”, the SubmitData method fires that write the text entered into the textbox on to the page by suffixing to “Your name is “.

How to access the CommandName property of the asp:Button (using OnCommand event) and what is the use of it?

In case we want to execute a single server side method on click of multiple buttons and want to differentiate which button was clicked, we can use this approach.

CommandName property can be used to determine which button is clicked in case we have multiple buttons on the page and firing the same method.

ASPX PAGE

<p><asp:Button ID="Button1" runat="server" Text="Insert" CommandName="Add" OnCommand="SubmitData" /></p>
<p><asp:Button ID="Button2" runat="server" Text="Update" 
CommandName="Modify" OnCommand="SubmitData" /></p>
<p><asp:Button ID="Button3" runat="server" Text="Delete" 
CommandName="Remove" OnCommand="SubmitData" /></p>
 

CODE BEHIND

protected void SubmitData(object sender, CommandEventArgs e)
 {
string commandName = e.CommandName;
switch (commandName)
{
        case "Add":
           Response.Write("write insert code");
           break;
        case "Modify":
           Response.Write("write update code");
           break;
        case "Remove":
           Response.Write("write delete code");
           break;
   }
}
 

In the above code snippet, we have three buttons with same OnCommand event but different CommandName. To identify which button is clicked, we can access the CommandName property of theCommandEventArgs object and determine what to do. In this case, on click of Insert button, “write insert code” message is displayed and on click on Update button, “write update code” message is displayed and so on.

OnCommand is generally used in case of event bubbling (button is kept inside another control like GridView, DataList etc.).

How to access the CommandName property of the asp:Button (using OnClick event) and what is the use of it?

In case we want to specify a single server side method to execute on click on more than one button and want to determine which button was clicked, we can use this approach.

ASPX PAGE

    <div>
        <p><asp:Button ID="Button1" runat="server" Text="Insert" CommandName="Add" OnClick="SubmitData" /></p>
        <p><asp:Button ID="Button2" runat="server" Text="Update" CommandName="Modify" OnClick="SubmitData" /></p>
        <p><asp:Button ID="Button3" runat="server" Text="Delete" CommandName="Remove" OnClick="SubmitData" /></p>
   </div>
 

CODE BEHIND

protected void SubmitData(object sender, EventArgs e)
{
Button btn = (Button) sender;
string commandName = btn.CommandName;
switch (commandName)
  {
   case "Add":
      Response.Write("write insert code");
      break;
   case "Modify":
      Response.Write("write update code");
      break;
   case "Remove":
      Response.Write("write delete code");
      break;
  }
}
 

In the above code snippet, we have three buttons with same OnClick event but different CommandName. To identify which button is clicked, we can type cast the sender object to the button (that gives access of the button control that fires the event) and access the CommandName property. In this case, on click of Insert button, “write insert code” message is displayed and on click on Update button, “write update code” message is displayed and so on.

Thanks for reading ! If you like this simple article subscribe to the RSS feed to get the new article alert directly in your inbox.

If you like this article, subscribe to our RSS Feed. You can also subscribe via email to our Interview Questions, Codes and Forums section.