Button ASP.NET Server Control
Button ASP.NET Server Control"-->
| only for RuBoard |
Button ASP.NET Server Control
A button is used by nearly all user interface applications, and its function is the same across every application. A button lets a user choose an option, tell the application she is done with a task, or exit an application. The ASP.NET Button server control is no different. The Button control comes in three flavors:
-
Button ” Renders as a typical HTML Button
<Input Type"="Button"">
-
LinkButton ” Renders as a hyperlink
-
ImageButton ” Renders as an image for your Button
All three of the buttons do the same thing; they cause an HTML form to be submitted back to the server when it is clicked. However, ASP.NET adds an additional feature that enables you to call methods on the server on the post back. Later in this section, I'll demonstrate this functionality in detail. In the following sections we will go through each of the three button types, illustrating how to use each and how to use some of their attributes to effect the way they are rendered.
Button
The first of the three different types of buttons looks like a typical HTML button that you can render by inserting <input type="button"> into your code. Listing 8.1 shows how to use the Button control.
Listing 8.1 Using the Button Control
01: <html> 02: <body> 03: <form runat="server"> 04: <h3>Button Server Control - Button</h3> 05: <asp:button id="Button1" 06: runat="server" 07: BackColor="maroon" 08: ForeColor="white" 09: BorderWidth="2" 10: BorderStyle="Solid" 11: BorderColor="Black" 12: Font-Bold="true" 13: Text="Click Me" 14: Width="200" 15: /> 16: </form> 17: </body> 18: </html>
The server-side code and the HTML code rendered to the page are quite different. The following bit of code is the ASP.NET server control when the page is requested and rendered:
01: <input type="submit" name="Button1" value="Click Me" 02: id="Button1" style="color:White;background-color:Maroon; 03: border-color:Black;border-width:2px;border-style:Solid; 04: font-weight:bold;width:200px;" />
Code is converted into legitimate HTML and style code behind the scenes. Slick? I think so!
LinkButton
The second type of button is the LinkButton and it has all the same members of the button type, but instead of a typical button showing up, a hyperlink is rendered. You can test it using the same code from Listing 8.1, but replacing lines 5 “15 with the code from Listing 8.2.
Listing 8.2 LinkButton Control
01: <asp:LinkButton id="Button1" 02: runat="server" 03: ForeColor="Maroon" 04: Font-Bold="true" 05: Text="Click Here" 06: />
If you were to view the source on the rendered page when using the LinkButton, you would see the following code:
01: <html> 02: <body> 03: <form name="ctrl0" method="post" action="Listing8.2.aspx" id="ctrl0"> 04: <input type="hidden" name="__VIEWSTATE" value="dDwtMTAwOTA0ODU1NTs7Pg=="/> 05: 06: <h3>Button Server Control - LinkButton</h3> 07: <a id="Button1" href="javascript:__doPostBack('Button1','')" style="color: 
Maroon;font-weight:bold;">Click Here</a> 08: 09: <input type="hidden" name="__EVENTTARGET" value="" /> 10: <input type="hidden" name="__EVENTARGUMENT" value="" /> 11: <script language="javascript"> 12: <!-- 13: function __doPostBack(eventTarget, eventArgument) { 14: var theform = document.ctrl0 15: theform.__EVENTTARGET.value = eventTarget 16: theform.__EVENTARGUMENT.value = eventArgument 17: theform.submit() 18: } 19: // --> 20: </script> 21: </form> 22: </body> 23: </html> Not only is the LinkButton translated into HTML and text, but it adds JavaScript to the page to post the form back to the server when the link is clicked. Can it get any easier?
Note
The HTML that is rendered by your browser might be different from mine depending on what type and version of browser you have.
ImageButton
The last of the three types of button controls is the ImageButton . It too has the same members as the previous two buttons, but also has some of its own unique attributes associated with it:
-
AlternateText Used to get or set the alternate text in the event the image that should be displayed cannot be ”for example: AlternateText="Putting The Dot in .NET"
-
ImageAlign Used to get or set the alignment of the image when rendered ”for example: Left, Right, BaseLine, Top, or NotSet (default) ” ImageAlign="Left"
-
ImageUrl Used to get or set the location of the image to display ”for example: ImageUrl="myimages/dotnetjunkieslogo.gif"
Again you can just replace lines 5 “15 of Listing 8.1 with the following code.
Listing 8.3 An example Using the ImageButton
01: <asp:imagebutton id="Button1" 02: runat="server" 03: BorderWidth="0" 04: AlternateText="Putting the Dot In .NET" 05: ImageUrl="http://www.dotnetjunkies.com/images/dnj_logo2.gif" 06: />
If you were to view the source on the rendered page when using the ImageButton, you would see the code for the ImageButton rendered as the following:
01: <input type="image" name="Button1" id="Button1" 02: src="http://www.DotNetJunkies.com/images/dnj_logo2.gif" 03: alt="Putting the Dot In .NET" style="border-width:0px;" />
The ImageButton is converted into an INPUT element of the type image .
Handling Button Events
You will most likely be using one of the Button controls for users to submit a form to the server, whether it is to submit data or make some kind of selection. When a Button control is clicked and the form is posted back to the server there are certain events that can be raised and handled. Although there are other events raised when a button control is clicked ( Command ), in this section we will go over the Click event ”the Command event will be discussed later in the book.
When you want to handle the Click event you set the Buttons OnClick attribute equal to the method you want to use as the event handler. Listing 8.4 demonstrates how to handle the Button Controls Click event. Additionally, the code example will illustrate how to programmatically manipulate some properties of the Buttons on the server.
Listing 8.4 Handling the Button Controls Click Event
[VisualBasic.NET] 01: <script runat="server" language="vb"> 02: 03: public sub Button1_Click(sender as Object, e as EventArgs) 04: 05: message.Text = "Button Has Been Clicked" 06: Button1.Text = "Been Clicked" 07: 08: end sub 09: 10: public sub LinkButton1_Click(sender as Object, e as EventArgs) 11: 12: message.Text = "Link Button Has Been Clicked" 13: LinkButton1.Text = "Been Clicked" 14: 15: end sub 16: 17: public sub ImageButton1_Click(sender as Object, e as ImageClickEventArgs) 18: 19: message.Text = "Image Button Has Been " & _ 20: "Clicked at X = " + e.X.ToString() + " Y = " + e.Y.ToString() 21: 22: ImageButton1.ImageUrl = "http://msdn.microsoft.com/msdn-online/shared/graphics/
When the code example in Listing 8.4 initially renders, you will receive a page similar to that in Figure 8.1.
Figure 8.1. The three types of Button controls ” Button , LinkButton , and ImageButton .
On the top of the page is the Button that reads "Click Me". Below that is the LinkButton that reads "Click Here", and finally is the ImageButton with an image of our logo, DotNetJunkies.com.
Click each one. As you click you'll notice that the text in the Label control changes ”the Label control is located at the top of the page above the first Button. Also, the text of the LinkButton and Button is changed to "Been Clicked" and the ImageButton 's image is changed from our DotNetJunkies.com logo to MSDN's .NET logo. Now that you have seen how things are working cosmetically, let's see how they are working on the server.
The Button control can be found in lines 36 “47. Its Click event is handled by Button1_Click (lines 3 “8); the Button is wired together with the event handler by setting the OnClick attribute equal to Button1_Click (line 46). When the Click event is handled, two things happen. First, the message Label control's Text attribute is changed to "Button Has Been Clicked" and the Text attribute of the Button is changed to "Been Clicked". The LinkButton behaves exactly the same as the Button as far as how the Click event is handled (setting the OnClick attribute) and the actions taken once the event is handled.
You will notice a difference in the ImageButton 's event handler (lines 17 “24). In the Button and LinkButton Click , the two parameters passed in are Object and the EventArgs . The ImageButton 's parameters are Object and ImageClickEventArgs . This is because additional information is passed in that is not applicable to the other two Buttons . This information is specific to the image that is clicked ”the XY coordinates of where the image was clicked by the client. These coordinates would come in handy for image mapping ”the method of breaking an image into sectors. In this example, when the ImageButton is clicked, I print out its X and Y coordinates of where the image was clicked in the Label and change the ImageUrl attribute. Figure 8.2 contains the page after all three buttons are clicked. The Label control contains the data from the ImageButton .
Figure 8.2. All three buttons have been clicked. Notice that the ImageButton 's XY coordinates are printed out as well.
Binding a Button to a Data Source
The Button controls don't have a DataSource property, but you can certainly bind the attributes of the Button to fields from your data source. For instance, you can bind the name of a product from your data source to the Text attribute of the Button as seen in Listing 8.5.
Listing 8.5 Binding a Button 's Text Attribute
[VisualBasic.NET] 01: <script runat="server" language="vb"> 02: 03: public sub Page_Load(sender as Object, e as EventArgs) 04: 05: DataBind() 06: 07: end sub 08: 09: public function ButtonText() as string 10: 11: return "Click Here" 12: 13: end function 14: 15: 16: </script> [C#.NET] 01: <script runat="server" language="C#"> 02: 03: void Page_Load(Object sender, EventArgs e){ 04: 05: DataBind(); 06: 07: } 08: 09: public string ButtonText() { 10: 11: return "Click Here"; 12: 13: } 14: 15: 16: </script> [VisualBasic.NET & C#.NET] 17: <html> 18: <body> 19: <form runat="server"> 20: <asp:label id="message" 21: runat="server" 22: Font-Size="10" 23: /> 24: 25: <p> 26: <asp:button id="Button1" 27: runat="server" 28: BackColor="maroon" 29: ForeColor="white" 30: BorderWidth="2" 31: BorderStyle="Solid" 32: BorderColor="Black" 33: Font-Bold="true" 34: Text='<%# ButtonText() %>' 35: Width="200" 36: /> 37: 38: </form> 39: </body> 40: </html> Although a very simple example, Listing 8.5 illustrates how to make attributes of controls data bound. In this example I bind the Text attribute (line 34) to a function which returns a string ”"Click Here" (lines 9 “13). Always remember to invoke the Page.DataBind method (line 5) ”if this isn't called then data binding will not take place and the text for the Button will be blank. When invoked, the Page.DataBind method causes all databinding syntax to be evaluated. Databinding expressions are contained between the <%# and %> characters .
| only for RuBoard |
EAN: 2147483647
Pages: 170