Friday, November 15, 2013

ASP.Net MVC 5 Hello World App

ASP.Net MVC 5 Hello World App

Step 1: First launch Visual Studio 2013 Preview.

1.jpg

Step 2: Click "New project" and change the framework version to 4.5 or higher.
  2.jpg
Here you can only see "ASP.Net Web Application" and "Portable Class Library". In Visual Studio 2013, the web tooling team has moved the options into the next screen. 

Currently Visual Studio 2013 is in beta therefore there could be changes to this completely.
Step 3: Select "ASP.Net Web Application". Select "MVC" and click the "Create Project" button.
3.jpg
If you want to configure various authentication then click "Configure Authentication" and select your authentication model. This article is just for a simple Hello World so I'm not covering that.
Project creation is in progress.
4.jpg
Step 4: Project hierarchy in Visual Studio 2013.
5.jpg  

Step 5: Select Internet Explorer as your default browser and press F5. In a different article, I'll explain about "Page Inspector". 
6.jpg  

The page looks 
as in the following:
7.jpg
 
Step 6: Right-click in the controller folder then select "Add Select Scaffold".

 
8.jpg  

Step 7: Select "MVC 5 Empty Controller" and click the "Add" button.
9.jpg  

Give the controller the name "HelloWorldController" and it will be added under the Controllers folder.
20.jpg
 
Step 8: Now we need to add a view. Create a new folder called "HelloWorld" under the view folder.
Right-click on the HelloWorld view folder them select "Add"  then  select "MVC 5 View" then "Empty without model".

 10.jpg
Step 9: In the "index.cshtml" page, do the following as described below.                
11.jpg  

Step 10: Now press F5, to run the application and navigate to http://localhost:portnumber/HelloWorld/Index to see the newly created helloworld page. 
12.jpg
 

Hope this helps someone to start with ASP.Net MVC 5 (using Visual Studio 2013 Preview) helloworld application.

No comments:

Post a Comment