Web Applications with C# and Visual Web Developer

Web Apps with C# and Visual Web Developer

Let's get started

Ok, so you've downloaded Visual Web dev and all supporting tools like SQLExpress AJAX etc. Now you want to get started and start writing code. Surprisingly in Visual studio you can do lot without even writing a single line of code. Well here we go! What we will do is something very simple at first, but as we move along it will develop into something more significant. You have to craw before you can walk, walk before you can run. We will create a web site or web application that will show you the workflow (steps, process, etc) of a typical web application. Ok so it will be the most famous application ever created in the world. Care to take a guess. "Hello World". Whoever did that should have patented it, they would have made millions. It may be simple but there are some basic and foundational things to learn that will put you in good stead as we carry on in these tutorials.

OK so open Visual Web Developer (VWD) or Visual Studio (VS). We will now create a new project and solution. Notice that you can create a project from two different places. When VWD opens you will notice a start page with different windowed type sections. One of them being a "Recent projects". Which will list, obviously you recent projects, then at the bottom of that section you are able to open or create new projects. You can also do so by using the menu. Choosing File -> New -> Project. A new project window will open. You will notice two sections, one project types. This being self explanatory, allows you to create different project types. You will also notice that you have a choice of which language you can develop in. We will choose C#. So under c# choose the project type of "Web". To the left of that section you will notice a Template section. These are templates supplied by MS, third parties or yourself that when chosen give you a project with some pre-written code, suiting the template chosen, with in which you develop your application. SO there will be different template for each project type. Go ahead and select "ASP.Net web application. Also, notice that near the top right hand corner, you will see a button labelled ".NET Framework 3.5". Clicking that button you will notice a dropdown list with some other version of the framework. This is framework targeting. It allows you to target a certain framework. SO if you choose .NET 2.0, then your application will target that framework. What this means is that you won't have access to any of the higher framework functionality, like LINQ, etc. SO for the time being leave it at .NET 3.5. Then at the bottom is where we can name our project and solution and set its location and a few other things, which are not important at this moment. So you can name the project and solution now, or just leave the defaults, which is what I am going to do. Click "OK" to get started

The first thing you will notice is that you get presented with the VWD IDE. You will also notice a tabbed interface, of which one of the, the currently selected one is Default.aspx. A web site and web page is created based on the template, "web", that we selected. You will also notice a few other windows, one of which is the solution explorer on the right hand side. If it's not there, you can invoke by going to the menu and choosing View->Solution Explorer, or pressing cntrl-alt-L key combination. In the solution explorer you will notice the solution and project structure. Also you will see the Default.aspx file. The aspx extension denotes to the .net runtime engine that will handle the post backs that will come from our web users. It lets the engine know that it will be responsible for this page.

As I mentioned before the Default.aspx page is automatically opened in our main area and can be selected by selecting the tabs on the top. What we have in line 1 is something that does not look like anything like HTML. But everything else looks pretty much like what you will see in an HTML document. You have html tags, head tags, body tags, div tags, etc. Also note that we are currently looking at the source view of our web page, also denoted by the currently selected button tab at the bottom of the main window are. There you will notice two other buttons Design and split. Click the design tag, brings you to a WISIWIG design interface, similar to what you might get in any WISIWIG Web authoring tool, like FrontPage or Expression. You can drag and drop visual elements and work with a more graphical view of you web page. Then the split button takes this one step further, where the source view and design view are split within the same workspace. SO you can easily see what source is responsible for which graphical component. Making changes in the design view will make changes in the source and vice-versa. I tend to work in the split view, but the choice is yours. To the left you might also see the toolbar window. Once again if it's not there you can get it by using the menu, View->Tool box or the ctrl+alt+L key combination.

Our First Web App.

Ok, what we want to do now is go to the tool box and drag some controls onto the Design surface. So from the toolbox, under the standard tab, drag a label and a button to the design surface. Both controls will be place right next to each other. Using your arrow keys twice, place the curser caret between the label and button, press enter to move the button to the next line.

This is where the separation comes from building just another HTML page. Notice that it is not all that different from developing windows forms. Where you can visual design a form, place controls on that form, set properties, create events etc.

So double click on the button. You will notice another page appear. This will be filled with C# code. This code looks very similar to the code behind file of a windows application. If you have been doing the windows tutorials you will notice the similarities. Notice also, that we get an event handler that looks similar to a button click event handler on a windows form. These are no different to the onclick events found in dbase forms. Ain't it amazing that we can get event handlers in web forms AKA web pages. We will see how theses work later on. This enables us to write C# code for events that take place or are raised by our web form, this make the web page highly interactive, and enables us to mimic certain windows forms behaviour. This file is named default.aspx.cs. In our solution explorer you will find it in a tree hierarchy under the default .aspx, denoting a supporting dependency between the two.

In the code behind file, pace you care between the two curly braces under the Button1_Click event. The braces denot the beginning and end of the function. Curly braces are used extensibly in C# denoting the begin and end of code block. We will find out more about this later. So now we can start typing C# code. Start by typing Label1. Keep in mind that C# is a type safe language, which means that it is case sensitive. SO the label id is Lable1. Note as you start typing, the intellisense window starts up. Whats intellisense for anyway you might ask. Well if you ever tried to see all the properties methods events etc of the dotnet framework, there is no way you can remember it all. Itellisense helps us to navigate throu tons of stuff that is irrelevent and also helps us find stuff that we might have forgotton. You can either choose to type the full name of the control, or select it. The type a dot '.' Intellisense pops upo again. Now you can shoose methods and properties that belong to the label. SO what we are going to do is type: Label1.Text = "Hello World"; Dont forget the line termination character for c# the semi-colon ";". What are we doing, we are setting the text property of the lable to "Hello world". Similar to the text property in a windows forms application. What this does is everytime someone clicks the button the text property of the label will be changed to "Hello world". Test the application by click the play button next to the debug dropdown or pres F5 function key.

You will get a message box. This happens each and every time you run a application for the first time. All it telling you that you dont have debug property set in you config file set.It give you the opertunity to have the IDE automatically set that, or for you to not run with debugging. Choose ok, we will explain this and the web config file at a later stage.

The browser opens, but notice a balloon message on the status bar. Stating as ASP.Net Development server and a random port number. This is a development web server, similar to IIS. It is the default for VS and VWD. This is so that you can develop web apps even if you do not have IIS. It is also much lighter that IIS. You will notice that in the address bar is the web address where you web app is hosted. This being the local server (Casini) on a random port.

In your browser click on the button. Notice that when you do, the text Label1 is changed to "Hello world". SO we have an interactive application. We are able to write real C# code. WE are able to design web forms similar to that of windows forms. We will see how all this works later on.

Pretty cool hey. We are able to leverage C# skills in developing web applications, by being able to drag and drop controls from the toolbox to the design surface. Just like in windows forms development. We are able to dounle click on various controls then write C# code to handle events. And then we are able to deliver to the user a very interactive web based application.

But how does this all work behind the seens.

To be Continued ......

About The Author Robert Bravery is a programmer, first stated out with dBASEIII, moved to C# and web development and loving it. Stay In South Africa, work from home, developing and hosting websites. Website Design and Development