Creating your first Code Behind Page
Add Comment<span class=wboxheado>Introduction</span><br> New to ASP.NET? Confused about what's <b>code behind</b>? Don't have Visual Studio.NET? <br> We read everywhere about ASP.NET's capabilities to separate the design and logic, is it possible without Visual Studio.NET? <br> Yes, it is and I will show you how easy it is. Read on for answers to your questions. <p><b>What would be the benefit's of separating the design from the code? </b><br> In many production environments there are separate teams that work on each part of the Web Application. The Design team generally uses WYSWYG tools like <i> Microsoft FrontPage</i> or <i> Macromedia DreamWeaver</i> to design their pages while the programming team looks after the coding these pages according to the database etc... <br> In previous technologies like ASP/JSP the code is mingled throughout the page along with the design, hence incase the design team modifies the design, there is a big possibility that they will overwrite some of the programming code too! This makes life hell for both the design and programming teams and many times leads to locked horns between the two!</p> <p>In ASP.NET you can have two separate files, one for the design and another for the code. This is the most elegant solution, since the design team can work on the design page (with peace) and the programming team on their code without having to worry about clashes between the two.<br> But, the problem arises that currently the whole code cannot be separated, some code like the DataGrid Templates etc still need to be mingled with the design file, but still the extent of design/code separation possible is noteworthy! <br> Another problem is that ASP.NET introduces new powerful and smart Web Controls, since the current editors don't support them currently, you will have to add those manually :(.</p> <p>In this example I will try to illustrate the technique I use do design my HTML pages in MS FrontPage and then finally I change these page to a ASP.NET Code Behind files. I hope this can help you in your production environment!</p> <p><span class=wboxheado>CodeBehind Attribute vs. Code Behind Concept</span><br> There is a lot of confusion between these two terms, so I decided to clear it out for you!<br> ASP.NET supports the <i> Code Behind Concept</i>. According to this concept you can put your design code into a <b> *.aspx</b> file and place the programming code into a <b> *.dll</b> .NET PE file. This allows separation of design and code. Also within the '<b>Page</b>' directive on the ASP.NET page you use the <b>Inherits</b> attribute to refer to the <i>Class</i> your page inherits.<br> Example<br> <b> <%@ Page Language="C#" Inherits="Namespaces.ClassName" %></b></p> <p>The <i> CodeBehind attribute</i>, is specific to Visual Studio.NET and has no use for other users!<br> Visual Studio.Net use a directive like:</p> <p><b><%@ Page language="c#" Codebehind="myFile.aspx.cs" AutoEventWireup="false" Inherits="Project1.myFile" %></b></p> <p>This attribute is used by Visual Studio.NET to keep track of its files, and is of no use to non-Visual Studio.NET users.<br> I hope this has cleared out all your doubts regarding 'Code Behind'.</p> <p><span class=wboxhead>Example: ASP.NET Form Mailer</span></p> <p><span class=wboxheado>1) Create the HTML Page Design</span><br> This is the first step to create your Code Behind ASP.NET Web Page, since I am not a HTML Pro who would type all his design code in notepad, I use MS FrontPage to create my design, although you can use any editor you like (even notepad if you are a Pro!!). I have created a very simple form, you can add all the bells and whistles that you want to add...</p> <p>On the page create a normal table and a form like below<br> <img border="0" src="../../img/codebehind1.gif" width="440" height="429"><br> <b> Figure 1:</b> First Form in MS FrontPage</p> <p>I have saved this page as <b>first.htm.</b> Check out the custom code generated by FrontPage below.</p> <table border="0" width="100%" class="code"> <tr> <td width="100%"><pre><html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>Welcome to My First Code Behind Form</title> </head> <body> <h3>Welcome to My First Code Behind Form - Saurabh Nandu</h3> <form> <table border="1" width="100%"> <tr> <td width="100%" colspan="2">Please fill in the form</td> </tr> <tr> <td width="35%">Name</td> <td width="65%"><input type="text" name="Name" size="20"></td> </tr> <tr> <td width="35%">E-Mail</td> <td width="65%"><input type="text" name="Email" size="20"></td> </tr> <tr> <td width="35%">Message</td> <td width="65%"><textarea rows="7" name="Message" cols="26"></textarea></td> </tr> <tr> <td width="100%" colspan="2"><input type="submit" value="Submit" name="B1"></td> </tr> </table> </form> <p><a href="http://www.MasterCSharp.com">www.MasterCSharp.com</a> - Master C#, the easy way...</p> </body> </html></pre></td> </tr> </table> <p><span class=wboxheado>2) Creating the Virtual Directory (Programming Department work starts here!)</span><br> As the next step, I take this file and copy it to the Virtual Directory that will host the ASP.NET application, I use a Virtual Directory named <b>FirstForm</b>, if you have created a Virtual Directory then first create a normal folder in Windows Explorer under the <i>c:\InetPub\WWWRoot</i> directory called as <i>C:\InetPub\WWWRoot\FirstForm</i> and then got to <i>Start - > Control Panel -> Administrative Tools -> Internet Services Manager</i>. Within the <b>Internet Services Manager</b>, select <i>Default Web Site</i>. Under this tab, select <i>FirstFolder</i> and click <i>Action -> Properties</i> to view the properties of this folder. In the properties tab, click on the <b>Create</b> button (see figure below) to create a new Virtual Directory. Remember you need to have proper rights to do this!!</p> <p><img border="0" src="../../img/codebehind2.gif" width="345" height="326"><br> <b> Figure 2: </b> Properties Panel - Internet Services manager</p> <p><span class=wboxheado>3) Creating in-line coded ASP.NET File</span><br> Once you have the created the virtual directory and copied the <b>first.htm</b> file into this directory, rename this file to <b>first.aspx</b> (I hope you know how to rename files, don't U??). Now open this file in Notepad or any other plain text editor (time to become a Pro!!). I first compile the files with in-line coding and then convert it into Code Behind files, even though this is one extra step, but its always easier to debug, once the in-line version of the page is working, you can easily shift it into a code behind file.<br> Now follow these steps precisely..</p> <p><span class=wboxhead>A) Add the Page directive</span><br> Go to the first line in notepad and add the following directive to state that out ASP.NET page will use C# as the coding language.<br> <b> <%@ Page Language="C#" %></b></p> <p><span class=wboxhead>B) Convert all the Form elements to HtmlControls</span><br> HtmlControls as special ASP.NET controls that can be accessed by server-side scripting. To convert normal Form components to HtmlControls, go to each <i>Form</i> component (including the Form declaration) that has been defined within the web page and add a <b>runat="server"</b> attribute, as well as to make the tags '<i>well formed</i>' close the tags with a '<b>/</b>' symbol. We also have to add the '<b>ID</b>' attribute, which is used by ASP.NET to identify the controls, we use the same values for the 'ID' attribute that we set on the '<i>name</i>' attribute in FrontPage. Also note that I add a <b>OnServerClick</b> event handler for the button and wire it up to the <b>Post_Form</b> server-side method (we will define this below). So make the following changes.</p> <table border="0" width="100%" class="outline"> <tr> <td width="40%" class="outline"><b>HTML</b></td> <td width="60%" class="outline"><b>HTML Control</b></td> </tr> <tr> <td width="40%" class="outline"><form></td> <td width="60%" class="outline"><form runat="server" ></td> </tr> <tr> <td width="40%" class="outline"><input type="text" name="Name" size="20" ></td> <td width="60%" class="outline"><input type="text" id="Name" name="Name" size="20" runat="server" /></td> </tr> <tr> <td width="40%" class="outline"><input type="text" name="Email" size="20" ></td> <td width="60%" class="outline"><input type="text" id="Email" name="Email" size="20" runat="server" /></td> </tr> <tr> <td width="40%" class="outline"><textarea rows="7" name="Message" cols="26"></textarea></td> <td width="60%" class="outline"><textarea rows="7" id="Message" name="Message" cols="26" runat="server"></textarea></td> </tr> <tr> <td width="40%" class="outline"><input type="submit" value="Submit" name="B1"></td> <td width="60%" class="outline"><input type="submit" id="B1" value="Submit" name="B1" OnServerClick="Post_Form" runat="server" /></td> </tr> </table> <p><span class=wboxhead>C) Adding the In-Line Code</span><br> Once the controls have been changed to <b> HtmlControls</b> that run at server, we next write the necessary server-side script, to mail the form contents. I am using a simple <i> SMTP</i> mailer script, which will e-mail the contents of the form to the specified address, remember you should have SMTP service running on your web server for this script to work!<br> I am presenting the full modified code of the first.aspx with the in-line script added. You can call this file in your browser and test it. <br> Note: I am using the <b> SmtpMail</b> class from the <b>System.Web.Mail</b> namespace to e-mail the form contents. The static method <b>Send</b> takes the following parameters<br> 1) Email address from which the mail has been sent.<br> 2) Email address to which the mail should go.<br> 3) Subject line.<br> 4) Body of the message<br> .<br> You will also note, that HtmlContols have the property <b>Value</b> that returns its text, unlike the <b>Text</b> property of the Web Control that returns the controls text.</p> <table border="0" width="100%" class="code"> <tr> <td width="100%"><pre><%@ Page Language="C#" %> <html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>Welcome to My First Code Behind Form</title> <script runat="server"> protected void Post_Form(object sender, EventArgs e) { <span class=cmt>//Check if the Name and Email fields are filled in</span> if(Name.Value!=""&&Email.Value!="") { <span class=cmt>//Send the Mail</span> System.Web.Mail.SmtpMail.Send(Email.Value,"saurabh@mastercsharp.com", "Mail From:"+Name.Value,Message.Value); } } </script> </head> <body> <h3>Welcome to My First Code Behind Form - Saurabh Nandu</h3> <form runat="server"> <table border="1" width="100%"> <tr> <td width="100%" colspan="2">Please fill in the form</td> </tr> <tr> <td width="35%">Name</td> <td width="65%"> <input type="text" id="Name" name="Name" size="20" runat="server" /> </td> </tr> <tr> <td width="35%">E-Mail</td> <td width="65%"> <input type="text" id="Email" name="Email" size="20" runat="server" /> </td> </tr> <tr> <td width="35%">Message</td> <td width="65%"><textarea rows="7" id="Message" name="Message" cols="26" runat="server"> </textarea></td> </tr> <tr> <td width="100%" colspan="2"> <input type="submit" value="Submit" id="B1" name="B1" OnServerClick="Post_Form" runat="Server" /> </td> </tr> </table> </form> <p><a href="http://www.MasterCSharp.com">www.MasterCSharp.com</a> - Master C#, the easy way...</p> </body> </html></pre></td> </tr> </table> <p><span class=wboxheado>4) Creating the first Code Behind file.</span><br> If the above page is working correctly, then we proceed further with separating the code from the design. Follow the below steps ....</p> <p><span class=wboxhead>A) Create a *.cs source code file</span><br> Within the Virtual Directory that hosts your application (<b>FirstForm</b> in our example) create a new <b>First.cs</b> file and open it up in notepad. </p> <p><span class=wboxhead>B) Copy the Script into the Code file.</span><br> Next, <b> cut</b> the script i.e. everything from <script runat="server"> to </script> (including the script tags) from the ASP.NET page (first.aspx) to the source code file (first.cs). </p> <p><span class=wboxhead>D) Update the Code File</span><br> The Source Code file is like a normal C# program file, hence we need to update the file with the necessary changes to change it into a valid C# program file.</p> <p>C# Code file without changes (first.cs)</p> <table border="0" width="100%" class="code"> <tr> <td width="100%"><pre><script runat="server"> protected void Post_Form(object sender, EventArgs e) { <span class=cmt>//Check if the Name and Email fields are filled in</span> if(Name.Value!=""&&Email.Value!="") { <span class=cmt>//Send the Mail</span> System.Web.Mail.SmtpMail.Send(Email.Value,"saurabh@mastercsharp.com", "Mail From:"+Name.Value,Message.Value); } } </script></pre></td> </tr> </table><br> The updated source code file with the necessary changes to make it into a proper C# class.<br> <table border="0" width="100%" class="code"> <tr> <td width="100%"><pre>using System; using System.Web.UI; using System.Web.UI.HtmlControls; public class First:Page { <span class=cmt>//Declare all the Controls used</span> protected HtmlInputControl Name, Email; protected HtmlTextArea Message; public void Post_Form(object sender, EventArgs e) { <span class=cmt>//Check if the Name and Email fields are filled in</span> if(Name.Value!=""&&Email.Value!="") { <span class=cmt>//Send the Mail</span> System.Web.Mail.SmtpMail.Send(Email.Value,"saurabh@mastercsharp.com", "Mail From:"+Name.Value,Message.Value); } } }</pre></td> </tr> </table><br>As its clear from above, the first step is to import the necessary Namespaces, in our case <b>System</b>, <b>System.Web.UI</b> and <b>System.Web.UI.HtmlControls</b>.<br> The second step is to replace the <script runat="server"> tag with <b><br> public class First:Page {</b> <br> i.e. a class declaration of the class <b>First</b>. Also remember that all ASP.NET web pages inherit the <b>Page</b> class from the <b>System.Web.UI</b> namespace. The closing </script> tag is replaced by a closing bracket <b>}</b>.<br> Lastly, we have to declare all the controls, that we are referencing in our code, this can be a bit tricky, but just browse the code for see which controls, you have referenced in your page. Its not necessary to declare all the controls used on the page, just declare the controls you are using in the code. In the above example we have a number of controls such as 'Input Textboxes', 'TextArea', 'Form' and a 'Input Button', but in the code since I am just referencing the 'Input Textboxes' and 'TextArea' I just declare those variables. Although you might think it to be best practice to declare all the variables used, incase you might need them in the future!<br> Ps: If you are thinking how did I get the Variable names? Well just look at the 'ID' tags in all the controls with the runat server attribute and declare the control with the same name as the ID. (Does this make sense??). <p><span class=wboxhead>E) Update the Design file (first.aspx)</span><br> Most of the work is done! Just you have to let the ASP.NET runtime know where you have stored the code of the code behind file. Hence we have to update the <i>Page</i> directive to reflect the necessary changes.<br> Here is the updated ASP.NET File (first.aspx)</p> <table border="0" width="100%" class="code"> <tr> <td width="100%"><pre><%@ Page Language="C#" <b>Inherits="First" Src="First.cs"</b> %> <html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>Welcome to My First Code Behind Form</title> </head> <body> <h3>Welcome to My First Code Behind Form - Saurabh Nandu</h3> <form runat="server"> <table border="1" width="100%"> <tr> <td width="100%" colspan="2">Please fill in the form</td> </tr> <tr> <td width="35%">Name</td> <td width="65%"> <input type="text" id="Name" name="Name" size="20" runat="server" /> </td> </tr> <tr> <td width="35%">E-Mail</td> <td width="65%"> <input type="text" id="Email" name="Email" size="20" runat="server" /> </td> </tr> <tr> <td width="35%">Message</td> <td width="65%"> <textarea rows="7" id="Message" name="Message" cols="26" runat="server"> </textarea></td> </tr> <tr> <td width="100%" colspan="2"><input type="submit" value="Submit" id="B1" name="B1" OnServerClick="Post_Form" runat="Server" /></td> </tr> </table> </form> <p><a href="http://www.MasterCSharp.com">www.MasterCSharp.com</a> - Master C#, the easy way...</p> </body> </html></pre></td> </tr> </table><br>The <b>Inherits</b> attributa tell the runtime which class the page inherits, and the <b>Src</b> attribute tells the runtime which file contains the source code for the page class. <p>That does it! You have separated your code and design into two separate files!! What an achievement !! Try calling the first.aspx page in your browser .... It should work just like magic!<br> Just a tip for the brave hearts, you can configure HTML editor like MS FrontPage as the default editor for *.aspx files. In MS FrontPage go to <i>Tools -> Options -> Configure Editors</i> and add a reference to *.aspx. Since now your code is separate from the design, your design team can continue to work on the design of '*.aspx' files without having to worry of causing any damage to your work! Isn't that kool !!</p> <p><span class=wboxheado>5) Compiling the Source Code into a PE file</span><br> The above solution works very well in production environments, you can just make changes to the source code file and the subsequent requests will gracefully use the updated code. If you have a look at the internal process of ASP.NET, when the page with code behind is called for the first time, it gets compiled and then its loaded into memory and subsequent requests are served from the memory. When you update the source code, the runtime senses it and compiles the new code again and subsequent requests are served from the new copy.</p> <p>When we are developing solutions for clients many times we are not comfortable to distribute the source code along with the application, since the client's team could at a future date use some of our functions and algorithms. There was little you could do with plain ASP to avoid this, but ASP.NET provides an elegant solution to this problem too! Instead of placing the source code, you can just distribute the compiled Dll's along with your application! Since the Dll's are compiled your code gets safeguarded!</p> <p>Diving into how to achieve this,<br> <span class=wboxhead>a) Create the 'bin' directory</span><br> The ASP.NET runtime can automatically pickup/reference assemblies for web applications from the <b>bin</b> directory. So create the <b>bin</b> directory within our <i>firstform</i> directory. i.e. its full path should be '<i>C:\InetPub\WWWRoot\FirstForm\Bin</i>'. The <i>bin</i> directory should be typically located within the Virtual Directory, incase you have other applications nested within a Virtual Directory, still the <i>bin</i> directory will reside within the Virtual Directory and not the nested directory.</p> <p><span class=wboxhead>b) Compile the Source Code.</span><br> Open the <i>Command Prompt</i>, and navigate to the directory holding our source code file <i>first.cs</i> (directory C:\InetPub\WWWRoot\FirstForm\). Then use the following command to compile the code.<br> <b> csc /t:library /r:System.dll;System.Web.dll /out:bin/First.dll First.cs</b><br> This will create a <i>First.dll</i> library assembly in the <i>bin</i> directory.</p> <p><span class=wboxhead>c) Updating the ASP.NET Page</span><br> Since now we will be using compiled Dll and not the source code, move the <i>first.cs</i> source code file to some other temporary directory (you don't want to distribute the source code too, right!!).<br> Now update the ASP.NET page <i>first.aspx</i> and remove the <i>Src="First.cs"</i> attribute from the first line and Save the page.<br> So the final updated design page becomes,</p> <table border="0" width="100%" class="code"> <tr> <td width="100%"><pre><%@ Page Language="C#" <b>Inherits="First"</b> %> <html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>Welcome to My First Code Behind Form</title> </head> <body> <h3>Welcome to My First Code Behind Form - Saurabh Nandu</h3> <form runat="server"> <table border="1" width="100%"> <tr> <td width="100%" colspan="2">Please fill in the form</td> </tr> <tr> <td width="35%">Name</td> <td width="65%"> <input type="text" id="Name" name="Name" size="20" runat="server" /></td> </tr> <tr> <td width="35%">E-Mail</td> <td width="65%"> <input type="text" id="Email" name="Email" size="20" runat="server" /></td> </tr> <tr> <td width="35%">Message</td> <td width="65%"> <textarea rows="7" id="Message" name="Message" cols="26" runat="server"> </textarea> </td> </tr> <tr> <td width="100%" colspan="2"><input type="submit" value="Submit" id="B1" name="B1" OnServerClick="Post_Form" runat="Server" /></td> </tr> </table> </form> <p><a href="http://www.MasterCSharp.com">www.MasterCSharp.com</a> - Master C#, the easy way...</p> </body> </html></pre></td> </tr> </table><br>Call the page again from your browser.... wolla! You have succeeded!!<br> On the side note, COM programmers should not worry, since this Dll does not require any more registration, nor is it locked down by the operating system.<br> Internally, the ASP.NET runtime creates a copy of the dll in its memory, all requests are served from this copy, hence your Dll is always free. To update the code, just XCopy the updated code and the runtime will sense the change and create another fresh copy of the code in memory and subsequent requests will be served from the new code! <p><span class=wboxheado>Conclusion</span><br> I hope I have been descriptive enough to describe this trivial but easy and powerful process of separating code from design! Happy coding :)</p>