标签: blazor-server-side

Blazor 预览版 v9

将 an 绑定EditForm到对象集合需要什么？当我将 my 设置EditForm为一组对象，公开和绑定它们的bool属性时，当您单击复选框时，它们会立即取消选中。

@page "/sompage"

<EditForm Model="MyModel">
    @foreach(var item in MyModel.Items)
    {
        <label>
        <InputCheckbox @bind-Value="item.BoolProperty" />
        @item.Text</label>
    }
</EditForm>

@code
{
    public class SomeModel
    {
        public IEnumerable<SomeItem> Items { get;set; } = new List<SomeItem>();
    }
    public class SomeItem
    {
        public string Text { get;set; }
        public bool BoolProperty { get;set; }
    }
}

我开始使用Blazor服务器端，但我没有正确路由。我不明白的，需要base在标签_host.cshtml。如果我仍然必须base在每个 Blazor 组件中添加url，例如：我想要一个基地址，/app/并且@page示例的指令Counter值为 ，"/counter"不会“编译”到"/app/counter". 我必须设置@page到"/app/counter"这是有道理的，但是这意味着，base在标签_host.cshtml是没有用的......

我在这里出了什么问题？

我现在正在尝试 Blazor 客户端一段时间，我注意到大多数不同的教程都建议客户端 blazor 通过服务器端 web-api 获取数据。

我不知道为什么会这样。为什么 razor 不能调用服务器方法，而是开发人员必须向 API 公开相同的数据。为什么要做这个额外的步骤？

例如

@page "/"
@inject HttpClient Http

<button onclick=@(async () => await PrintWebApiResponse())>Print Web API Response</button>

@functions {
    private async Task PrintWebApiResponse()
    {
        var response = await Http.GetStringAsync("/api/Customer");
        Console.WriteLine(response);
    }
}

这可以改写为

@page "/"
@inject HttpClient Http

<button onclick=@(async () => await PrintWebApiResponse())>Print Web API Response</button>

@functions {
    private async Task PrintWebApiResponse()
    {

        ServerServices.Service service = new ServerServices.Service();
        var response = service.GetCustomer();

        Console.WriteLine(response);
    }
}

我刚刚尝试过（代码是页面模型中部分类的一部分）并且它工作得非常好。我在这里遗漏了一点吗？为什么建议通过 API 公开此方法？

我正在关注这个 Blazor 服务器计数器增量示例。

具体代码示例如下。

我有三个问题：

1 -单击按钮后是否通过 SignalR 调用 IncrementCount？

2 - IncrementCount 的执行是否发生在服务器上？（与在浏览器中相反）

3 -如果是通过 SignalR - 我怎样才能看到使用 Chrome 开发者工具发出的“呼叫”（请求）？我查看了网络选项卡，看不到任何活动。看截图：

代码示例：

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

我想用 blazor 组件显示当前客户端 DateTime。

下一个代码出现在什么时间？

<div>@DateTime.Now</div>

我认为这将是服务器时间。如何获得客户端操作系统时间？

我正在尝试在我的 blazor 服务器端应用程序上添加导出到 excel 按钮。到目前为止，在梳理互联网之后，这就是我所做的。

我的按钮

    <div class="row text-right">
                <div class="col-12 p-3">
                    <button class="btn btn-outline-success" @onclick="@(() =>DownloadExcel(formValues.Region, formValues.startDate, formValues.endDate))">
                        Export to Excel&nbsp;
                        <i class="fa fa-file-excel" aria-hidden="true"></i>
                    </button>
               </div>
            </div>

我的 .razor 页面中的方法

    public FileResult DownloadExcel(string Region, DateTime StartDate, DateTime EndDate)
    {
        FileResult ExcelFile = searchService.ExportToExcel(Region, StartDate, EndDate);
        return ExcelFile;
    }

最后我的服务逻辑

        public FileResult ExportToExcel(string Region, DateTime StartDate, DateTime EndDate)
        {
            var queryable = context.AuditCardPinrecords.Where(s => Region == s.RegionRecordId)
                .Where(s => s.AuditComplete == true)
                .Where(s => s.DateTime >= StartDate && s.DateTime …

I'm trying to learn asp.net core, more specifically blazor server. From the documentation, it appears a service registered as scoped will be created once per connection. My user service constructor is running twice on the first load of the page in the browser, and twice again on each refresh of the page.

I believe these are the applicable parts of the code necessary to help me determine why this is occurring. My question is how to make it create one …

我正在尝试将 datatables.net 与我的服务器端 Blazor 应用程序一起使用，任何帮助将不胜感激。

我已经尝试了中途提到的代码https://datatables.net/forums/discussion/56389/datatables-with-blazor，但是，我遇到的问题是正在复制某些 UI 元素，例如分页当我在页面之间浏览时。

下面是我的 _Host.cshtml 文件

@page "/"
@namespace MyApplication.Web.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MyApplication.Web</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />    

    <script src="/lib/jquery/jquery.min.js"></script>
    <script src="/lib/datatables/js/jquery.dataTables.min.js"></script>
    <link href="/lib/datatables/css/jquery.dataTables.min.css" rel="stylesheet" />

</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond …

所以使用组件看起来像这样：

<ParentListComponent Header="Test">
   <ChildListItemComponent Name="1"/>
   <ChildListItemComponent Name="2"/>
   <ChildListItemComponent Name="3"/>
   <ChildListItemComponent Name="4"/>
</ParentListComponent>

而ParentListComponent会是这个样子：

@foreach(var childComponent in listComponents){
    @childComponent
}

@code{

   [Parameter]
   Public List<ChildListItemComponent> listComponents { get; set; }
}

我知道我可以通过将它作为 ChildContent 传递来轻松呈现它，如下所示，但我真的很想保留列表，以便我可以轻松地从父项访问每个​​项目。

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

我觉得我只是缺少这里的语法，但不幸的是我找不到这方面的信息。如果您能提供帮助，我将不胜感激。

我EditContext从CascadingParameter

[CascadingParameter]
public EditContext EditContext { get; set; }

我认识一个真实存在的.Validate方法，即验证了整个Model的EditForm。

但我只想验证Model.

谁能只验证Modelfrom 的一个字段EditForm？

如果你想知道为什么我想要这个......是因为我正在制作一个自定义组件，当值发生变化并且它是一个有效值时，它会做一些事情。