也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

1 创建视图

Razor View 文件是为操作方法提供视图。 您可以在 Views->ControllerName 文件夹下创建此文件，并在我们的应用程序中创建 CityController.cs 文件。 这个控制器中有一个东京方法

using Microsoft.AspNetCore.Mvc;namespace AspNetCore.Views.Controllers{        public class CityController : Controller        {                public IActionResult Tokyo()                {                      return View();                }         } }

对于此操作方法，我们在 Views->City 文件夹下创建自己的视图。 注意文件夹的名称没有Controller后缀，是City而不是CityController

因此在应用程序的Views文件夹中创建一个名为City的新文件夹，选择Add->New Item，在弹出的对话框中选择Razor View -Empty并将其命名为Tokyo.cshtml

视图模式为空，在视图中添加以下代码

Welcome to Tokyo

运行应用程序并进入 URL-:7019/City/Tokyo，我们将听到浏览器中渲染的视图

如果我在同一个控制器中有另一个名为名古屋的操作，则此视图适合东京的操作

using Microsoft.AspNetCore.Mvc;namespace AspNetCore.Views.Controllers{      public class CityController : Controller      {            public IActionResult Tokyo()            {                  return View();            }            public IActionResult Nagoya()            {                  return View();            }      }}

现在我们将在 Views->City 文件夹中创建一个 Nagoya.cshtml 视图文件，我们只在其中显示消息

Welcome to Nagoya

在应用中，下图为2个View的位置

2 添加查看快捷方式

在Visual Studio中，您可以使用快捷键将View添加到操作中。 右键单击操作方法的名称，然后在菜单中选择“添加视图”。 Visual Studio 将打开一个对话框。 您可以选择视图并为视图命名。 如果没有Controller文件夹，则手动创建

3.使用Razor句型在View中编写自定义逻辑

可以在视图中编写业务逻辑代码，如if、foreach语句，例如：在视图中添加如下代码：

@if (DateTime.Now.DayOfWeek == DayOfWeek.Monday){    
It's a Boring Day}else{    
It's a Party Day}

还可以在视图中添加以下代码

@{    string[] countries = new string[] { "England", "France", "Germany", "China" };    
        @foreach (string country in countries)        {            
@countries        }    
}

4 如何在ASP.NET Core View中调用Action方法

在视图中，添加 HTML 表单和提交按钮。 单击该按钮时，表单将提交给匹配的操作。 url 使用表单操作属性设置。 我们使用以下两个帮助选项卡创建表单操作的 url：

1asp-controller - 指定控制器的名称，如果省略该参数，框架将手动查找与当前视图关联的控制器

2asp-action - 指定action方法的名称添加jquery，如果省略该参数，框架将手动搜索与当前视图关联的action

示例：更新 Tokyo.cshtml 视图文件以包含以下表单代码

Welcome to Tokyo    
        名称        
                    
    
    
        性别        
                            Female                Male                    
    
    
        
            保存        
    

请注意使用两个帮助器标记 asp-controller="City" 和 asp-action="Tokyo" 来创建 URL。 当表单提交时，CityController 控制器中的 Tokyo 方法将被调用。 method="post" 属性告诉操作发布方法调用

该表单有 2 个 html 控件用于输入用户和性别。 当提交这个表单时，action方法会收到对应的值

    Female    Male

现在在CityController中添加一个POST版本的Tokyo方法，代码如下

[HttpPost]public IActionResult Tokyo(string name,string sex){    return View();}

为了获得这2个值我们需要在控制器中添加2个参数，现在运行应用程序并输入URL-:7019/City/Tokyo，在表单中输入值并提交，您将进入控制器的action方法获取值

5共享视图

共享视图保存在Views->Shared目录中，页面可以在不同的action之间共享。 让我们通过一个例子来理解它。 在 HomeController.cs 文件中创建一个名为 CallSharedView 的新操作方法。 代码如下：

public IActionResult CallSharedView(){   return View();}

我们将CallSharedView方法代码复制到另一个控制器ExampleController.cs

现在，Home 和Example 控制器分别具有名为CallSharedView 的方法。 我们为这两个操作方法创建一个共享视图，因此在 Views->Shared 文件夹中添加一个视图文件，并将其命名为 CallSharedView.cshtml。 该视图的名称与两个控制器中的操作方法的名称相同

这个视图相当简单，我们使用 h1 标签来显示消息

Displaying from Shared View

ASP.NET Core 确保所有共享视图都可用，并确保它们可用，运行应用程序并使用我们之前创建的 2 个方法在浏览器中打开以下两个连接

6 ASP.NET Core如何搜索视图文件

ASP.NET Core 操作将从以下两个位置搜索视图文件：

/Views//.cshtml/Views/Shared/.cshtml

例如下面AdminController中的List方法，最后一行调用了View()方法

public IActionResult List() {    return View();}

ASP.NET Core 在两个位置查找视图：

1/Views/Admin/List.cshtml => 如果在该位置找到文件，则会渲染视图，如果在该位置没有找到文件，则会在第二个位置搜索

2/Views/Shared/List.cshtml => 如果在这里找到文件它将渲染该文件，如果没有 View 将抛出错误

我们没有为Lis​​t方法添加视图文件，在这种情况下会抛出错误，因此运行应用程序并输入以下url，您将看到视图未检测到的异常消息

我们只需要在/Views/Admin文件夹或者/Views/Shared文件夹中添加List.cshtml

6.1 区域视图

如果您的控制器属于 ASP.NET Core 区域，您可以从以下 3 个位置进行搜索：

/Areas//Views//.cshtml/Areas//Views/Shared/.cshtml/Views/Shared/.cshtml

让我们看一个反例，首先在应用程序的根目录中添加一个新的 Areas 文件夹，然后在 Areas 文件中添加一个 Sales 文件夹

在Areas->Sales文件下添加一个新的AdminController，并在这个控制器中添加一个List方法

using Microsoft.AspNetCore.Mvc;namespace AspNetCore.Views.Areas.Sales{    public class AdminController : Controller    {        public IActionResult List()        {            return View();        }    }}

在Program.cs类中添加区域路由

app.MapControllerRoute(    name:"myArea",    pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}"    );

运行应用程序并在浏览器中打开 url-:7019/Sales/Admin/List，我们会听到视图文件未渲染的错误，ASP.NET Core 从以下三个位置搜索视图：

1/Areas/Sales/Views/Admin/Show.cshtml => 如果在此文件夹中找到文件，则将渲染视图，如果没有，将在第二个位置搜索

2/Areas/Sales/Views/Shared/Show.cshtml => 如果在该文件夹下找到视图，则展示该视图，如果没有，则去第三个位置搜索

3/Views/Shared/Show.cshtml => 如果在此文件夹下找到视图，则渲染该视图，如果没有，则抛出异常

7布局视图

无论 ASP.NET Core 是外部应用程序 UI 还是某些其他技术都包含保持不变的通用部分，例如：徽标区域、标题菜单、左侧导航以及两侧或顶部区域的工具链，ASP.NET Core 都有一个名为 _Layout.cshtml 的布局视图包含公共 UI 部分，并且布局视图必须位于 Views->Shared 文件夹中

注意：如果您的应用程序已经有布局文件，您可以将其删除，我们将从头开始创建一个新的布局文件

我们在Shared文件夹下添加一个新的_Layout.cshtml文件

_Layout.cshtml 文件将被创建，我们打开并编辑它

            
        @RenderBody()    

你可以清楚地看到它包含使用一小部分 Razor 代码的 HTML 代码块，例如 @ViewBag.Title 用于设置页面标题，@RenderBody() 渲染所有子视图，不包括部分，让我们首先了解 Layout 是如何实现的作品

7.1_ViewStart.cshtm文件

Razor 视图启动文件是 _ViewStart.cshtml 文件，位于 Views 文件夹中。 它包含的代码将首先运行。 代码比较简单，告诉dotnet使用_Layout.cshtml作为默认布局文件

@{    Layout = "_Layout";}

如果没有 _ViewStart.cshtml 文件，那么我们需要通过向每个视图添加以下 Razor 代码来告诉它们默认布局

@{    Layout = Layout;}

所以就有了这个文件，去掉很多重复的代码。 同样，如果应用程序有 ViewStart 文件，但不想将其应用到视图中，在这种情况下添加 @{ Layout = null; 到视图

7.2 使用 Bootstrap 设计布局

我们可以使用 Bootstrap 包来设计我们的页面。 首先，我们需要安装 Bootstarp 软件包。 安装完成后会在wwwroot->lib->bootstrap目录下。 我们创建的 ASP.NET Core Web App（模型-视图-控制器）模板已经在项目 Bootstrap 中预装了

所以我们检查该文件夹，发现它已经安装了，现在我们在_Layout.cshmtl中添加3个设计部分。 这些都是：

1 将 bootstrap.min.css 样式添加到页面的腹部

2 在页面后面添加应用程序不同操作方法的引导导航菜单链接

3 在页面顶部添加页脚

现在添加一个新的Action方法并将其命名为TestLayout，代码如下：

                
            
    
        
            @RenderBody()        
    
    

现在我们为应用程序创建一个通用页面，现在我们创建一个新的操作测试 TestLayout 页面

public IActionResult TestLayout(){    ViewBag.Title = "Welcome to TestLayout";    return View();}

我们设置ViewBag.Title变量，布局会读取这个值并显示当前页面标题

这段View代码比较简单，只有2行。 该视图作为 _Layout.csthml 的子视图呈现。 我们讨论了@RenderBody()。 它的主要功能是渲染_Layout.cshtml文件中的子视图来替换@RenderBody()代码的调用

运行应用程序打开：7019/Home/TestLayout 如下图：

7.3 段落布局

布局部分帮助我们在布局文件中的指定位置插入子视图的内容。 这对于应用程序设计来说非常简单。 通过使用@Section表达式定义子视图中的内容，我们使用@RenderSection在布局视图部分中渲染它，我们在TestLayout.cshmtl中添加3个布局部分作为显示：

1 上衣

2 底部

3个脚本

@section Top {    
This is Top}@section Bottom {    
This is Bottom}@section Script {    }
TestLayout starts here
This text is coming from child view

这些部分可以包含 html 和 razor 代码。 这里我们在底部和顶部添加一些简单的DIV，并引入脚本部分。 接下来，添加代码以在应用程序的 _Layout.cshtml 文件中呈现此部分。 我们来更新一下_Layout.cshmtl文件代码如下

                
    
    @RenderSection("Top");    
        
            @RenderBody()        
    
    @RenderSection("Bottom")    @RenderSection("Script")    

运行应用程序并测试：

7.4 布局可选段落

可选布局段落实际上是在子视图中定义的，但我们不想使用它。 我们通过一个反例来理解一下。 在layout布局文件中再添加一段调用Ads

这里我们没有在 TestLayout.cshml 视图中定义任何段落，现在运行应用程序，您将看到未处理的异常：

Layout 视图不会在子视图中检测到此段落添加jquery，我们可以通过在 TestLayout.cshtml 视图中添加以下代码来修复此错误

@section Ads {}

我们还可以通过另一种方式解决这个错误，确保该段落在布局页面中是可选的，使用该可选段落如果子视图中未定义该段落，dotnet将忽略它

我们使用@RenderSection方法的第二个参数，进入Layout页面，将@RenderSection("Ads")更改为@RenderSection("Ads", false)，使该部分成为可选

<html><head>    <meta name="viewport" content="width=device-width" />    <title>@ViewData["Title"]</title>    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /></head><body>    <header>    </header>    @RenderSection("Top");    <div class="container">        <main role="main" class="pb-3">            @RenderBody()        </main>    </div>
    @RenderSection("Bottom")
    @RenderSection("Ads",false);
    @RenderSection("Script")    <footer class="border-top footer text-muted">        <div class="container">            ASP.NET Core Site        </div>    </footer></body></html>

源代码地址

参考

[1]