标签: blazor

我有一个基本组件PetTemplate和第二个PetDog继承并使用PetTemplate. PetTemplate有一个名为 的方法ToggleDisplay。Index我的目标是当我单击页面上调用该方法的按钮PetDog.ToggleDisplay并在页面上显示/隐藏 PetDog 详细信息时。

下面示例代码中的“内部”按钮有效，但“外部”按钮无效。如何ToggleDisplay正确从页面或父组件调用该方法？

索引剃刀

@page "/"

<button @onclick="ShowPetDetails">Show Details (Outside)</button>

<PetDog @ref="dog" />

@code {
    PetDog dog;

    void ShowPetDetails()
    {
        dog.ToggleDisplay();
    }
}

宠物狗剃刀

@inherits PetTemplate

<PetTemplate Name="Dog">
    <div>Someone's best friend!</div>
</PetTemplate>

PetTemplate.razor

<div class="mt-3">
    <button @onclick="ToggleDisplay">Show Details (Inside)</button>
    <h3>Pet Name: @Name</h3>
    <div style="display:@display">
        @ChildContent
    </div>
</div>

@code {
    string display = "none";

    [Parameter]
    public string Name { get; set; }

    [Parameter] …

抱歉问了这个基本问题。

图像将粘贴并显示在使用 Blazor Server 创建的网页上。

我想定期更新此显示的图像。（例如每秒更新一次）

该图像存储在 wwwroot / imageFiles 位置，名称为 PreviewImage.bmp。

具体来说，我想在替换这个wwwroot/imageFiles下的PreviewImage.bmp时，将网页上显示的图像切换为替换后的图像。

例如，当我将显示狗的 PreviewImage.bmp 更改为显示猫的 PreviewImage.bmp 时，我想切换网页上显示的图像。

我想知道是否可以使用 StateHasChanged () 更新图像；用计时器，但这不起作用。

<img src="@previewImg" />

@code{
    
    private string previewImg = string.Empty;
    private Timer timer = new(1000);

    protected override void OnInitialized()
    {
        previewImg = @"imageFiles/PreviewImage.bmp";

        timer.Elapsed += (sender, eventArgs) => OnTimerCallback();
        timer.AutoReset = true;
        timer.Start();            
    }

    private void OnTimerCallback()
    {    
        _ = InvokeAsync(() =>
       {    
         previewImg = @"imageFiles/PreviewImage.bmp";
         StateHasChanged();
       });
    }
 }

但是，如果您使用 F5 键重新加载整个页面，图像将会更新。

有没有办法实现这种图像更新？

很抱歉，内容很难理解。

感谢您的建议。

我有一个 blazor 服务器应用程序，我需要知道在这里为我的应用程序存储一些重要信息，在 appsettings.json 中，一个 .resx 文件？或者别的地方？

在我的代码中，FirstName 和 LastName 总是有值，但 MiddleName 并不总是有值，所以我的问题是如何最好地创建一个连接三个变量的附加字符串，但如果 MiddleName 没有值，则不包括 MiddleName。

到目前为止，这是我的代码，但这太冗长了，我知道可以简化。

if (newContributor.MiddleName == "")
{
  newContributor.Url =
  newContributor.FirstName.Replace(" ", "-").ToLower() + "-" +
  newContributor.LastName.Replace(" ", "-").ToLower();
}
else
{
  newContributor.Url =
  newContributor.FirstName.Replace(" ", "-").ToLower() + "-" +
  newContributor.MiddleName.Replace(" ", "-").ToLower() + "-" +
  newContributor.LastName.Replace(" ", "-").ToLower();
}

大家有什么建议？

谢谢！

我正在尝试将字符串格式应用于来自资源文件的字符串。

<p class="note">@((MarkupString)(String.Format(Localizer["Test"], 2)))</p>

但这是它在浏览器中的显示方式：

You have done <span class="text-primary text-bold"> 2 </span> tests.

我应该怎么做才能让它采取正确的造型？

我已经尝试过这个解决方案，但它说：

The type or namespace name 'HtmlSanitizer' could not be found 

我正在使用 Blazor 服务器和 .NET6

编辑：我有一个名为 App.resx 的文件

<data name="Test" xml:space="preserve">
    <value>
      You have done 
      &amp;lt;span class="text-primary text-bold"&amp;gt; 
        {0}
      &amp;lt;/span&amp;gt;
      tests.
    </value>   
</data>

ARenderFragment期望只返回一个组件，但该组件可能具有嵌套组件：

private RenderFragment CreateRenderFragment()
{
    // This works
    return
    @<div>
        <text>Hello</text>
        <text>world!</text>
    </div>;

    // and so does this
    // return @<span><text>Hello</text> <text>world!</text></span>;
}

如果我们不想将组件包含在 a 中<div>，或者<span>我们可以按照约定创建一个 razor 组件ChildContent，例如ChildContentComponent：

@ChildContent

@code
{
    [Parameter] public RenderFragment ChildContent { get; set; }
}

然后使用该组件作为包装器：

private RenderFragment CreateRenderFragment()
{
    return
    @<ChildContentComponent>
        <text>Hello</text>
        <text>world!</text>
    </ChildContentComponent>;
}

我可能错过了一些东西，但我看不到任何其他方法来创建RenderFragment具有多个组件的组件。以下均不能编译：

private RenderFragment CreateRenderFragment1()
{
    return @<text>Hello</text> <text>world!</text>;
}

private RenderFragment CreateRenderFragment2()
{
    return
    @:@{
        <text>Hello</text>
        <text>world!</text> …

我有一个 8 列乘 97 行的数据网格我想用 for 循环在第 0 列中的每 4 行对从 0 到 23 的行进行编号

我想替换我对数字的硬编码。

    <div style="grid-row:2;grid-column:1;text-align:right;font-weight:bold">0</div>
    <div style="grid-row:3;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:4;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:5;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:6;grid-column:1;text-align:right;font-weight:bold">1</div>
    <div style="grid-row:7;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:8;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:9;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:10;grid-column:1;text-align:right;font-weight:bold">2</div>
    <div style="grid-row:11;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:12;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:13;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:14;grid-column:1;text-align:right;font-weight:bold">3</div>
    <div style="grid-row:15;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:16;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:17;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:18;grid-column:1;text-align:right;font-weight:bold">4</div>
    <div style="grid-row:19;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:20;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:21;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:22;grid-column:1;text-align:right;font-weight:bold">5</div>

等等

如何在 Blazor 中创建计时器组件并从组件或其他页面外部启动它。我的组件代码如下：

@using LosacoWeb.Shared.Enumes
@using System.Timers
@implements IDisposable

@if (BlnVisiblaState == true)
{
    <section>

        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2">
                    <div>

                        <div class="alert shortcode_modules" style="border-color:lightblue;border-style: solid;border-width: thin;padding: 5px;margin: 5px 10px;border-radius: 5px;" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span class="icon-close" aria-hidden="true"></span>
                            </button>
                            <div class="modules__title">
                                <h3 dir="rtl" style="float:right;">@MessageTitle</h3>
                            </div>

                            <div class="modules__content">
                                @if (message == MessagePanelColor.primary)
                                {
                                    <div class="alert alert-primary" role="alert">
                                        <strong>@MessageShortDescription !!!</strong>@MessageBuddyLongDescription
                                        @*<button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span class="icon-close" aria-hidden="true"></span>
                                            </button>*@
                                    </div>
                                }
                                @if (message == MessagePanelColor.secondary)
                                {
                                    <div class="alert …

我有这个代码：

dl.db.Table.First(x => x.Id == T.Id).Column1 = "a";
dl.db.Table.First(x => x.Id == T.Id).Column2 = "b"; 
dl.db.Table.First(x => x.Id == T.Id).Column3 = "c"; 
dl.db.Table.First(x => x.Id == T.Id).Column4 = "d"; 
dl.db.Table.First(x => x.Id == T.Id).Column5 = "e"; 

我想做这样的东西但我做不到

dl.db.Table.First(x => x.Id == T.Id){    
   Column1 = "a";    
   Column2 = "b";    
   Column3 = "c";      
   Column4 = "d";    
   Column5 = "e"; 
}

我的问题是：

• 每次打开SPA都会下载运行时吗？即使已缓存，Web应用程序的下载运行时间也不会花费太多时间吗？
• 是否将其他程序集（Nuget，C ++库等）发送到浏览器？如果是这样，是不是太昂贵了，会不会导致应用打开时间太长？
• 与V8上的JavaScript相比，性能是否足够好？
• 与Razor相比有什么惊人的区别吗？

并且，回答所有这些问题，是否有任何理由在Javascript上使用Blazor + Wasm？