当前位置 博文首页 > 文章内容

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

    作者: 栏目:未分类 时间:2020-07-16 11:02:07

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



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