Views
Views in ASP.NET MVC
In an ASP.NET MVC application, there is no concept of a page like in traditional Web Forms.
When you type a URL in the browser, it does not point to a physical page.
The closest equivalent to a page in ASP.NET MVC is called a View.
What is a View?
A View is responsible for displaying the user interface (UI).
It contains HTML and Razor syntax.
Views are returned by controller action methods.
Views do not handle requests directly.
In MVC:
Controller handles requests
Action method processes logic
View displays output
Flow in ASP.NET MVC
Browser sends a request
Controller receives the request
Action method executes
Action returns:
A View, or
A string, or
A redirect, etc.
View renders HTML to the browser
Example
Lets take a look at a simple example of View by creating a new ASP.NET MVC project.
Step 1 − Open the Visual Studio and click File → New → Project menu option.
A new Project dialog opens.
Step 2 − From the left pane, select Templates → Visual C# → Web.
Step 3 − In the middle pane, select ASP.NET Web Application.
Step 4 − Enter the project name MVCViewDemo in the Name field and click Ok to continue. You will see the following dialog which asks you to set the initial content for the ASP.NET project.
Step 5 − To keep things simple, select the Empty option and check the MVC checkbox in the Add folders and core references for section and click Ok.
It will create a basic MVC project with minimal predefined content. We now need to add controller.
Step 6 − Right-click on the controller folder in the solution explorer and select Add → Controller.
It will display the Add Scaffold dialog.
Step 7 − Select the MVC 5 Controller Empty option and click Add button.
The Add Controller dialog will appear.
Step 8 − Set the name to HomeController and click Add button.
You will see a new C# file HomeController.cs in the Controllers folder which is open for editing in Visual Studio as well.
Lets update the HomeController.cs file, which contains two action methods as shown in the following code.
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MVCViewDemo.Controllers { public class HomeController : Controller{ // GET: Home public ActionResult Index(){ return View(); } public string Mycontroller(){ return "Hi, I am a controller"; } } }
Step 9 − Run this application and apend /Home/MyController to the URL in the browser and press enter. You will receive the following output.
As MyController action simply returns the string, to return a View from the action we need to add a View first.
Step 10 − Before adding a view lets add another action, which will return a default view.
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MVCViewDemo.Controllers { public class HomeController : Controller{ // GET: Home public ActionResult Index(){ return View(); } public string Mycontroller(){ return "Hi, I am a controller"; } public ActionResult MyView(){ return View(); } } }
Step 11 − Run this application and apend /Home/MyView to the URL in the browser and press enter. You will receive the following output.
You can see here that we have an error and this error is actually quite descriptive, which tells us it can't find the MyView view.
Step 12 − To add a view, right-click inside the MyView action and select Add view.
It will display the Add View dialog and it is going to add the default name.
Step 13 − Uncheck the Use a layout page checkbox and click Add button.
We now have the default code inside view.
Step 14 − Add some text in this view using the following code.
@{ Layout = null; }
Step 15 − Run this application and apend /Home/MyView to the URL in the browser. Press enter and you will receive the following output.
You can now see the text from the View.