条件 Tag Helpers
ConditionTagHelper：
[HtmlTargetElement(Attributes = nameof(Condition))] public class ConditionTagHelper : TagHelper { public bool Condition { get; set; } public override void Process( TagHelperContext context, TagHelperOutput output) { if (!Condition) output.SuppressOutput(); } }
使用 ConditionTagHelper：
<li class="nav-item" condition="SignInManager.IsSignedIn(User)"> <a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @User.Identity.Name!</a> </li> <li class="nav-item" condition="SignInManager.IsSignedIn(User)"> <form class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })"> <button type="submit" class="nav-link btn btn-link text-dark">Logout</button> </form> </li> <li class="nav-item" condition="!SignInManager.IsSignedIn(User)"> <a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Register">Register</a> </li> <li class="nav-item" condition="!SignInManager.IsSignedIn(User)"> <a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Login">Login</a> </li>
Tag Helpers 前缀
通过 Tag Helpers 前缀避免名称冲突。
以 "my:" 作为 Tag Helpers 前缀：
@tagHelperPrefix "my:" ... <ul class="navbar-nav"> <li class="nav-item" condition="SignInManager.IsSignedIn(User)"> <my:a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @User.Identity.Name!</my:a> </li> <my:li class="nav-item" condition="SignInManager.IsSignedIn(User)"> <my:form class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })"> <button type="submit" class="nav-link btn btn-link text-dark">Logout</button> </my:form> </my:li> ... </ul>
View Component
- 显示部分内容
- Mini Controller
- 可复用
- 只能配合父级 View 使用
建立 View Component：
- 继承 ViewComponent 父类
- 实现 Invoke() 方法
- 返回 IViewComponentResult
- 或实现 InvokeAsync() 方法
- 返回 Task<IViewComponentResult>
View Component 实例
InternetStatus：
public class InternetStatus : ViewComponent { public async Task<IViewComponentResult> InvokeAsync() { var httpClient = new HttpClient(); var response = await httpClient.GetAsync("https://www.baidu.com"); return View(response.StatusCode == HttpStatusCode.OK); } }
View Component 的 View：
@model bool @if (Model) { <span class="badge badge-success">Connected</span> } else { <span class="badge badge-danger">Not Connected</span> }
在 _Layout 中进行使用：
<div class="container"> <partial name="_CookieConsentPartial" /> <main role="main" class="pb-3"> @RenderBody() @await Component.InvokeAsync("InternetStatus") </main> </div>
注：View Component 只有放在 Shared 目录下才能全局可用。