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 article, 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 onto the web page. You can then configure work with your objects’ properties, methods, and events 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 that 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. On 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 is inside the <form> element. The other important thing to note is that this <form> element needs to have 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 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 with 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 a 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>
