ASP.Net Web Developer Guide |
||||||||
|
||||||||
Sitemap : Content in Chapter 1 |
Content in Chapter 2 |
Content in Chapter 3 |
||||||||
|
||||||||
Tuesday, March 14, 2006
A Simple Application Using Conventional HTML Controls(Chapter3)
In our previous example, we have preserved the state of the list box. Of course, the ASP.NET framework has assisted us in doing so. Now, how does the system map the server controls, and how does it preserve the states of the controls? Answers to both of these questions are actually available in the source document received by the client. Once we run the application, we may view the source code received by our browser using the View Source menu of Internet Explorer.The contents of the source code are shown in Figure 3.9. In this figure, please note that the system has mapped our asp:listbox control to a conventional HTML <select name=“ctrl1” size=“3”> tag.The system has also added an <input type=“hidden”> tag with many attributes.
Figure 3.9 The Source Code of the Document Received by the Browser
It is via this hidden field that the system transfers the user-given values to the server. In summary, the server controls are mapped to standard HTML controls, and the ASP.NET employs hidden fields to maintain the states of the controls.
Including Scripts in an .aspx File
So far our examples have been very simple, and we have not yet included any script in the examples. In the previous exercise (Figure 3.8), we have hard-coded the values of the list box in its definition. Suppose that we need to load the list box via code.We will need to do that when the values to be loaded are unknown during the design time, and would come from an external source like a text file, an XML document, or from a database query. Although we will not venture into the XML or database topics right now, it is still beneficial to know how to load the list box programmatically.This is what we will do in our next example.
Loading a List Box via Script
In this example we will accomplish two objectives. First, we will load the list box via code. Secondly, we will provide a command button.The user will select a flower and then click the button. On the click() event of the button we will display his or her selection.The output of the example is shown in Figure 3.10.
Figure 3.10 The Output Generated by Figure 3.11
The complete listing of the code is shown in Figure 3.11, which can also be found on the CD that accompanies this book. In the code, the following statements are of major interests:
Figure 3.9 The Source Code of the Document Received by the Browser
It is via this hidden field that the system transfers the user-given values to the server. In summary, the server controls are mapped to standard HTML controls, and the ASP.NET employs hidden fields to maintain the states of the controls.
Including Scripts in an .aspx File
So far our examples have been very simple, and we have not yet included any script in the examples. In the previous exercise (Figure 3.8), we have hard-coded the values of the list box in its definition. Suppose that we need to load the list box via code.We will need to do that when the values to be loaded are unknown during the design time, and would come from an external source like a text file, an XML document, or from a database query. Although we will not venture into the XML or database topics right now, it is still beneficial to know how to load the list box programmatically.This is what we will do in our next example.
Loading a List Box via Script
In this example we will accomplish two objectives. First, we will load the list box via code. Secondly, we will provide a command button.The user will select a flower and then click the button. On the click() event of the button we will display his or her selection.The output of the example is shown in Figure 3.10.
Figure 3.10 The Output Generated by Figure 3.11
The complete listing of the code is shown in Figure 3.11, which can also be found on the CD that accompanies this book. In the code, the following statements are of major interests:
- We have added a Page Declaration:
<%@ page language="VB" debug="true" %>
- At the initial stage, the debug=“true” helps us a lot by providing detailed explanations of our errors during the run-time.The debug=“true” specification drains the system’s resources, and hence, we should delete it from our finished work.
- We have defined an asp:button and “wired up” its click event with a subprocedure named showSelection() as the following:
<asp:button id="btnSubmit" runat="server" text="Submit"
onclick="showSelection" />
_ The list box is loaded in the Page_Load event as follows:
Sub Page_Load(source As Object, e As EventArgs)
lstFlowers.Items.Add(New ListItem("Tulip"))
lstFlowers.Items.Add(New ListItem("Poppy"))
lstFlowers.Items.Add(New ListItem("Iris"))
lstFlowers.SelectedIndex=0 'Selection by default
End Sub
As you can see from the previous code, we are setting “Tulip” as the default selection in the list box. _ Finally, we are displaying the selection in the showSelection procedure:
Sub showSelection(sender As Object, e As EventArgs)
lblMessage.Text ="You have selected " + _
lstFlowers.SelectedItem.Text
End Sub
Figure 3.11 ServerControl2.aspx (ServerControl2.aspx)
<!— Chapter3\ServerControl2.aspx —>
<%@ page language="VB" debug="true" %>
<html><head></head><body><form runat="server">
Select a flower, and then click the submit button please:<br/><br/>
<asp:listbox id="lstFlowers" runat="server" rows="3" /><br/><br/>
<asp:button id="btnSubmit" runat="server" text="Submit" onclick
="showSelection" />
<br/><br/>
<asp:label id=lblMessage runat="server"></asp:Label>
</body></form></html>
<script language="VB" runat="server">
Sub Page_Load(source As Object, e As EventArgs)
lstFlowers.Items.Add(New ListItem("Tulip"))
lstFlowers.Items.Add(New ListItem("Poppy"))
lstFlowers.Items.Add(New ListItem("Iris"))
lstFlowers.SelectedIndex=0 'Selection by default
End Sub
Sub showSelection(sender As Object, e As EventArgs)
lblMessage.Text ="You have selected " +
lstFlowers.SelectedItem.Text
End Sub
</script>
The code appears to be very simple. However, the code still has some intentional bugs.When we run this application, we will observe that the page behaves very erratically. First, irrespective of the selection we make, it will always display “You have selected Tulip”. Secondly, on repeated clicks of the command button, the list box will continue growing with duplicate entries. Now, that is a surprise, isn’t it? Let us try to figure out this strange behavior of the application in our next section!
Using the IsPostBack Property of a Page
An ASPX page is loaded upon each request. In our previous example, when we click the command button, it submits the form back to the server and requests the same page.This phenomenon is known as PostBack.The system will load the page again, and hence, the Page_Load event will take place on every request.That is why, if we run the code shown in Figure 3.11, our list box will keep on growing in size.This is also why the SelectedItem property of the list box will keep on being reset to “Tulip” on each post back.
In this case, we should rather load the list box only once during the first invocation of the page.Wait a minute! If we do not load the list box again, how would it get populated when the page is reloaded? Well, therein lies the beauty of ASP.NET.The server controls automatically retain their values (state-full and not state-less), thus we do not need to load the list box repetitively on successive requests of the page. How do we achieve that? In the Page_Load event, we may use the Page.IsPostBack property as shown in Figure 3.12.
Figure 3.12 Loading a List Box Correctly (ServerControl3.aspx)
<script language="VB" runat="server">
Sub Page_Load(source As Object, e As EventArgs)
If Not Page.IsPostBack Then
lstFlowers.Items.Add(New ListItem("Tulip"))
lstFlowers.Items.Add(New ListItem("Poppy"))
lstFlowers.Items.Add(New ListItem("Iris"))
lstFlowers.SelectedIndex=0 'Selection by default
End If
End Sub
Sub showSelection(sender As Object, e As EventArgs)
lblMessage.Text ="You have selected "+ _
lstFlowers.SelectedItem.Text
End Sub
</script>
Now, go ahead and replace the script in Figure 3.11 with the previous script shown in Figure 3.12.The application will work fine!
AutoPostBack Attributes of Server Controls
In this section, we will illustrate an important behavior of certain server-side controls. Some server-side controls can generate automatic postbacks on selected events That means, to submit a form, we may not have to wait until the user clicks the submit button. For example, the SelectedIndexChange event of an asp:ListBox is an event that is capable of triggering a postback. If we want this mechanism to work, we will have to set the AutoPostBack property of the List box to “True.” To illustrate the AutoPostBack attribute of an asp control, we will revise our flower selection example.We will remove the Submit button (although we could have kept it, too, without any loss of functionality).We will set the AutoPostBack attribute of the list box to be True, and we will attach the showSelection VB function on its onSelectedIndexChanged attribute.When you run this form, every time you select a new flower, the system will display your selection in the label.We do not need the Submit button because the onSelectedIndexChanged event will generate a postback.The output of this application is shown in Figure 3.13, and its code is shown in Figure 3.14
Figure 3.13 A List Box with Its AutoPostBack Property Set to True
Figure 3.14 Complete Code (ServerControl4.aspx)
<!— Chapter3\ServerControl3.aspx —>
<%@ Page Language="VB" Debug="true" %>
<html><head></head><body><form runat="server">
Select a flower, and then click the submit button please:<br/><br/>
<asp:listbox id="lstFlowers" runat="server" rows="3"
AutoPostBack="true" onSelectedIndexChanged="showSelection"/>
<br><br>
<asp:Label id=lblMessage runat="server" /> <br/><br/>
</body></form></html>
<script language=vb runat="server">
Sub Page_Load(source As Object, e As EventArgs)
If Not Page.IsPostBack Then
lstFlowers.Items.Add(New ListItem("Tulip"))
lstFlowers.Items.Add(New ListItem("Poppy"))
lstFlowers.Items.Add(New ListItem("Iris"))
lstFlowers.SelectedIndex=0
End If
End Sub
Sub showSelection(source As Object, e As EventArgs)
lblMessage.Text="You have selected " + _
lstFlowers.SelectedItem.Text
End Sub
</script>
onclick="showSelection" />
_ The list box is loaded in the Page_Load event as follows:
Sub Page_Load(source As Object, e As EventArgs)
lstFlowers.Items.Add(New ListItem("Tulip"))
lstFlowers.Items.Add(New ListItem("Poppy"))
lstFlowers.Items.Add(New ListItem("Iris"))
lstFlowers.SelectedIndex=0 'Selection by default
End Sub
As you can see from the previous code, we are setting “Tulip” as the default selection in the list box. _ Finally, we are displaying the selection in the showSelection procedure:
Sub showSelection(sender As Object, e As EventArgs)
lblMessage.Text ="You have selected " + _
lstFlowers.SelectedItem.Text
End Sub
Figure 3.11 ServerControl2.aspx (ServerControl2.aspx)
<!— Chapter3\ServerControl2.aspx —>
<%@ page language="VB" debug="true" %>
<html><head></head><body><form runat="server">
Select a flower, and then click the submit button please:<br/><br/>
<asp:listbox id="lstFlowers" runat="server" rows="3" /><br/><br/>
<asp:button id="btnSubmit" runat="server" text="Submit" onclick
="showSelection" />
<br/><br/>
<asp:label id=lblMessage runat="server"></asp:Label>
</body></form></html>
<script language="VB" runat="server">
Sub Page_Load(source As Object, e As EventArgs)
lstFlowers.Items.Add(New ListItem("Tulip"))
lstFlowers.Items.Add(New ListItem("Poppy"))
lstFlowers.Items.Add(New ListItem("Iris"))
lstFlowers.SelectedIndex=0 'Selection by default
End Sub
Sub showSelection(sender As Object, e As EventArgs)
lblMessage.Text ="You have selected " +
lstFlowers.SelectedItem.Text
End Sub
</script>
The code appears to be very simple. However, the code still has some intentional bugs.When we run this application, we will observe that the page behaves very erratically. First, irrespective of the selection we make, it will always display “You have selected Tulip”. Secondly, on repeated clicks of the command button, the list box will continue growing with duplicate entries. Now, that is a surprise, isn’t it? Let us try to figure out this strange behavior of the application in our next section!
Using the IsPostBack Property of a Page
An ASPX page is loaded upon each request. In our previous example, when we click the command button, it submits the form back to the server and requests the same page.This phenomenon is known as PostBack.The system will load the page again, and hence, the Page_Load event will take place on every request.That is why, if we run the code shown in Figure 3.11, our list box will keep on growing in size.This is also why the SelectedItem property of the list box will keep on being reset to “Tulip” on each post back.
In this case, we should rather load the list box only once during the first invocation of the page.Wait a minute! If we do not load the list box again, how would it get populated when the page is reloaded? Well, therein lies the beauty of ASP.NET.The server controls automatically retain their values (state-full and not state-less), thus we do not need to load the list box repetitively on successive requests of the page. How do we achieve that? In the Page_Load event, we may use the Page.IsPostBack property as shown in Figure 3.12.
Figure 3.12 Loading a List Box Correctly (ServerControl3.aspx)
<script language="VB" runat="server">
Sub Page_Load(source As Object, e As EventArgs)
If Not Page.IsPostBack Then
lstFlowers.Items.Add(New ListItem("Tulip"))
lstFlowers.Items.Add(New ListItem("Poppy"))
lstFlowers.Items.Add(New ListItem("Iris"))
lstFlowers.SelectedIndex=0 'Selection by default
End If
End Sub
Sub showSelection(sender As Object, e As EventArgs)
lblMessage.Text ="You have selected "+ _
lstFlowers.SelectedItem.Text
End Sub
</script>
Now, go ahead and replace the script in Figure 3.11 with the previous script shown in Figure 3.12.The application will work fine!
AutoPostBack Attributes of Server Controls
In this section, we will illustrate an important behavior of certain server-side controls. Some server-side controls can generate automatic postbacks on selected events That means, to submit a form, we may not have to wait until the user clicks the submit button. For example, the SelectedIndexChange event of an asp:ListBox is an event that is capable of triggering a postback. If we want this mechanism to work, we will have to set the AutoPostBack property of the List box to “True.” To illustrate the AutoPostBack attribute of an asp control, we will revise our flower selection example.We will remove the Submit button (although we could have kept it, too, without any loss of functionality).We will set the AutoPostBack attribute of the list box to be True, and we will attach the showSelection VB function on its onSelectedIndexChanged attribute.When you run this form, every time you select a new flower, the system will display your selection in the label.We do not need the Submit button because the onSelectedIndexChanged event will generate a postback.The output of this application is shown in Figure 3.13, and its code is shown in Figure 3.14
Figure 3.13 A List Box with Its AutoPostBack Property Set to True
Figure 3.14 Complete Code (ServerControl4.aspx)
<!— Chapter3\ServerControl3.aspx —>
<%@ Page Language="VB" Debug="true" %>
<html><head></head><body><form runat="server">
Select a flower, and then click the submit button please:<br/><br/>
<asp:listbox id="lstFlowers" runat="server" rows="3"
AutoPostBack="true" onSelectedIndexChanged="showSelection"/>
<br><br>
<asp:Label id=lblMessage runat="server" /> <br/><br/>
</body></form></html>
<script language=vb runat="server">
Sub Page_Load(source As Object, e As EventArgs)
If Not Page.IsPostBack Then
lstFlowers.Items.Add(New ListItem("Tulip"))
lstFlowers.Items.Add(New ListItem("Poppy"))
lstFlowers.Items.Add(New ListItem("Iris"))
lstFlowers.SelectedIndex=0
End If
End Sub
Sub showSelection(source As Object, e As EventArgs)
lblMessage.Text="You have selected " + _
lstFlowers.SelectedItem.Text
End Sub
</script>
posted by Mr.Q at 11:04 AM
0 Comments:
Post a Comment
<< Home