- ASP.NET MVC - Self-hosting
- ASP.NET MVC - Deployment
- ASP.NET MVC - Unit Testing
- ASP.NET MVC - Bootstrap
- ASP.NET MVC - Scaffolding
- ASP.NET MVC - Web API
- Nuget Package Management
- ASP.NET MVC - Data Annotations
- ASP.NET MVC - Razor
- ASP.NET MVC - Caching
- ASP.NET MVC - Security
- ASP.NET MVC - Validation
- ASP.NET MVC - Databases
- ASP.NET MVC - Model Binding
- ASP.NET MVC - Helpers
- ASP.NET MVC - Data Model
- ASP.NET MVC - Views
- ASP.NET MVC - Selectors
- ASP.NET MVC - Filters
- ASP.NET MVC - Actions
- ASP.NET MVC - Controllers
- ASP.NET MVC - Routing
- ASP.NET MVC - Life Cycle
- ASP.NET MVC - Getting Started
- ASP.NET MVC - Environment Setup
- ASP.NET MVC - Pattern
- ASP.NET MVC - Overview
- ASP.NET MVC - Home
ASP.NET MVC Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
ASP.NET MVC - Views
In an ASP.NET MVC apppcation, there is nothing pke a page and it also doesn’t include anything that directly corresponds to a page when you specify a path in URL. The closest thing to a page in an ASP.NET MVC apppcation is known as a View.
In ASP.NET MVC apppcation, all incoming browser requests are handled by the controller and these requests are mapped to controller actions. A controller action might return a view or it might also perform some other type of action such as redirecting to another controller action.
Let’s take a look at a simple example of View by creating a new ASP.NET MVC project.
Step 1 − Open the Visual Studio and cpck 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 Apppcation.
Step 4 − Enter the project name ‘MVCViewDemo’ in the Name field and cpck 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 cpck Ok.
It will create a basic MVC project with minimal predefined content. We now need to add controller.
Step 6 − Right-cpck 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 cpck ‘Add’ button.
The Add Controller dialog will appear.
Step 8 − Set the name to HomeController and cpck ‘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.
Let’s 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 { pubpc class HomeController : Controller{ // GET: Home pubpc ActionResult Index(){ return View(); } pubpc string Mycontroller(){ return "Hi, I am a controller"; } } }
Step 9 − Run this apppcation 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 let’s 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 { pubpc class HomeController : Controller{ // GET: Home pubpc ActionResult Index(){ return View(); } pubpc string Mycontroller(){ return "Hi, I am a controller"; } pubpc ActionResult MyView(){ return View(); } } }
Step 11 − Run this apppcation 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-cpck 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 cpck ‘Add’ button.
We now have the default code inside view.
Step 14 − Add some text in this view using the following code.
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = device-width" /> <title>MyView</title> </head> <body> <span> Hi, I am a view </span> </body> </html>
Step 15 − Run this apppcation 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.
Advertisements