标签: blazor-server-side

我在 ASP.NET Core 3 预览版 4 中使用服务器端 Blazor 组件。

我有一个父组件和子组件，使用相同的共享模型，如下所示：

模型 ：

public class CountModel
{
    public int Count { get; set; }

    public void Increment()
    {
        Count++;
    }
}

父组件：

@page "/count"

<CascadingValue Value="currentCount">
    <h1>Count parent</h1>

    <p>Current count is : @currentCount.Count</p>

    <button class="btn btn-primary" onclick="@currentCount.Increment">+1 from parent</button>

    <CountChild></CountChild>
</CascadingValue>

@functions {
    private CountModel currentCount = new CountModel();
}

子组件：

<h1>Count child</h1>

<p>Current count is : @currentCount.Count</p>

<button class="btn btn-primary" onclick="@currentCount.Increment">+1 from child</button>


@functions {
    [CascadingParameter]
    private CountModel currentCount { …

我的公司正在从遗留代码库转向更现代的平台，我们正在转向 Blazor。我们目前刚刚参与 ORM 和最佳实践，似乎有很多关于项目设置的相互矛盾的想法（至少从我收集到的内容来看）。我目前的结构如下：

首先是一个名为 DAL 的类库——这是我们的“数据层”。我们正在使用 Dapper，它相对简单。示例类如下所示：

public class Person
{
      public string Id {get; set;}
      public string FirstName {get; set;}
      public string LastName {get; set;}

      public Person() {}
      public Person(DbContext context) {}

      public void GetPerson(int id) {}
      public void DeletePerson(int id) {}


      etc....
}

第二个项目是引用项目 DAL 的服务器 Blazor 项目。项目划分如下：

1. 模型 - 这些是当前正在处理的项目的特定模型。例如，一个模型可能是多个表（来自 DAL 类的模型）的组合，或者只是用于网页表单的字段。

一个例子可能是这样的：

public class EmployeeModel
{
    public int Id {get; set;}
    public int Department{get; set;}
    public DateTime HireDate {get; set;}
    public decimal Salary {get; set;} …

在 Blazor 中使用普通的单页剃刀组件。我可以IJSRuntime在页面顶部像这样注入：

@inject IJSRuntime JSRuntime

如果我为组件在 .razor.cs 文件后面创建了一个代码，我如何将类似的内容IJSRuntime注入到代码隐藏文件中？

我正在 Blazor 服务器端页面中设置计时器。目标是每 x 秒调用一次 API，并根据返回值更新 UI。

我得到这个代码：

private string Time { get; set; }

protected override void OnInitialized()
{
    var timer = new System.Threading.Timer((_) =>
    {
        Time = DateTime.Now.ToString();
        InvokeAsync(() =>
        {
            StateHasChanged();
        });
    }, null, 0, 1000);
    base.OnInitialized();
}

这效果很好。UI 每秒更新一次新的时间值。但是，我不知道如何调用异步任务来获取值。我想更换线路：

Time = DateTime.Now.ToString();

一行调用以下函数：

private async Task<string> GetValue()
{
    var result = await _api.GetAsync<StringDto>("/api/GetValue");
    return result.Text;
}

我试过这条线：

Time = GetValue().Result;

但我收到以下错误：

The current thread is not associated with the Dispatcher. Use InvokeAsync() to switch execution to …

有什么区别

@(await Html.RenderComponentAsync<Todo>(RenderMode.ServerPrerendered))

和

@(await Html.RenderComponentAsync<Todo>(RenderMode.Server))

我正在查看文档，但无法真正找到解释差异的内容。并且也不太明白枚举上的代码注释：

    // Summary:
    //     Renders a marker for a Blazor server-side application. This doesn't include any
    //     output from the component. When the user-agent starts, it uses this marker to
    //     bootstrap a blazor application.
    Server = 2,
    //
    // Summary:
    //     Renders the component into static HTML and includes a marker for a Blazor server-side
    //     application. When the user-agent starts, it uses this marker to bootstrap a blazor
    //     application.
    ServerPrerendered = …

Blazor 服务器是一项出色的技术，但它经常因 SignalR 无法重新连接到服务器而出现故障。

如何在生产中解决这个问题？我让人们将笔记本电脑置于睡眠状态或将手机与网站连接 5 秒钟，然后“尝试重新连接”。

并且总是失败。用户等待只是为了看到“重新加载”按钮。

即使网站在移动浏览器或休眠电脑的浏览器中未处于活动状态，是否仍需要克服此问题并强制重新连接 SignalR？

当我创建一个新的、干净的 Blazor .NET 6.0 应用程序并启动它（使用 Visual Studio 2022）时，我在浏览器控制台中看到以下错误：

WebSocket connection to 'ws://localhost:60908/BlazorApp3/' failed: (aspnetcore-browser-refresh.js:234)

还有其他人知道这个吗？知道这是否是 VS2022 的错误以及如何修复它？

所以基本上我想用服务器端 blazor 创建图表，我一直在寻找一些可以让我创建图表的包。问题是它们都非常昂贵：

1. 电传
2. 同步融合

我发现的唯一免费替代方案也是不错的选择是 ofc。ChartJs，但它使用了明显的 js，这并不是我真正想要的方向。

那么是否有任何“好”的 Blazor 图表库是免费的，让我可以创建充满图表类型的普通手，例如面积图、折线图、条形图......？

如何将参数传递给 razor 组件？

到目前为止我试过

@(await Html.RenderComponentAsync<Rateplan>(RenderMode.ServerPrerendered, new { id= 100}))

但我收到一个错误

InvalidOperationException：不支持使用参数预呈现服务器组件。

我用 RenderMode.ServerPrerendered 尝试了同样的事情，但我收到一个错误

InvalidOperationException: 不支持带有参数的服务器组件。

我也试过做

<Rateplan Id="100"></Rateplan>

但这甚至没有启动组件。

我遇到了一个基本的 blazor 项目的问题。我有一个父组件和一个带有事件回调的子组件，我希望它传回一种类型的 T。我遇到的问题是我在将 MethodGroup 转换为 EventCallback 时出错。如果我将其转换为使用 Action 则它可以工作，但我不能异步执行，这并不理想。任何想法我做错了什么？

家长

<Child
DeleteCallback="@OnDelete"></Child>

public async Task OnDelete(T item)
{
}

孩子

@typeparam T

[Parameter]
public EventCallback<T> DeleteCallback { get; set; }

 <a @onclick="() => DeleteCallback.InvokeAsync(item)"></a>

我在这里添加了一个 repo 来解释这个问题。查看 Blazor 的问题，这应该已在 2019 年修复。https://github.com/scott-david-walker/EventCallbackError