Quantcast
Channel: Suchismita Pany Tech Blog
Viewing all articles
Browse latest Browse all 2

Article 0

0
0

Create First ASP.NET MVC 4 Web Application :


This article will describe you how to create your first simple ASP.NET MVC 4 Web application, which will display “Hello World” to the user.Please refer this to know what is ASP.NET MVC4.

After you have installed ASP.NET MVC 4 (which is packaged with Visual Studio 2012 ) or to work with Visual Studio 2010,you can start creating new ASP.NET MVC 4 projects.

To start creating a new project, follow these steps .
  

Step 1 : Create a new project  


Open Visual Studio (2010, 2012, or Express) and choose FILE New Project as shown in figure 1.1.

Fig- 1.1 : Creating a new project in Visual Studio


Step 2 :  Select Asp.Net MVC 4 web Application and give the Name and Location for the Application 


In the New Project dialog, navigate to Templates ➤ Visual C# ➤ Web and select ASP.NET MVC 4 Web Application, name the project as MvcDemoApp andleave the other options at their default values, and then click the “OK” button , as shown in Figure 1.2 .
 

Fig – 1.2 : Creating an ASP.NET MVC 4 web application

 

Step 3 :  Select Project Template to begin with


In the New ASP.NET MVC 4 Project dialog, select the Empty Application template(to begin from scratch), select the default Razor view engine from the drop-down menu,we can check the “Create a unit test project” check box(will look into this in detail later) as shown in Figure 1.3.

Fig- 1.3 :Settings for the new ASP.NET MVC 4 web application project

Step 4 :  The Empty project will be open which is shown below


Click the “OK” button. Visual Studio will create the application, after which you will be ready to start building the functionality for the application.
Now, Our new solution will look like ,as shown in fig-1.4 .

 
Fig – 1.4 :ASP.NET MVC 4 web application


Step 5 :  Add Controller


Now Right click on the “Controller” folder and then select Add-->Controller. A pop-up will be open where you give the appropriate name with suffix as a controller,let's name it as HelloWorldControllerand click the add button,as shown in fig-1.5 .

Fig -1.5 : Add Controller


Once you add the new controller you should see some kind of code snippet as shown in fig-1.6 . Where ,
  • Controller is nothing but a class
  • ActionResult is return type of "Index" action method


Fig : 1.6 : Code snippet after adding controller

 

Step 6 :  Add View


Now, we will add the view for our controller. To do that open the “HelloWorldController”. Right-click on the "Index"action method and click on "Add View", as shown in fig-1.7 .

 
Fig-1.7 : Add View

Here , we can notice that view name is default as “Index”(same as controller action method), Default view engine is “Razor” and “Use a layout or master page” check box is checked by default (which will allow view to inherit master page automatically) .

Step 7 :  Glance of View


Here we can notice, Index.cshtml” file is created inside the “HelloWorld” folder which is inside the “Views” folder, as shown in fig -1.8 .  
Where “Index” is the controller action method and “HelloWorld” is our controller name. In Index.cshtml” the extension .cshtml indicates ASP.NET Razor C#file type .


  
Fig – 1.8: Glance of View


Step 8 :  Code snippet of View


Once you add the view you should see some kind of code snippet as shown in fig-1.9 .


 Fig – 1.9 :Code snippet of view

Step 9 : Type HelloWorld And Run the Application


After adding the view open the source and add your design. I will add one simple line in it, "Hello world! This is my first MVC application", as shown in fig – 1.10.


 
Fig- 1.10 : Hello World Mvc web application

Now, If you do a CNTRL + F5 to run the application, you should see an error as shown in the below figure. This error is obvious because we have not invoked the appropriate controller / action.


Fig – 1.11 :Server Error

Step 10 :  Here you go : Your First "Hello World" MVC Application


This is our final step . To resolve the above error , Open the RouteConfig file and set the default Action to open.


 
Fig – 1.12 : Open RouteConfig class

In RouteConfig.cs , change the default controller from “Home” to “HelloWorld” as shown in fig -1.13 .

  
Fig – 1.13 : Modify RouteConfig.cs file

Now press F5 and run the application.
Here is the output. 

 
Fig : 1.14 : Output 

Hope this will help to create your first ASP.NET MVC 4 web application.
Happy Reading :-)
 


Viewing all articles
Browse latest Browse all 2

Latest Images

Vimeo 10.7.0 by Vimeo.com, Inc.

Vimeo 10.7.0 by Vimeo.com, Inc.

HANGAD

HANGAD

MAKAKAALAM

MAKAKAALAM

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC

Vimeo 10.6.2 by Vimeo.com, Inc.

Vimeo 10.6.2 by Vimeo.com, Inc.

Vimeo 10.6.1 by Vimeo.com, Inc.

Vimeo 10.6.1 by Vimeo.com, Inc.

Vimeo 10.6.0 by Vimeo.com, Inc.

Vimeo 10.6.0 by Vimeo.com, Inc.

Re:

Re:





Latest Images

Vimeo 10.7.0 by Vimeo.com, Inc.

Vimeo 10.7.0 by Vimeo.com, Inc.

HANGAD

HANGAD

MAKAKAALAM

MAKAKAALAM

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC

Vimeo 10.6.1 by Vimeo.com, Inc.

Vimeo 10.6.1 by Vimeo.com, Inc.

Vimeo 10.6.0 by Vimeo.com, Inc.

Vimeo 10.6.0 by Vimeo.com, Inc.

Re:

Re:

Re:

Re: