猿教程 Logo

Asp.Net Core-视图

在ASP.NET Core MVC应用程序中,没有任何页面,它也不包括任何与你输入的URL直接对应的页面。 在ASP.NET Core MVC应用程序中最接近页面的东西被称为视图。

  • 如你所知,在ASP.NET MVC应用程序中,所有传入的浏览器请求都由控制器处理,这些请求将被映射到控制器中的操作方法来处理。

  • 控制器操作方法可能返回视图,它也可能执行一些其他类型的操作,例如重定向到另一个控制器操作方法等。

  • 使用MVC框架,创建HTML的最流行的方法是使用ASP.NET MVC的Razor视图引擎。

  • 要使用此视图引擎,控制器操作方法需要生成一个ViewResult对象,并且ViewResult可以携带我们要使用的Razor视图的名称。


  • 视图是文件系统上的一个文件,ViewResult还可以将模型对象携带到视图,并且视图可以在创建HTML时使用此模型对象。

  • 当MVC框架看到你的控制器操作方法产生一个ViewResult时,框架将在文件系统上找到对应视图,执行视图,产生HTML,这就是框架发送回客户端的HTML。


视图案例

让我们通过一个简单的例子,通过改变HomeController Index方法的实现来理解它在我们的应用程序中是如何工作的,如下面的程序所示。

using FirstAppDemo.Models; 
using Microsoft.AspNet.Mvc; 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Threading.Tasks;  
namespace FirstAppdemo.Controllers { 
   public class HomeController : Controller { 
      public ViewResult Index() { 
         var employee = new Employee { ID = 1, Name = "Mark Upston"}; 
         return View(); 
      } 
   } 
}

在HomeController中,不是生成ObjectResult,而是让我们返回View()方法返回的内容。 View方法不返回ObjectResult。 它创建一个新的ViewResult,所以我们也将Index方法的返回类型更改为ViewResult。 View方法在这里接受一些参数。 我们将调用此方法而不使用任何其他参数。 让我们保存您的文件并刷新您的浏览器。


这是因为MVC框架必须出去找到那个对应的视图,但是现在没有视图。

  • 默认情况下,在C#ASP.NET项目中的视图是具有* .cshtml扩展名的文件,视图遵循特定的约定。 默认情况下,所有视图都位于项目中的Views文件夹中。

  • 如果您不做其他配置,视图位置和视图文件名将由ASP.NET MVC派生。

  • 如果我们需要从HomeController的Index操作方法渲染一个视图,MVC框架将寻找该视图的第一个位置是在Views文件夹中。

  • 它将进入一个Home文件夹,然后寻找一个名为Index.cshtml的文件 - 文件名以Index开头,因为我们在Index操作方法中。

  • MVC框架还将查看共享文件夹和您放置在共享文件夹中的视图,您可以在应用程序中的任何位置使用它们。

为了使我们的视图正常工作,让我们在正确的位置创建这个Index.cshtml文件。 所以在我们的项目中,我们首先需要添加一个包含所有视图的文件夹,并将其命名为Views。 在Views文件夹中,我们将为与HomeController相关联的视图添加另一个文件夹,并取名为Home。 右键单击主文件夹,然后选择Add → New Item。


在左窗格中,选择MVC View Page并在名称输入框中输入index.cshtml,然后单击添加按钮。

让我们在index.cshtml文件中添加以下代码。

<html xmlns = "http://www.w3.org/1999/xhtml"> 
   <head> 
      <title>Home</title> 
   </head>
   <body> 
      <h1>Welcome!</h1> 
      
      <div> 
         This message is from the View...  
      </div> 
   </body> 
</html>

您现在可以看到一个* .cshtml文件。 它可以包含HTML标签,并且我们在这个文件中的任何标签将直接发送到客户端。 保存此文件并刷新浏览器。


现在Home控制器通过一个ViewResult来渲染这个视图到客户端的所有的标记。

让我们回到HomeController和View方法。 这个View方法有两个不同的重载,并传递employee 模型作为参数。

using FirstAppDemo.Models; 
using Microsoft.AspNet.Mvc; 
using System; 
using System.Collections.Generic; 
using System.Linq;
using System.Threading.Tasks;  
namespace FirstAppdemo.Controllers { 
   public class HomeController : Controller { 
      public ViewResult Index() { 
         var employee = new Employee { ID = 1, Name = "Mark Upston"}; 
         return View(employee); 
      } 
   } 
}

View方法只需要一个模型对象,并将使用默认视图,即Index.cshtml。 这里我们只想传入那个模型信息,并在Index.cshtml中使用这个模型,如下面的程序所示。

<html xmlns = "http://www.w3.org/1999/xhtml"> 
   <head> 
      <title>Home</title> 
   </head> 
   
   <body> 
      <h1>Welcome!</h1> 
      
      <div> 
         @Model.Name 
      </div> 
   </body> 
</html>

当我们在Razor视图中使用@符号时,Razor视图引擎将处理您键入的任何C#表达式。 Razor视图包含一些内置的成员,我们可以在C#表达式中访问。 最重要的成员之一是模型。 当你使用@Model时,你将得到从控制器传递到视图中的模型对象。 因此,@ Model.Name将在视图中显示员工姓名。

让我们现在保存所有文件。 之后,刷新浏览器以查看以下输出。


现在,您可以在上面的屏幕截图中看到员工姓名。


版权声明:本站所有教程均为本站原创或翻译,转载请注明出处,请尊重他人劳动果实。请记住本站地址:www.yuanjiaocheng.net (猿教程) 作者:卿文刚
本文标题: C#环境
本文地址:http://www.yuanjiaocheng.net/ASPNET-CORE/core-views.html