标签: blazor-server-side

我在使用 Blazor 时遇到了一个奇怪的问题...

我有一个使用拖放功能的应用程序，它使用 .Net Core 3.1 运行良好。然而，无论我做什么，drop 事件现在都不会被解雇，我不知道为什么。因此，我创建了一个新的 Blazor 项目，并将所有内容保留在标准项目模板中，但我已使用以下代码修改了 Index.razor 页面，以查看是否可以找出问题所在：-

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<ul>
    <li draggable="true" @ondragstart="OnDragStart" style="background-color:blue;color:white;width:50px;height:50px;">drag me</li>
</ul>

<div dropzone="move" @ondrop="OnDrop" @ondragover:preventDefault style="background-color:green;color:white;width:200px;height:200px;">
    and drop me here
</div>

<div>@DragState</div>

@code {
    public string DragState = "waiting...";

    public void OnDragStart(DragEventArgs dragEventArgs)
    {
        DragState = "drag started";
    }

    public void OnDrop(DragEventArgs dragEventArgs)
    {
        DragState = "item dropped";
    }
}

据我所知，这应该有效，拖动开始事件工作正常，但任何浏览器（FireFox、Chrome 等...）我尝试放置事件永远不会被触发。

我猜我一定在某个地方做错了什么，但我看不到，所以我希望其他人可以:-)

请注意，我没有更改默认 Blazor 项目中的任何其他文件或设置，只是对 Index.razor 文件进行了此修改以测试拖放...

我用 Blazor 创建了一个服务器端应用程序，我想在每个页面请求中获取ip和用户代理，我该如何实现？在 .NET Core 应用程序中，我只需要在控制器中使用此代码：

var userAgent  = Request.Headers["User-Agent"].ToString()

但是在 Blazor 中，我无法检索这些数据。

我有一个 blazor 应用程序，但它分为两部分。- 一个包含多个网页的网站 - Blazor 应用程序

默认情况下，我希望导航到“index.html”页面。这将有一个“登录”链接，将重定向到主应用程序页面。

我该怎么做……默认情况下，我被定向到 index.cshtml（即 blazor 应用程序）？

我正在使用 EF 将数据保存在 DB 中，到目前为止，farm 工作正常并保存数据，但是当我尝试向表单添加验证时，它不起作用并且不显示任何错误消息或在数据库中保存任何数据。

工作和非工作代码示例。

下面没有验证的代码

Employee.cs

using System.ComponentModel.DataAnnotations;

    namespace BlazorSPA1.Data
    {
        public class Employee
        {
            [MaxLength(50)]
            public string Id { get; set; }
    [MaxLength(50)]
            public string Name { get; set; }

    [MaxLength(50)]
            public string Department { get; set; }
            [MaxLength(100)]
            public string Designation { get; set; }
            [MaxLength(100)]
            public string Company { get; set; }
            [MaxLength(100)]
            public string City { get; set; }
        }
    }

AddEmployee.razor

@page "/addemployee"
@inject NavigationManager NavigationManager
@inject IEmployeeService EmployeeService

<h2>Create Employee</h2>
<hr …

我已经搜索了 SO，关于这个主题有几个问题和答案，但没有一个解决这个特定问题。

我正在尝试编写一个Blazor 组件，它使用<select...>, 来更新从父级传入的变量。

我想单击下拉列表（选择/选项），选择一个选项，然后自动更新父级中的变量。

如果我不使用组件，我可以让它工作。但是我可以从组件中让它工作的唯一方法是我还在组件中使用一个按钮（请参阅组件代码中的按钮）。但最终会从同一个父级调用多个组件。每个组件都有一个单独的按钮是不切实际的。所以按钮必须消失。

该@bind使用“的onchange”参数来选择，这样就不会编译。

我试过CascadingValue/CascadingParam但这也不会更新父值（除非我使用按钮......）

这是家长：

@page "/test"
@page "/test/{param}"

@namespace ComponentTest.Pages

@using System.Web
@using ComponentTest.Pages

<h3>Test Page</h3>

<div class="border col-3">
    <h4>Parent</h4>
    <hr />
    <label for="parentValue">Parent Value</label>
    <input id="parentValue" @bind="@param"/>
</div>
<div class="col-3">&nbsp</div>
<div class="border col-3">
    <h4>Component Select</h4>
    <hr />
    <SelectComponent @bind-Item="@param"/>
</div>

@code {
    [Parameter]
    public string param { get; set; }
}

这是组件：

@using System.Collections.Generic
@using System.Web

<div class="form-group">
    <p>Component Value = @Item</p>
    <label for="Site" class="font-weight-bold …

当我尝试发送超过 50KB 的图像时，我在 Blazor 服务器应用程序上收到以下错误消息

错误：连接因错误“错误：服务器在关闭时返回错误：连接因错误而关闭”而断开连接。

