English 中文(简体)
ASP.NET MVC - Views
  • 时间:2024-11-05

ASP.NET MVC - Views


Previous Page Next Page  

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.

Visual Studio

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.

MVCViewDemo

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.

Controller Folder

Step 7 − Select the MVC 5 Controller – Empty option and cpck ‘Add’ button.

The Add Controller dialog will appear.

Add Controller Dialog

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.

MyController

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.

MyView View

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.

MyView Action

It will display the Add View dialog and it is going to add the default name.

Add View Dialog

Step 13 − Uncheck the ‘Use a layout page’ checkbox and cpck ‘Add’ button.

We now have the default code inside view.

Use Layout Page

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.

I am View

You can now see the text from the View.

Advertisements