Microsoft.NET

……………………………………………….Expertise in .NET Technologies

Code-Behind versus In-Page Coding

Posted by Ravi Varma Thumati on September 10, 2009

<html>
<head>
    <script runat="server">
        void Button1_Click(Object Sender, EventArgs e)
               {
            Label1.Text = “Welcome to C#.NET”;
        }
    </script>
</head>
<body>
    <form runat="server">
        <asp:Label Text="Label1” runat="server"/>
        <asp:TextBox runat="server" />
        <asp:Button Text="Copy" Runat="server"/>
    </form>
</body>
</html>

In the above example, we have placed a certain amount of C# code inside the .aspx file’s script tag. We will refer to this practice as In-Page coding also referred to as inline-coding. In ASP days, all ASP applications had to be developed using in-page coding because that was the only way to develop an ASP page.

 Figure 3.16 Event Execution Sequence

inline Coding 

Often, the intermixed HTML and scripting codes in a large page become cryptic and difficult to read and maintain. Fortunately, ASP.NET provides a way out of this problem. We may develop the html code in a file with an .aspx extension, and then we may write the necessary code in a separate C# or VB code file. This practice is known as Code-Behind. Basically, the Code-Behind follows the Visual Basic model of developing an application. Here, we develop an .aspx file where we define the layout of the controls in a page, and then we include the code in a separate VB or C# class file. As shown in Figure 3.17, this mechanism separates the page layout design activities from the code development activities.

 When we develop an ASP.NET application using VS.NET, we are automatically forced to use Code-Behind. Obviously, the .aspx file has to be somehow linked to the class file. We may link the .aspx file with the code file in one of two ways:

  • Develop the class file and save it without compilation in the same directory of the .aspx file, or
  • Compile the class file and save the .dll file in the bin subdirectory of our virtual directory.

 It is intuitively assumed that the former will execute more slowly than the latter.

 Figure 3.17 In-Page code versus Code Behind

code behind

 Using Code-Behind without Compilation

 In this method, you do not need to compile the VB or C# source file. Just save the source file and the .aspx file in the same virtual directory. You will need to enter the following Page Declarative statement at the top of your .aspx file.

 Here, the Src attribute specifies the name of the source file, and the Inherits attribute specifies the name of the class to inherit. In the following illustration, we assume that the VB source file named vbCode.vb has a class named VbCode in a namespace myVbCodeBehind.

 <%@ page src=”vbCode.vb” inherits=”myVbCodeBehind.vbCode” %>

1. Develop the page layout in an .aspx file. Be sure to include the page directive.

 <%@ page debug=”true” src=”vbCb.vb” inherits=”myVbCodeBehind.vbCb” %>

<html><head></head>

<body>

<form runat=”server”>

                    Select a flower, and click the submit button please: <br>

                   <asp:ListBox runat=”server” rows=”3″> </asp:ListBox><br> <br>

<asp:Button runat=”server” text=”Submit” /> <br><br>

      <asp:Label runat=”server” />

</body>

</form></html>

2. Develop the VB class file (shown in Figure 3.20) and save it in the same directory. In this particular application, we need to import the System and the System.WebUI.WebControls namespaces. Depending on the nature of your applications, you may need to import other namespaces, too.

Option Strict Off

Imports System

Imports System.Web.UI.WebControls

Namespace myVbCodeBehind

 Public Class vbCb : Inherits System.Web.UI.Page

   Public lstFlowers As System.Web.UI.WebControls.ListBox

   Public lblMessage As System.Web.UI.WebControls.Label

   Public btnSubmit As System.Web.UI.WebControls.Button

   Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

If Not IsPostBack Then

lblMessage.Text=”No Selection Yet”

lstFlowers.Items.Add(new ListItem(“Tulip”))

lstFlowers.Items.Add(new ListItem(“Rose”))

lstFlowers.Items.Add(new ListItem(“Redbud”))

lstFlowers.SelectedIndex=0

End If

   End Sub

   Protected Sub showSelection(ByVal obj As Object, ByVal e As EventArgs)

lblMessage.Text=”You have selected ” + lstFlowers.SelectedItem.Text

   End Sub

 End Class

End Namespace

3. Test the ASPX application. It should work fine.

Using Code Behind with Compilation

In this method, you will need to compile your VB or C# source file to a .dll file first.Then copy the .dll file and save it in the bin subdirectory of your virtual directory. Rather than manually copying the .dll file to the bin directory, you may also use the /out parameter of the compilation command to save the .dll file directly to your bin directory, as follows:

G:\MyAspNets\CodeBehind>vbc /out:..\bin\vbCb.dll /t:library vbCb.vb

In the compilation command, we assume that the name of the VB file is vbCb.vb. This command will create the vbCb.dll file in the bin directory directly upon compilation. Now we need to enter a page declarative at the top of our ASPX page as follows. Here, the name of the source file (cs or vb) should be specified in the Code-Behind attribute. The Inherits attribute should include the namespace.className of the class file:

<%@ page codebehind=”vbCb.vb” inherits=”myCodeBehind.vbCb” %>

  • Develop the .aspx file. Here, we assume that you will develop the C# class in a file named CsharpCodeBehind.cs. We further assume that the name of the class will be cSharpCb in a namespace myCsCodeBehind. Thus, be sure to include the Code-Behind attribute to link the page to the code behind class file as follows.

<%@ page debug=”true”codebehind=”CSharpCodeBehind.cs”

inherits=”myCsCodeBehind.cSharpCb” %>

  • Develop the Code-Behind class file.

namespace myCsCodeBehind

{

using System;

using System.Web.UI.WebControls;

public class cSharpCb : System.Web.UI.Page

 {

public System.Web.UI.WebControls.ListBox lstFlowers;

public System.Web.UI.WebControls.Label lblMessage;

public System.Web.UI.WebControls.Button btnSubmit;

protected void Page_Load(object sender, EventArgs e)

{

     if (!IsPostBack)

     {

lblMessage.Text=”No Selection Yet”;

lstFlowers.Items.Add(new ListItem(“Tulip”));

lstFlowers.Items.Add(new ListItem(“Redbud”));

lstFlowers.Items.Add(new ListItem(“Poppy”));

     }

            }

protected void showSelection(object obj, EventArgs e)

{

lblMessage.Text=”You have selected ” + lstFlowers.SelectedItem.Text;

}

       }

     }

  • Compile the class file as follows. Note: If you are using the VB version, just replace the csc keyword with vbc, and change the name of the source file.

 

csc /t:library /r:System.dll /r:System.Web.dll CSharprpCodeBehind.cs

  • Copy the .dll file in the bin directory of your virtual directory. You are done.

When we develop Web applications using VS.Net, it forces us to implement the code-behind methodology.

 

Advertisements

3 Responses to “Code-Behind versus In-Page Coding”

  1. hey all, I used to be simply checkin’ out this blog and I really admire the premise of the article, and have nothing to do, so if anybody wish to to have an engrossing convo about it, please contact me on AIM, my title is heather smith

  2. Many thanks for posting this, It?s just what I used to be researching for on bing. I?d a lot comparatively hear opinions from a person, slightly than an organization internet web page, that?s why I like blogs so significantly. Many thanks!

  3. I just wanted to post a small message so as to say thanks to you for all of the wonderful instructions you are sharing at this site. My considerable internet look up has now been honored with good concept to write about with my close friends. I ‘d mention that many of us site visitors actually are undoubtedly endowed to be in a really good place with so many wonderful individuals with useful secrets. I feel really grateful to have come across your entire web page and look forward to so many more excellent times reading here. Thanks once more for everything.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: