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 将抛出错误
我们没有为List方法添加视图文件,在这种情况下会抛出错误,因此运行应用程序并输入以下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 文件将被创建,我们打开并编辑它
@ViewBag.Title
@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,代码如下:
@ViewData["Title"]
UnderstandingControllersViews
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
@RenderBody()
ASP.NET Core Site
现在我们为应用程序创建一个通用页面,现在我们创建一个新的操作测试 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文件代码如下
@ViewData["Title"]
@RenderSection("Top");
@RenderBody()
@RenderSection("Bottom")
@RenderSection("Script")
ASP.NET Core Site
运行应用程序并测试:
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]
发表评论