ASP.NET MVC - 视图

在ASP.NET MVC应用程序中,没有类似于页面的内容,当您在URL中指定路径时,它也不包含与页面直接对应的任何内容.与ASP.NET MVC应用程序中最接近页面的内容称为视图.

在ASP.NET MVC应用程序中,处理所有传入的浏览器请求由控制器和这些请求映射到控制器操作.控制器操作可能会返回一个视图,或者它也可能执行某些其他类型的操作,例如重定向到另一个控制器操作.

让我们通过创建一个新的View来看一个简单的View示例ASP.NET MVC项目.

第1步 : 打开Visual Studio,然后单击File → 新的 → 项目菜单选项.

打开一个新的项目对话框.

Visual Studio

第2步 : 从左侧窗格中,选择Templates →  Visual C# → 网站.

第3步 : 在中间窗格中,选择"ASP.NET Web应用程序".

步骤4 : 在"名称"字段中输入项目名称"MVCViewDemo",然后单击"确定"继续.您将看到以下对话框,要求您设置ASP.NET项目的初始内容.

MVCViewDemo

第5步 : 为了简单起见,选择Empty选项并选中'Add folders and core references for'部分中的MVC复选框,然后单击Ok.

它将创建一个基本的MVC项目,其中预定义最少内容.我们现在需要添加控制器.

步骤6 : 右键单击解决方案资源管理器中的控制器文件夹,然后选择Add → 控制器.

它将显示Add Scaffold对话框.

控制器文件夹

第7步 : 选择MVC 5 Controller  -  Empty选项并单击"Add"按钮.

将出现Add Controller对话框.

添加控制器对话框

步骤8 : 将名称设置为HomeController并单击"添加"按钮.

您将在Controllers文件夹中看到一个新的C#文件"HomeController.cs",该文件也可以在Visual Studio中进行编辑.

让我们更新HomeController.cs文件,该文件包含两个操作方法,如下面的代码所示.

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";
      }
   }
}

第9步 : 运行此应用程序并将/pend/HomeController添加到浏览器中的URL,然后按Enter键.您将收到以下输出.

MyController

As MyController action只返回字符串,从我们首先添加View所需的操作返回一个View.

步骤10 : 在添加视图之前,让我们添加另一个操作,它将返回默认视图.

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();
      }
   }
}

步骤11 : 运行此应用程序并将//Home/MyView添加到浏览器中的URL,然后按Enter键.您将收到以下输出.

MyView View

你我们可以看到我们有一个错误,这个错误实际上是非常具有描述性的,它告诉我们找不到MyView视图.

第12步 : 要添加视图,请在MyView操作内右键单击并选择添加视图.

MyView Action

它将显示Add View对话框,它将添加默认名称.

添加视图对话框

步骤13 : 取消选中"使用布局页面"复选框,然后点击"添加"按钮.

我们现在在视图中有默认代码.

使用布局页面

步骤14 : 使用以下代码在此视图中添加一些文本.

@{
   Layout = null;
}

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width" />
      <title>MyView</title>
   </head>
	
   <body>
      <div>
         Hi, I am a view
      </div>
   </body>
	
</html>
第15步 : 运行此应用程序并将//Home/MyView添加到浏览器中的URL.按回车键,您将收到以下输出.

我是查看

您现在可以在视图中看到该文本.