ASP.NET MVC "Hello World" tutorial.

by Abe Miessler 6. December 2009 22:12

After listening to one of my coworkers rave about how wonderful MVC was for the last week I decided it was time to cut my teeth with the ASP.NET MVC 1.0 framework and find out for myself if it was really all it was cracked up to be.  Below you will find step by step instructions to creating your first basic ASP.NET MVC “Hello World” application.


To begin you must download the ASP.NET MVC framework which can be found here.


Once this has installed open Visual Studio and create a new ASP.NET MVC Web Application:



Next you will be asked if you would like to create Unit Tests for this application.  Since this is beyond the scope of this tutorial we will select “No” and continue.


We now have our base MVC Project and we will begin adding functionality.  Let’s start by adding a model to the project.  To do this right click on the “Models” folder and select Add->Class and name it “Person.CS”.



In our new class we will create a new string member called “Name”.



Next we will add a controller class called HelloWorldClass.cs.  To do this, right click on the “Controls” folder and click “Add New Item”.  In the Add New Item dialog box select “MVC Controller Class” and name it “HelloWorldController.cs”.  As you continue through this tutorial you will probably notice that this Controller contributes little to the project.  While we could get away without having a Controller for a project that is this simple, I wanted to introduce the concept to illustrate how Models, Views and Controllers interact with one another.



Now we will reference the Person model from the HelloWorldController and add a function called “SayHello”.  When you are done your HelloWorldController should look like this:



The “HelloWorldController” now has a function that will accept a string called “username” and return that to the View.  In order to complete this process we must now create a View that will display what is returned by the “SayHello” function.  To add our view you must first right click on the “Views” folder and add a new folder called “HelloWorld”.  Once created right click the folder and select Add->New Item.  In the “Add New Item” dialog select “MVC View Content Page” and name it “Greet.aspx”.



Next you will be prompted to select a master page.  The default one will work fine for our project so just click ok.



Now we will add some simple code to display a greeting to whatever name is in ViewData[“PersonsName”].  When you are finished your page should look like this:



The last step we need to take is also the step that I found the most confusing.  In the global.asax file we must update the RegisterRoutes method to map to our new page with the appropriate parameters.  For simplicitiy sake I will just provide the code to enter in but if you would like to see Routing explained I have a post that goes into more detail here.


To setup routing for this project we will add the following code BEFORE the default route that is already in the RegisterRoutes method.


            routes.MapRoute(

                "HelloWorld",

                "HelloWorld/{action}/{userName}",

                 new

                 {

                     controller = "HelloWorld",

                     action = "SayHello",

                     userName = "Mystery Man"

                 }

            );


When you done it should look like this.



Now it is time to see the fruits of our labor.  Run your project for the first time.  You should see the following page:



Now you must enter a URL that will be routed to our newly created page.  To do this enter “HelloWorld/Greet/Abe” after the URL above.  When you do you should see the page below:



Congratulations! You have created your first ASP.NET MVC page!

 

Conclusions:

While I had originally setout to find advantages of MVC vs Forms I feel that this tutorial really only served to introduce me to using the MVC framework.  Now that I am familiar with MVC I hope to do another tutorial that demonstrates (or dosn't) the advantages that MVC has over Forms.  Stay tuned...

Tags: , , ,

Blog | ASP.NET | MVC

Powered by BlogEngine.NET 1.6.0.0