Blazor笔记-Component Dom Manage

更新记录#

注意：非教程。纯笔记，日常查询用的。需要教程的小伙伴找几本书看看即可哈哈，有Vue基础的话非常快，概念都是通的。非工作需要不建议深入学习Blazor，深入Vue吧，用的多，哈哈。

完整目录地址：https://www.cnblogs.com/cqpanda/p/17596348.html

点击查看

2024年3月7日 发布。
2023年8月1日 迁移笔记到博客。

Component Dom Manage#

Element Reference#

<input @ref="textInput" />

@code {
 ElementReference textInput;

 //use
 textInput.FocusAsync();
}

HTML head#

直接放在页面中即可

<HeadContent>
  <meta property="og:title" content="@BlogPost.Title" />
 <meta property="og:description" content="@(new string(BlogPost.Text.Take(100).ToArray()))" />
 <meta property="og:image" content= "@($"{_navman.BaseUri}/pathtoanimage.png")" />
 <meta property="og:url" content="@_navman.Uri" />
 <meta name="twitter:card" content="@(new string(BlogPost.Text.Take(100).ToArray()))" />
</HeadContent>

Virtualize component#

Virtualize is a component in Blazor that will make sure that it only renders the components or rows that can fit the screen. If you have a large list of items, rendering all of them will have a big impact on memory.

The Virtualize component works just like a foreach loop.

<ul>
 @foreach (var p in posts)
 {
 <li><a href="/Post/@p.Id">@p.Title</a></li>
 }
</ul>

same as

<Virtualize Items="posts" Context="p">
 <li><a href="/Post/@p.Id">@p.Title</a></li>
</Virtualize>