asp.net core2 mvc 基础教程--继续讲 Tag Helpers 和复习 View Component

条件 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 目录下才能全局可用。