我正在使用富文本框，当我在其上粘贴超过 50KB 的图像时，出现此错误。错误发生在 Blazor.server.js 上。此问题必须与可以通过 Web 套接字发送的数据限制有关，但是即使我将此限制更新为更大的大小，我仍然看到此问题。

这是我修改了限制的启动文件代码。

 app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
                endpoints.MapBlazorHub(options =>
                {
                    **options.ApplicationMaxBufferSize = 10 * 1024 * 1024;
                    options.TransportMaxBufferSize = 10 * 1024 * 1024;**
                });
                endpoints.MapFallbackToPage("/_Host");
            });

该错误发生在 blazer.server.js 上，并且每次发生时连接都会断开。有没有人在 Blazor 服务器上遇到过这个问题

本页介绍了如何创建 Razor 类库来放置共享组件。我试图创建一个示例 Blazor 服务器端项目，其中它index.razor有一个在 Razor 类库中定义的组件。有用。

我想做的是开发一个 Blazor 服务器端应用程序，将来可以将托管模型更改为 WASM。我想知道是否可以在共享 RCL 中创建页面和组件，在这种情况下，我可以在 Blazor 服务器端项目中创建控制器，并通过 Http 调用从 Razor 类库中使用它们。如果我想将托管模型更改为 WASM，这将在将来对我有所帮助。

无论如何，我已经尝试在 RCL 中创建一个 Blazor 页面，但是当我尝试调用里面写的 URL 时，@page它没有到达。

我想问你是否有可能实现这种行为。如果是，我错过了什么？

您可以复制我的示例，只需创建一个新的 Blazor 服务器端项目，使其引用 RCL，然后插入@page "/testpage"到Component1.razor

我在 Blazor 中有一个组件，它接受方法作为参数。

<SuppliersTable Loader="@LoadS" LoaderO="@LoadO" Adder="@Add" Updater="@Update" Remover="@Remove" />

@code {
    async Task<List<Supplier>> LoadS() => (await ModelServiceS.GetAllAsync()).ToList();
    async Task<List<Operator>> LoadO() => (await ModelServiceO.GetAllAsync()).ToList();
    async Task<bool> Add(Supplier model) => await ModelServiceS.AddAsync(model);
    async Task<bool> Update(Supplier model) => await ModelServiceS.UpdateAsync(model);
    async Task<bool> Remove(Supplier model) => await ModelServiceS.RemoveAsync(model);
}

但是如果你不把“@”放在方法名称前面，它会做一些完全不同的事情吗？编译器接受两种方式，这就是我问的原因。我有一种感觉，它使用“@”执行方法并将返回值作为参数传递，如果没有“@”，您只是引用父组件要调用的方法（这就是我想要的）。有人可以向我提供有关“@”用法的更多详细信息吗？

SuppliersTable 组件的参数类型如下：

[Parameter] public Func<Task<List<Supplier>>> Loader { get; set; }
[Parameter] public Func<Task<List<Operator>>> LoaderO { get; set; }
[Parameter] public Func<Supplier, Task<bool>> Adder { get; set; }
[Parameter] public Func<Supplier, Task<bool>> Updater { …

我的情况是这样的：我正在尝试实现和自动完成。

自动完成将有一个Parameter将接收 astring并返回 a IEnumerable<TValue>。

这是我正在尝试做的一个例子

自动完成.razor

@code {
    [Parameter]
    public SOME_TYPE GetItems { get; set; }

    async void Foo(){
        IEnumerable<TValue> items = await GetItems(SomeString);
        // do something with items
    } 
}

父组件.razor

<Autocomplete TValue="SomeEntity"
              GetItems="@GetItems" />

@code {        
    SOME_TYPE GetItems(string name) {
        IEnumerable<SomeEntity> entity = await GetEntitys(name);
        return entity;
    } 
}

问题是我不知道该放什么SOME_TYPE。我应该使用EventCallback吗？Action? 我应该使用什么？

我尝试使用EventCallback但看起来我无法从EventCallback? 我不知道。

我有一个来自标准 Blazor 服务器端模板的非常简单的示例，该示例表明即使在 StateHasChanged() 之后，计时器函数也不会更新 UI；已拨打电话。

日志输出显示定时器被触发，如果我等待几秒钟并单击 IncrementCount 按钮，计数值将跳转到计数器已被定时器递增的次数。

很好奇......任何帮助将不胜感激

亲切的问候，斯图尔特

@page "/counter"
@using System.Timers;

@using Microsoft.Extensions.Logging
@inject ILogger<Counter> Logger

<h1>Counter</h1>

<p>Current count: @(currentCount.ToString())</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }

    public System.Timers.Timer timer;
    protected override async Task OnInitializedAsync()
    {
        timer = new Timer(1000);
        timer.Elapsed += this.OnTimedEvent;
        timer.AutoReset = true;
        timer.Enabled = true;
        timer.Start();
    }

    public void OnTimedEvent(Object source, ElapsedEventArgs e)
    {
        Logger.LogInformation("Timer triggered");
        IncrementCount();
        StateHasChanged();
    }
}