MVC in ASP.Net,C#

Introduction     

ASP.NET MVC 4 is a framework for building scalable, standards-based web applicationsusing well-established design patterns and the power of ASP.NET and the .NET Framework.In this article I will give an introduction to ASP.NET MVC 4 from a beginner’s perspective.

This article is meant for all kind of beginner users who wanted to get started with ASP.NET MVC 4. I have included a small comparison between ASP.NET MVC and ASP.NET Web forms for those who have already explored ASP.NET Web forms 

Currently ASP>NET MVC 4 is supported in Visual Studio 2010 and Visual Studio 2012, previous versions of Visual Studio does not support ASP.NET MVC 4 as of now. If you don’t have ASP.NET MVC 4 in your box then install MVC 4 for Visual Studio 2010 or else use Visual Studio 2012 to get started with this article, You may refer Setup Environment article for more installation details/procedures. 

What is ASP.NET MVC?  

ASP.NET supports three different development models named Web Pages, MVC and Web Forms.

ASP.NET MVC is a web application development framework built on top of Microsoft’s .NET Framework. ASP.NET Web Form was a replacement for Microsoft’s Active Server Pages (ASP) but ASP.NET MVC is not a replacement for ASP.NET Web Forms and it’s just an alternate way of making an ASP.NET website.

ASP.NET MVC is open source!- In March 2012, Scott Guthrie announced on his blog that Microsoft had released part of their web stack (including ASP.NET MVC, Razor and Web API) under an open source license (Apache License 2.0).

Why MVC?  

ASP.NET MVC helps to reduce the complexity of the web application by dividing an application into three layers, Model, View and Controller. This separation (loose coupling) helps in some long term benefits like isolation of components while development and also this separation provides better support for test-driven development (TDD). ASP.NET MVC web site are good in performance and also easy to maintain. 

MVC Release History   

The Current Version of ASP.NET MVC is 4 and it was released on 15^th Aug 2012. ASP.NET MVC 4 is packaged with Visual Studio 2012 and MVC 4 can be installed for Visual Studio 2010. Below I have mentioned the release history of ASP.NET MVC.            

Date	Version
10 Dec 07	ASP.NET MVC CTP
13 Mar 09	ASP.NET MVC 1.0
16 Dec 09	ASP.NET MVC 2 RC
04 Feb 10	ASP.NET MVC 2 RC 2
10 Mar 10	ASP.NET MVC 2
06 Oct 10	ASP.NET MVC 3 Beta
09 Nov 10	ASP.NET MVC 3 RC
10 Dec 10	ASP.NET MVC 3 RC 2
13 Jan 11	ASP.NET MVC 3
20 Sep 11	ASP.NET MVC 4 Developer Preview
15 Feb 12	ASP.NET MVC 4 Beta
31 May 12	ASP.NET MVC 4 RC
15 Aug 12	ASP.NET MVC 4

In this article we are discussing more about the latest version of MVC, that's MVC 4. Read more from Wikipedia on MVC Release History.  

MVC Architecture  

The Model-View-Controller (MVC) pattern is an architectural design principle that separates the application components of a Web application into three layers. This separation gives you more control over the individual parts of the application, which lets you more easily develop, modify, and test them.

The Model 

Model contains and exposes the properties and application logic  In a better way we can say that The model represents core business logic and data. In the ePhoneBook Sample the 'PhoneBookModel' class represents the properties of a “Phone Book” in the application and may expose properties such as First Name,  Last Name and Mobile Number etc and also it may expose methods.    

The View 

The View is responsible for creating the response HTML or any responses back to the browser like pdf, html or excel etc. In other way we can sat that the view is responsible for transforming a model or models into a visual representation.  

The Controller  

Controller is responsible for processing user inputs from view and give responses back to the view. It means that the controller decides the action and performs the tasks/logic based on the parameters.Controller acts as the coordinator between the view and the model. 

Creating an ASP.NET MVC Application

In this article all screen shots are based out of Visual Studio 2012 but If you are using Visual Studio 2010 then you will find similar UIs there too.To Create a new MVC 4 application we need to click on 'New Project' menu. 'New Project' menu can be accessed from the start page itself or File->New->Project menu. 

The below given image shows how to create 

1. New Project from start page.  

2. Creating New Project from File->New->Project.

3.Clicking on New Project menu will show a popup for selecting the required type of Project from      the installed templates list. We can create Windows Application or normal ASP.NET Web                  Application etc using this popup but now we are more interested to create a new ASP.NET MVC 4    Web Application from scratch. 

Give a proper name for this new MVC 4 application and click 'OK' button. I have given 'HelloWorld' name (or any other Name,what you want to give ) as I'm going to use this project for all my MVC 4 series.  

When you click 'OK', you’ll be presented with another dialog with Project Templates 

Select appropriate Project Template (discussed in another section), View Engine and also if you want you can opt for creating a Test Project for this application. You can create a test project later also if you don't want to do right now. I have selected the Internet Application with Razor View Engine. 

What's a View Engine? 

View Engine are responsible for rendering the HTML from your views to the browser. The view engine template will have different syntax for implementation. Currently there are few number of view engines available for MVC and the top four view engines are Razor, traditional ASPX, Spark and NHaml. I have written another article on comparison of different view engines.  

Razor is the preferred View Engine for MVC, ASPX View Engine is the legacy View Engine and this option is there for backward compatibility. 

Once you click 'OK' after selecting the appropriate project template Visual Studio will create a MVC Web Application project with default files and folders as per the Template Selection.

Now Visual Studio created our project in place and the solution file looks like , 

Now Expend Controller Folder,Views Folder see some default folder is created.Just Delete all the Default files from Controller Folder and Delete all the Default files from Views Folder( only files, do not delete Web.config file ).Model folder already empty

Now Right_Click on Controller Folder and Add ---> Controller

Now change the name of DefaultController to "HomeController" ( or give any name ).I use "HomeController". But do not delete Controller word bymistake Only delete Defalut word and give your file name

 

Right_Click on Views folder and create New Folder .Give the folder name,name of your Controller name which you created in Controller Folder.Now

Now Right_Click on newlly created Folder on Views folder ---> Add ---> View

Give the View Name and Uncheck the option "Use a layout and mastre page:". This option is by Default checked.

Click on MyHomePage.cs.Html page which is created in Views --> New folder 

and write some Message what you want to display in side the <div tag >.

Now Goto Controller folder and Click on HomeController.cs file. and write the code to call the Views page

give the Viwes page name in side the return View(); no need to write extension of the file like.....

return View("MyHomePage.csHtml"). Only write return View("MyHomePage");

Now press F5 and run your Program.

If it will show an Error Message just Run Your progarm and go to URL  and type /Home/GotoHome
like....  localhost: port number/Home/GotoHome   press enter
           localhost:39454/Home/GotoHome prss enter
 now it will show your Message