To make the coding style user-friendly and keeping the old style ASP.NET provides two types of coding model.
-
Inline Code / Single page (Classical Model)
-
Code-Behind Model
Inline Code
The coding style used by ASP developers is known as inline coding, inline code or in-page code because that was the only way to develop an ASP page.
In ASP Pages scripting code working for generating desired output was intermixed with HTML code to create user-friendly pages as well as specific functionality was added to the web pages.
But with the latest ASP.NET introduction the old developers are moving from the old classical style of programming to the new style.
Code-Behind
The ASP.NET Framework has provided the way out to maintain the code for large web pages. Now you can design the HTML code page with .aspx extension separately and maintain the code files for the same .aspx page of .aspx.cs and .aspx.vb separately. This style of coding to develop web pages is called Code-Behind.
Code Behind approach is a better way to develop and design the .aspx page having basic layout of a web page containing all the necessary controls required for the GUI of the web page. Then include the C# or VB code behind class file for handling the events of controls. This mechanism separates the web page from design layout from the coding part.
Difference between Inline code and Code-behind.
|
Inline / Single |
Code Behind |
|
The business logic is in <script> blocks in the same .aspx file that contains the HTML and controls. |
The HTML and controls are in the .aspx file, and the business logic is in a separate .aspx.cs or .aspx.vb file. |
|
When the page is deployed, the source code is deployed along with the Web Forms page, since it is physically in the .aspx file. Though, we are not able to see the code, only the results are rendered when the page runs. |
All project class files (without the .aspx file ) are compiled into a .dll file, which are deployed to the server without any source code. When a request for the page is received, then an instance of the project .dll file is created and executed. |
|
The .aspx file derives from the Page class.
|
The code for the page is compiled into a separate class from which the .aspx file derives. |
|
When we write inline code we write code in the same page with Html code between scripting tags. So Each time when there is a request for page it compiles the code each time then server the page Like classic asp because inline code cannot create dll. |
The code-behind approach also improved productivity (at some level) since the designer and the developer can continue working simultaneously on the same set of application.
It's also easier to build & test the UI and the business logic (DLL) - separately or combined. |
Inline Coding model
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Button1_Click(object sender, System.EventArgs e) {
Label1.Text = "Your Name is : " +
TextBox1.Text.ToString();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Asp.Net Inline Coding Model Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Font-Size="Larger" ForeColor="Crimson"></asp:Label>
<br />
<asp:Label ID="Label2" runat="server" Text="Enter your name:"
AssociatedControlID="TextBox1"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="Click" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
Code explanation
In the above code the HTML and business logic is mixed in a single file. <%@ Page %> directive refers to coding language only. The business logic is written in <script> </script> tag.
Visual Studio style of Code-Behind:
The .aspx page will contain the HTML (UI) or client side scripts:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Enter your name: "></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</div>
</form>
</body>
</html>
Code explanation
In the above code-behind model, the page is declared as a partial class, which enables both the page and code files to be compiled into a single class at runtime. The page code refers to the code-behind file in the CodeFile attribute of the <%@ Page %> directive, specifying the class name in the Inherits attribute.
The .aspx.cs page will contain the business logic (server side code):
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Response.Write("Welcome to our website");
}
}
Code Behind separates user interface from actual programming. This means graphic designers would look for only design matters while programmers work their way. Each specialized person work in their irrespective area and doesn't disturb each other to perform optimized work.
Well there is no performance difference between inline code and code-behind model.
Conclusion
I hope that this article would have helped you in understanding different coding styles in ASP.NET. Your feedback and constructive contributions are welcome.