| Example1: SimpleHtmlPage.aspx |
<html>
<head><title>This is a Simple HTML Page</title></head>
<body>
<form method=”post” action=”SimpleHtmlPage.aspx”>
<b>Your Name:</b>
<br><input name=”username” type=”text” size=”25”>
<p>
<b>Your Comments:</b>
<br><textarea name=”comments” cols=”55” rows=”10”></textarea>
<p>
<input type=”submit” value=”Send Comment”>
</form>
</body>
</html> |
| |
The output of this page is shown below. You might notice that the HTML form posts back to itself (through the action attribute). So when the Send button is clicked, the same form appears once again.
The HTML form in Example 1 does not contain any ASP.NET controls. When you type something in the form and click the Send Comment button, the data you enter into the form disappears every time.
We can modify Example 1 so that it uses ASP.NET controls rather than the HTML form element. This will convert the form fields into “smart” server side form fields. Modify the page according to the Example 2 and save it with the name SimpleAspxPage.aspx in the same directory.
| Example2: SimpleAapxPage.aspx |
<html>
<head><title>This is a Simple ASPX Page</title></head>
<body>
<form runat="Server">
<b>Your Name:</b>
<br><input id="username" type="text" size="25" runat="Server">
<p>
<b>Your Comments:</b>
<br><textarea id="comments" cols=60 rows=10 runat="Server"></textarea>
<p>
<input type="submit" value="Send Comment" runat="Server">
</form>
</body>
</html>
|
| |
The output of this page is shown below. In this example four modifications were made:
- The page is renamed as SimpleAspxPage.aspx.
- The Attribute Runat=”Server” is added to all the form tags. For Example, instead of using <input name=”username” type=”text” size=”25”>, the following is used - <input id="username" type="text" size="25" runat="Server">
The Runat=”Server” attribute converts these standard HTML tags into “smart” server side HTML tags. When SimpleAspxPage.aspx page is opened in the Web browser, the <form runat="Server"> tag executes on the server before any content is rendered to the Web browser. The Runat=”Server” attribute converts these standard HTML tags into ASP.NET controls.
- Note that instead of using the name attribute to name the form fields, a unique identifier is given with ID attribute. This is because you are no longer treating the form fields as simple HTML tags; but you are converting the form field into server side objects.
- Note that Example 1 was modified so that one can submit the HTML form using:
| <form Runat=”Server”> rather than the standard, <form method=”post” action=”SimpleAspxPage.aspx”> |
Therefore it is clear that if you want to convert any of the form fields within a HTML form into ASP.NET controls you must use the Runat=”Server” attribute with the opening form tag. The Method attribute of the form tag is not used with the control version of the form tag. By default, the ASP.NET HTML Form control includes this attribute. Action attribute is not specified. The ASP.NET HTML Form control automatically posts back to the same way as the original form tag.
In brief, to convert a standard HTML file into an ASP.NET page, you make four modifications to the page as discussed above.
Now you have converted an HTML page to a “smart” ASP.NET page. The method to get out of it is discussed below:
Open the page SimpleAspxPage.aspx in the browser and try to submit the form. All the data is preserved between the form posts. When the form is posted over and over again the form data does not disappear.
In Example 2 the ASP.NET page is doing a lot of complicated work opening up several exciting programming possibilities.
|