Web Apps with C# - Hello world II – Continued

Ok so we successfully created a web app. But what’s happening under the hood? You know the web server should only serve html pages, because that’s what web browsers understand. How is it that we can harness the power of the C# language, yet produce HTML pages?

Well let’s spend a bit of time finding out. You will recall, if you have done any web development in many of the other scripting languages, that you have to code this stuff by hand. Essentially what you would be doing is through a series of puts/print/echo statements you would construct a html document that would be sent to the stdout stream that the web server can use to construct a valid html page. So you could have something like:

with (this.fOut)

      puts('')

      puts(' ')

This is very similar to what is happening behind the scene in VS. The .NET framework together with IIS is essentially doing the same thing. It’s taking tags that it understands and re-writing them to tags that the browser understands. Actually what its doing is converting and parsing. Other languages like PHP, Perl, Python, classic ASP, etc do something similar. Difference is that VS is giving you the ability to design as though you would in a forms designer and output HTML.

Code written in .NET languages (like C#) is compiled into a .NET assembly. Essentially they are compiled into a .DLL or .EXE file. Then that file is run in the context of the .NET runtime, or “Hosted by the .NET Runtime”. This is generally referred to as an interpretive language. Your code is complied into some kind of pseudo code and interpreted into proper machine code by a runtime or interpreter. This is exactly the same concept behind the other languages like PHP.

By doing this your app has access to the.NET framework, .NET libraries, where the Framework handles things like memory management, security, garbage collection etc.

The code that you write in a .aspx.cs file gets compiled into a .NET assembly. This file, as well as other files in your project like the .aspx files, web.config files, css files images etc is all uploaded to a web server. When the very first user requests a page, say for example the Default.aspx page, what happens is the ASP.NET runtime engine sees the page directive in the first line of your aspsx page

%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

It looks for the code file and then inherits properties that are stipulated in the directive, the stuff between the % tags. It does this in order to associated itself with the underlining assembly that was created based on the C# code. So the page directive is the hook-up between the HTML world and the .NET assembly world. Based on that the runtime that your html page is associated with that particular assembly and executes the methods in the assembly based on the requests and actions taken by the viewer of your web page.

So when you dragged a control from the toolbar to the designer, the two-way tools created some code in your source. Notice in your source there are two special tags, beginning with

So run the application again. Then in the browser click view source. Notice that it turned our label control into a span
<span id="Label1">Label>/span>
and our button control into a input type submit tag
<input type="submit" name="Button1" value="Button" id="Button1" />
So the runtime engine actually turns your code into real HTML that the browser can understand. Imagine trying to write all this code and functionality yourself.

There are also some other things happening here. There is a concept of view state by the use of a hidden field. We will be looking at that at a later stage. There also might be some JavaScript injected into the HTML, based on what type of functionality has been enabled in our application.

This is really oversimplified, but seeing as we are just starting out it might prove helpful to understand some of the internals in a basic form. We don’t have to know every thing about ,NET or how it works in order to be productive. But some knowledge can help. As you progress you will learn more, and this will make you into a more productive and astute programmer. You can then instead pour all of your efforts into what really matters, and that is writing code. ASP. Net takes care of all the dirty work behind the scenes., That's what makes VS and VWD the logical choice for web development. You can focus on the task at hand, and that is writing code and concentrating on the logic that is applicable to your application.

If you have saved your solution by using the defaults you can find your files in \Documents\Visual Studio 2008\Projects\WebApplication1.

So now you have one web page done. But you want more. Well you can add new items in many different ways. You can click the new item button on the toolbar, you can select from the file menu, Project->Add new Item, or you can right click on the project in solution explorer and select 'add new item', or you can use the ctrl+shft+A keyboard shortcut. You will get an items window similar to the one when you first started the project. You will see categories and templates. Select the web category to filter out the web templates, and then Choose web form. You will see a bunch of other templates that can be used. But for this lesson we will concentrate on the web form.

So select the web form. Rename it to something of your choice, I am going to rename it to SecondWebForm.aspx. Click the add button. You will notice that you will have a second page in the solution explorer, and your page is open and selected in the main area. If the source is not selected select it now. You will notice that it looks very similar to the first page you create. That's because we are using the same template.

What I want to show you now is that you can work directly in the source view, even dragging and dropping most controls. So drag a label from the toolbar and place it between the div tags. After the label tag create another line by entering on the keyboard, and drag a button and place it underneath the label. Change the label text to "Just another label”. Then, here is something that will, well freak you out. Paste the following code above the html tag, or you can type it in to get a feel of the intellisense. Put it within a script runat server tag.

protected void Button1_Click(object sender, EventArgs e) { Label1.Text = "Hello World for the second time"; }

Also change the page directive, line 1 to look like the following:

Page Language="C#"

So what’s happening here? C# code in my HTML page. Well notice the script tags You can place any acceptable script and code for that language in between the script tags. The page directive tells the compiler that this is a C# page. To find out what script is supported. Place your caret to just after the runat=”server” property press space. Intellisense will pop-up. Type in “type” or scroll to select type. Then with no spaces type in “=” and inverted comma [”] intellisense should popup to show available scripting. So how will this work? Well the runtime engine will strip out your C# code and place that into a compile assembly. Just as if you had written a code behind file.

Then in your asp: button tag place the following code:

<asp:Button ID="Button1" run at="server" onclick=Button1_Click"" text="Button" />

Run the application and test.

You might notice that you still have the default.aspx page, and clicking the button the page still behaves like the default.aspx page. Well this is because Default.aspx is set to be the start-up file. To change that, close the browser then in solution explorer. Right click on the seconwebform.aspx page and select the “set as start page” menu option. Run and test again.

What I like to do is to have VS set the start page automatically depending on which page I am on and which page I want to test. So close explorer again. In solution explorer, right click on the project, not the solution, the second branch in the tree, and select properties. A page will appear in the main area under the Webapplication1 tab. From the Tabs on the left choose web, then under start action select the current page radio button. Save and close, and run and test. Now you will have whatever page you’re on as the start page. There is a little caveat to this, and that is, if you are on a class or on a no web executable page, you will receive an error. No problem just close and select the correct page and start again. But this is entirely the choice of the developer. Whatever suits you?

Now you should have the correct second web form page in your browser. Click the button and notice that your inline script code is executed. Neat.

Doing it this way is just a matter of preference. But it could be a bit confusing if your page has huge amounts of code to manage. It might be better to separate this code behind from the xml files.

"script runat='server'" tag