As you know, Web forms save the viewstate of each control in the form of hidden form fields. This shows the entries done in the control, whether the control is selected or not. The viewstate provides a lot of information that ASP.NET uses to maintain the state of each server control.
There is another way to save information in web forms, through statebag. It is defined as an object that holds value when a form is posted. When you place something in the statebag and submit the form, the server saves the information and sends it back to the client after processing. This is an easy way to store custom information that is not entered by the user such as Calculation. Statebag can be accessed through the viewstate variable.
Let’s look at example 9 that saves the current time in the statebag as soon as the page is loaded. When the user clicks the Submit Button, comparison can be done with the start time to the new time.
| Example9:state.aspx |
<% @ Page Language= “VB” %>
<script runat= “server”>
Sub Page_Load (obj as object, e as EventArgs)
if not Page.IsPostBack then
ViewState(“StartTime”) = DateTime.Now
lblMessage.Text = “The time is now:” & _
ViewState(“StartTime”)
end if
end Sub
Sub Submit(obj as object, e as EventArgs)
lblMessage.text = “The time is now:” & _
DateTime.Now & “<br> started at:” &_
ViewState (“StartTime”)
end Sub
</script>
<html><body>
<font size= “5”> www.expertrating.com
</font> <hr> <p>
form runat = “server”>
<asp: Button id= “btSubmit” runat= “server” Text= “Submit”
OnClick= “Submit” />
<p>
<asp: Label id= “lblMessage” runat=”server”/>
</form>
</html></body> |
| |
The output of this example is shown below: -
In the above example to store the first viewing of the page, you can check the IsPostBack property on line 5 in the Page Load event handler. If this is the first viewing, the current time (as denoted by DateTime.Now) can be stored in ViewState. ViewState is the name of the statebag that ASP.NET creates
Whenever the Submit button is clicked, the Submit method is executed. This method, begins on line 12, and displays the current time and the time stored in the statebag in the label control. The figure above shows the output of this example. The value from the statebag is different from the current value.
Web Forms Processing Order
Occasionally, a particular order would be followed to process pages. For instance, you may like to display a message only after an event has been handled. This instance would occupy an important place only once databases are examined in ADO.NET further in the tutorials. Thus, it’s always helpful to know the order in which web forms are processed:
The page is requested.
The Viewstate is restored for any controls.
The Page_Load event occurs.
HTML Server Controls
All the HTML elements (input text boxes, select lists, buttons, images, and tables) represent some visual aspect of a Web page. For Example, using the following HTML tag can create a text box:
| <input type=”text” id=”ExpertTextbox” value=”superexpert” /> |
HTML elements are completely client-based; i.e. the server has no knowledge of any of these controls. A browser knows what <input type=”text”> is supposed to look like and renders it accordingly.
HTML server controls are very easy to create. You may simply add the runat=“server” attributes to any HTML element. Every HTML element has a corresponding HTML server control. In fact, it has been used many times: the Html Form controls, looks like
The following is an HtmlInputText control:
| <input type=”text” id=”MyTextbox” run at=”server” /> |
In this case, the server creates an HtmlInputText control. When the client requests the page, ASP.NET generates the appropriate HTML code to display the control as a text-input box. The code to create HTML server controls is exactly the same as the HTML elements they represent, with the addition of the run at=”server” attribute.
Once you turn an HTML element into an HTML server control, every attribute of the element can be modified through code. The example is given below: -
| Example10: myservercontrols.aspx |
<%@ Page Language="VB" %>
<script runat="server">
Sub Click (obj as Object, e as EventArgs)
Select case obj. Value
Case "Left"
expertImage.align = "left"
Case "Right"
expertImage.align = "right"
Case " Center "
expertImage.align = "center"
end select
Left.Style ("Border-Style") = "notset"
Right.Style ("Border-Style") = "notset"
Center.Style ("Border-Style") = "notset"
obj. Style ("Border-Style") = "inset"
End Sub
</script>
<Html>
<Body>
<font size="6"> www.expertrating.com</font> <hr> <p>
<form runat="server">
<input type="Button" id="Left" runat="server" value="Left" OnServerClick="Click" />
<input type="Button" id="Center" runat="server" value="Center" OnServerClick="Click" />
<input type="Button" id="right" runat="server" value="Right" OnServerClick="Click" />
</form>
<img src="word.gif" id="expertImage" runat="server">
<div id="Label1" run at="server">
<b> when the buttons above are clicked, the image will move around accordingly. <p>
This example demonstrates the HtmlImage and HtmlInputButton controls.
</b>
</div>
</body>
</html> |
| |
The output of this example is shown below: -
In the above example the HtmlInputButton controls (which represent input buttons) an event called Server Click, which occurs whenever they’re clicked. When this event occurs, the Click method is executed on the server, as shown in lines 22, 23, and 24.
In the declaration block the only method that is used is the Click event handler. This method uses a case statement to determine which button invokes it. Here obj represents a button server control, to check the value to determine which button was clicked. Then the align property of the image is set accordingly.
On Lines 12,13,and 14, styles of the button elements are set. Specifically, if you want to make the button that was clicked earlier, appear to be pushed in, then you first have to “unpress” each control button to unset. Then, on line 15, you set the style of the button represented by obj to inset.
.