Friday, 2 August 2013

ASP.NET MVC - Basics

MVC  is the abbreviation of Model View Controller, MVC is the Framework for building web applications

Model - Business Layer (Database)
View   - UI Layer (front end)
Controller - Action takes on Controller event


Let we see how the MVC works

Steps to create MVC application 

  • Open Visual studio 2010
  • Select ASP.NET MVC 2 Application.
  • Give the Project name and select OK.



In Solution Explorer You can see the Various Folders , Now we can see few of them which is important for this example. Controll

Controllers Folder : Hold the controller that means action to perform
Models Folder : Hold the Model or Database information with data
Views Folder : Holds the View of each and every Controller.

Now press F5 and see , The URL deosn't end with any extension but it shows the Home page Related to
HomeController -> action of Index, Because under the home view folder the action of Index page is set as Default page to launch at startup.


http://localhost:1429/  

Actual URL of above url is 

http://localhost:1429/Home

OR

http://localhost:1429/Home/Index

To Call a About Page or About Action inside a HomeController Just Place the Prefix name of the Controller Like "Home" For "HomeController" Along with concat of forward slash then add the name of the Action to call the page Like "Home/About".

http://localhost:1429/Home/About.

Now Let we see Programming , Add the Following code in Controller class "HomeController.cs"

Let we see Create a New View in Existing Controller
Step 1 :
Assign the value of name in ViewData 

public ActionResult Test()
{
   ViewData["name"] = "Rajesh";
   return View();

}


Step 2 : Add the Test.aspx view page in Home Folder of Views .

  •   Right Click the Home Folder Under the Views
  •   Select the Add Option
  •   Select the View,Then click ok.

Step 3 :
Add the following code in test.aspx, This will get the value of name from the viewData which is assigned in the HomeController class of Test Action.

   <h2><%: ViewData["name"] %></h2>


 Step 4 :
     Press the F5, Go to The URL "http://localhost:1429/Home/test".


Let we see Create a New View in New Controller

Instead of Step 1 We can add a new controller class  in controller and place the code in new controller. Instead of placing in existing controller.

Place the following steps instead of step 1 for add a new controller.


 Step 1 :
  •   Right Click the Controller folder 
  •   Select the Add Option
  •   Select the Controller to add the New controller, give any name post fix with controller "ValidateController" and click ok.

Now place the below code in ValidateController

public ActionResult Test()
{
   ViewData["name"] = "Rajesh";
   return View();

}



 Step 2 :


  • Add the Folder nameValidate under the View Folder.
  • Add the view name Test.aspx and Index.aspx under the Validate Folder.
  • Paste the following code in that Text.aspx
   <h2><%: ViewData["name"%></h2>

Press F5 , Go to URL http://localhost:1429/Validate/Test . You will get the Result.




Output:



From this article I hope that you can learn how to add the controller and view and how to transfer the data between them .