1 Form帮助标签
下面给与了表单常用的帮助标签
方法 | 描述 |
asp-controller | 根据应用程序的路由指定目标Controller,如果省略,使用当前视图文件所在的控制器 |
asp-action | 根据应用程序的路由指定目标Action方法,如果省略,使用视图文件当前Action方法 |
asp-route-* | 指定url额外的段,例如 asp-route-id 使用提供id段的值 |
asp-route | 通过指定路由的名称生成action属性 |
asp-area | |
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
...
...
@model Product
@{
ViewData["Title"] = "新增";
}
我们视图中创建一个form标签,使用asp-controller="Home"和asp-action="Create"帮助标签创建html表单的action属性
表单的method是post,当提交表单时Create的方法被调用,在HomeController中添加2个Create方法,一个是HTTPGet另外一个是HttpPost
这两个Action方法的代码如下:
public IActionResult Create()
{
return View();
}
[HttpPost]
public IActionResult Create(Product product)
{
return RedirectToAction("Index");
}
提交表单新的产品将添加到repository,将会跳转到Index视图在产品列表显示所有的产品
....
1 在表单的隐藏域中添加一个安全的token
2 在响应添加一个cookie
如果表单中包含Cookie和隐藏的值,应用程序将处理这个请求,恶意站点不能访问,因此阻止了CSRF
@model Product
@{
ViewData["Title"] = "Create";
}
// removed for clarity
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Create(Product product)
{
return RedirectToAction("Index");
}
2 Label帮助标签
Label帮助标签用来设置HTML中的Label,我们在label上添加asp-for属性,在label标签上创建一个for属性,为了测试我们在为Create视图中的Label添加asp-for属性
运行应用程序,打开浏览器检查生成html源码
你会发现Name和Price输入框的type是Text,但是Quantity输入框的类型是number,这是因为ASP.NET Core基于模型属性类型给HTML控件提供type的值
模型类型 | 输入框类型 |
byte, sbyte, int, uint, short, ushort, long, ulong | Number |
float, double, decimal | text |
string | text |
bool | checkbox |
DateTime | datetime |
4 Select帮助标签
Select帮助标签用来指定模型属性并且针对下拉框元素可选
1 asp-for 用模型属性名字设置为Select元素的id和name属性
2 asp-items 给Select元素提供可选的值
我们把Create视图中quantity字段从输入框修改为选择框:
public ViewResult Edit() => View("Create", _repository.Products.Last());
进入编辑页面的地址
https://localhost:7182/Home/Edit,我们能清楚看到最后一条记录时400被自动选择在选择控件中
4.1 asp-items 特性
asp-items 特性使用指定下拉框列表中的元素,它用来帮助我们从数据源生成下拉框列表中的元素,修改Create视图下拉框代码,现在使用asp-items特性:
using AspNetCore.BuiltInTagHelpers.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using System.Diagnostics;
using static AspNetCore.BuiltInTagHelpers.Models.Repository;
namespace AspNetCore.BuiltInTagHelpers.Controllers
{
public class HomeController : Controller
{
private readonly ILogger
_logger;
private readonly IRepository _repository;
public HomeController(IRepository repository,
ILogger
logger ){
_repository = repository;
_logger = logger;
}
public ViewResult Edit()
{
ViewBag.Quantity = new SelectList(_repository.Products.Select(p => p.Quantity).Distinct());
return View("Create", _repository.Products.Last());
}
public IActionResult Index()
{
return View(_repository.Products);
}
public IActionResult Create()
{
ViewBag.Quantity = new SelectList(_repository.Products.Select(p => p.Quantity).Distinct());
return View();
}
[ ]
[ ]
public IActionResult Create(Product product)
{
_repository.AddProduct(product);
return RedirectToAction("Index");
}
public IActionResult Privacy()
{
return View();
}
[ ]
public IActionResult Error()
{
return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
}
}
}
ViewBag.Quantity 属性设置为SelectList 对象,使用仓储Quantity值来填充该对象,经过这么一番修改,我们实现了动态选择
5 Cache帮助标签
Some Content
Date Time: @DateTime.Now.ToString("HH:mm:ss")
@RenderBody()
现在刷新页面并且我们将看到时间在小时,分钟,秒没有任何变化,这是因为时间被缓存了
名称 | 描述 |
expires-on | 给缓存指定一个过期的绝对时间 |
expires-after | 指定一个缓存过期的相对时间,TimeSpan值 |
expires-sliding | 滑动时间,最后一次使用时间短, 它指定TimeSpan值中缓存过期的滑动时间 |
vary-by-query | 一个查询字符串的键,被用来管理不同版本的缓存 |
vary-by-cookie | 一个cookie名称用来管理不同版本的缓存 |
vary-by | 指定一个key用来管理不同版本的缓存 |
5.1 expires-after
在_layout.cshtml文件中为缓存代码添加expires-after特性:
<cache expires-after="@TimeSpan.FromSeconds(20)">
Date Time: .Now.ToString("HH:mm:ss")
</cache>
5.2 expires-on
在_layout.cshtml文件中为缓存代码添加expires-on特性:
Date Time: @DateTime.Now.ToString("HH:mm:ss")
时间被缓存直到2025年
Date Time: @DateTime.Now.ToString("HH:mm:ss")
这个缓存将在距离上次使用的20s后过期
为了测试,每两秒加载一次页面,你将会看到相同的时间,等待20秒之后重新加载页面,这时你将看到一个新的时间,这时因为这个缓存在最后一次加载时间20s之后过期
5.4 vary-by
vary-by特性使用指定一个key来管理不同版本的缓存,在_Layout.cshtml视图修改cache元素:
<cache expires-sliding="@TimeSpan.FromSeconds(20)" vary-by="@ViewContext.RouteData.Values["action"]">
Date Time: @DateTime.Now.ToString("HH:mm:ss")
</cache>
这意味着cache是基于当前action,我们有三个actions-Index,Edit和Create,因此3个版本的缓存将被创建(每个action方法都有一个),expire-sliding特性为每个版本设置滑动时间
Anchor帮助标签使用最广泛的内置帮助标签在ASP.NET Core框架,通过添加新的特性来加强anchor标签,这个特性基于应用程序路由构建anchor标签href
下面表格列举出重要的标签被使用通过anchor 帮助标签
描述 | |
asp-controller | 指定url将被定位到的控制器 |
asp-action | 指定url将被定位到的action |
asp-area | 指定url将被定位到的area |
asp-fragment | 指定url段(在#字符后面) |
asp-route | 指定url将被定位到的路由名称 |
asp-route-* | 指定额外的值针对url 例如asp-route-id="10"为路由段提供了一个id为10的值 |
@{
ViewData["Title"] = "Home Page";
}
@model IEnumerable
新增
我们没有提供asp-controller帮助标签,因为使用了相同的控制器(Index和Create方法在相同的控制器),如果我们使用asp-route-* 特性在anchor帮助标签,如下代码:
<a class="btn btn-primary" asp-action="Create">新增</a>
<a class="btn btn-dark" href="/Home/Create/20">新增</a>
7 Javascript帮助标签
JavaScript 帮助标签管理包含和排除Javascript文件从视图文件,使用JavaScript帮助标签使用重要属性:
名称 | 描述 |
asp-src-include | 指定在视图中包含的JavaScript文件 |
asp-src-exclude | 指定在视图中排除的JavaScript文件 |
asp-append-version | 指定是否把文件版本附加到连接地址,使用 Cache Busting |
asp-fallback-src-include | 如果使用的CDN出现一些问题时,指定备用的JavaScript文件 |
如果使用CDN出现一些问题,指定排除的JavaScript文件 | |
asp-fallback-test | JavaScript代码段,用来测试能否正确加载CDN |
我们也可以使用一些列通配符来创建匹配的文件,这些通配符可以配合asp-src-include, asp-src-exclude, asp-fallback-src-include和asp-fallback-src-exclude帮助标签一块使用
模式 | 例子 | 描述 |
? | JS/myscript?.js | 匹配单个模式排除'/',左边的例子匹配 ‘JS/myscript1.js’, ‘JS/myscriptZ.js’, ‘JS/myscripts.js’等 |
* | JS/*.js | 匹配任何期望的字符/除外,左边给与的例子匹配‘JS/myscript.js’, ‘JS/validate.js’, ‘JS/js123.js’等 |
** | JS/**.js | 匹配任何数量的字符包括/,左边给与的例子匹配‘JS/Validate/myscript.js’,‘JS/jQuery/validate.js’, ‘JS/js123.js’等 |
这种模式非常有用,可以提供给我们一种基于客户自定义逻辑的方式创建匹配规则
7.1 asp-src-include例子
如下图所示
bootstrap.js
bootstrap.bundle.js
bootstrap.esm.js
bootstrap.js.map
bootstrap.min.js
运行应用程序并且检查生成的HTML源代码,你将会发现下面JS文件被添加到head节点
因为我们在asp-src-include属性中通过使用通配符来包含这些文件,我们可以使用下面代码用来只包含bootstrap.bundle.js文件
<script asp-src-include="lib/bootstrap/**/*bundle.js"></script>
7.2 asp-src-exclude例子
<script asp-src-include="/lib/bootstrap/**/b*.js" asp-src-exclude="**.slim.*,**.min.*,**.bundle.*"></script>
运行应用程序检查生成的HTML源代码,你将发现只有bootstrap.js 和bootstrap.esm.js
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.esm.js"></script>
7.3 Busting asp-fragment Attribute
浏览器每次只下载一次图片,css文件和JS文件,并且将他们缓存在本地,当用户访问浏览器,我们将从缓存中读取这些文件,这样避免从服务器端加载文件从而使页面加载更快
如何处理这个问题,有一些方法告诉浏览器下载文件当js文件修改完,我们可以使用Cache Busting来解决这个问题
可以使用asp-fragment特性设置Cache Busting,它在JS文件的URL中添加一个checksum查询字符串作为版本号,如果修改JS文件,checksum将会改变,并且浏览器知道现在需要下载最新的js文件从服务器端来重新加载缓存
<script asp-src-include="/lib/bootstrap/**/b*.js"
asp-src-exclude="**.slim.*,**.min.*,**.bundle.*"
asp-append-version="true">
</script>
生成的HTML包含如下
当浏览器向服务器发出下一个请求时,如果发现服务器上js文件的checksum已经更改
因此,它从服务器下载该文件的最新版本。然后缓存新下载的文件,并在“?”字符后添加新的checksome
8 CDN帮助标签
CDN包含了大量数据服务分部在全球,所有这些数据都保存在网站服务器的静态文件下,如图像、CSS、JS,当用户在浏览器上打开网站时,浏览器不是从网站的服务器请求静态文件,而是从离用户位置最近的数据服务器请求
这减少了网站的加载时间也节省了宽带,如果网站比较小建议使用CDN
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"
asp-fallback-src-include="/lib/jquery/**/*.min.js"
asp-fallback-src-exclude="**.slim.**"
asp-fallback-test="window.jQuery">
</script>
src指定从哪里加载jQuery,在CDN加载失败的情况下,asp-fallback-src-include和asp-fallback-src-exclude 使用本地备用的JQuery以及排除本地jQuery文件,asp-fallback-test帮助标签定义JavaScript代码(‘window.jQuery’) ,用来测试是否jQuery从CDN加载成功
9 CSS帮助标签
名字 | 描述 |
asp-href-include | 指定视图中包含的CSS文件 |
asp-href-exclude | 指定视图中排除的CSS文件 |
asp-append-version | 指定css文件查询的版本号,用作Cache Busting |
asp-fallback-href-include | 指定包含的CSS文件,在CDN出现问题时 |
asp-fallback-href-exclude | 指定排除的CSS文件,在CDN出现问题时 |
asp-fallback-href-test-class | 指定一个CSS文件类测试CDN是否可用 |
asp-fallback-href-test-property | 使用CSS类的属性测试CDN |
asp-fallback-href-test-value | 指定一个测试值,用来确定CDN是否可用 |
9.1 asp-href-include例子
Bootstrap文件位于
wwwroot/lib/bootstrap/dist/css目录,如下图所示:
我们针对CSS文件使用 (**和*) 匹配模式
** – 匹配任何数量的字符包含'/'
* – 匹配任何数量的字符,排除'/'
这将添加文件名称已.css结尾,因此将包含下列文件
添加了大量的css文件像grid,reboot,rtl ,我们可以使用asp-href-exclude来移除它
9.2 asp-href-exclude例子
asp-href-exclude属性用来从视图中排除CSS文件,现在使用它来移除reboot和grid CSS文件. 如下代码所示:
现在,值包含1个CSS文件:
10 从CDN加载CSS
工作方式是将一个元素添加到的文档中, 这个元素在标记asp-fallback-test-class中定义
如下图所示
参考文献
[1]https://www.yogihosting.com/aspnet-core-introduction-tag-helpers/