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 a 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 crawl 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 not 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 window type sections. One of them being a “Recent projects”. Which will list, obviously, your 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 of which is 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, within which you develop your application. So there will be different templates 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, 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 ctrl-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 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 area. There you will notice two other buttons Design and Split. Click ing 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 your 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 placed right next to each other. Using your arrow keys twice, place the cursor 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. Ain't it amazing that we can get event handlers in web forms AKA web pages. We will see how these 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, place your cursor between the two curly braces under the Button1_Click event. The braces denote the beginning and end of the function. Curly braces are used extensively in C# denoting the beginning 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 Label1. Note as you start typing, the intellisense window starts up. What's intellisense for anyway you might ask? Well if you ever tried to see all the properties methods events etc of the dot net framework, there is no way you can remember it all. Intellisense helps us to navigate through tons of stuff that is irrelevant and also helps us find stuff that we might have forgotten. You can either choose to type the full name of the control, or select it. Then type a dot ‘.’ Intellisense pops up again. Now you can choose methods and properties that belong to the label. So what we are going to do is type:
Label1.Text = “Hello World”; Don't forget the line termination character for c#; the semi-colon “;”.
What are we doing? We are setting the text property of the label to “Hello world”. Similar to the text property in a windows forms application. What this does is every time 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 press F5 function key.
You will get a message box. This happens each and every time you run an application for the first time. All it is telling you is that you don't have debug property set in you config file set. It gives you the opportunity to have the IDE automatically set, 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 than IIS. You will notice that in the address bar is the web address where your web app is hosted. This being the local server (Cassini) 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 double 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 scenes?
To be Continued ......