Did you find this useful?
Socialize it today.


ASP.NET Web Forms

Friday, May 03, 2013

aspx web forms

ASP.NET Web Forms is a part of the ASP.NET web application framework and is one of the three different programming models you can use to create ASP.NET web applications, the others being ASP.NET MVC and ASP.NET Web Pages. In this series of articles, we will be focusing on the ASP.NET Web Forms. Web Forms are pages that form the user interface that give your web applications their look and feel. These pages are written using a combination of HTML, server controls, and server-side code, typically either in C# or VB. When users request a page, it is compiled and executed on the server, and then it generates the HTML markup that the browser can render.

Using Visual Studio, you can easily create ASP.NET Web Forms. Visual Studio allows you to develop your source code by hand or you can drag and drop server controls directly on to the web page. You can then configure work with your objects' properties, methods, and events for in order to define the behavior, look and feel of the page.


ASP.NET Form HTML Server Control

In an ASP.NET web page, there is a very important element which resides within the <body> element, which is a <form> element. The <form> element is required because it defines a portion of the page that can send information back to the web server. In each ASP.NET page (.aspx), there will only be one form. The form is important at the time when you begin to add in controls such as text boxes (input type elements). When a postback occurs, information in the element within the form will be sent back to the web server. The details regarding this process are not that important at this point. You should simply make sure that all your web page content inside the <form> element. The other important thing to note is that this <form> element needs to have a runat="server" attribute/value for the process to work properly. Here is an example of a simple ASP.NET Web Forms page.


<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html>
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

The <div> element within the form is optional. Its purpose is to simply create a starting point, or wrapper for the rest of your HTML and ASP.NET markup. From the example above, let us focus in on the form element. As discussed earlier, the form element in our ASP.NET page is a typical HTML element with the runat attribute. In ASP.NET, this is considered and HTML Server Control. The control is processed by the ASP.NET engine and the appropriate HTML is generated and sent back to the browser.


<form id="form1" runat="server">

    <% HTML and Server Controls %>

</form>

An ASP.NET form is always submitted to the page itself. There is no reason to specify an action attribute as it will be ignored by ASP.NET. Also, if you omit the method attribute which is acceptable, it will be set to method="post" by default. It is recommended that you specify an ID attribute, but if you do not, ASP.NET will automatically assign one. If you create a test page and view the source code in your browser, here are the typical results you would see.


<form method="post" action="Default.aspx" id="form1">

       <!-- Some HTML markup -->

</form>


Submitting a Form

A form can be submitted by a few elements, but is most often submitted by clicking on a button. Here is an example of how to use the Button web server control in ASP.NET. You will notice that there is an OnClick event that will be used to execute server-side code. This Button control would be placed within the <form> element.


<asp:Button id="btn1" text="Submit" OnClick="btn1_Click" runat="server" />

The id attribute defines a unique id for the button and the text attribute assigns a label to the button. The OnClick event handler specifies a named subroutine to execute. So in the example that we are working with, a button click will run subroutine called "btn1_click". The subroutine simply changes the Button's text. The subroutine code would be placed within a server-side script element, or in your code-behind page. In this example, we are using the script element method which would be located in the same .aspx document.

C#

<script runat="server">

    protected void btn1_Click(object sender, EventArgs e) 
    {
        btn1.Text = "Clicked!";
    }

</script>

VB

<script runat="server">

    Protected Sub btn1_Click(sender As Object, e As EventArgs)

        btn1.Text = "Clicked!"

    End Sub

</script>


Complete Example

The following example is the complete example within a .aspx page, using C# server-side code.


<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

    protected void btn1_Click(object sender, EventArgs e) 
    {
        btn1.Text = "Clicked!";
    }
    
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Demo Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Button ID="btn1" runat="server" Text="Submit" OnClick="btn1_Click" />
    </form>
</body>
</html>

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Sams Teach Yourself ASP.NET 4 in 24 Hours Pro ASP.NET MVC 4 Beginning ASP.NET 4: in C# and VB