我会以错误的方式解决这个问题吗？这样做的理想方法是什么？

问题描述

我有一个 .Net 5 Blazor Web 应用程序、两个日期选择器和一个从日期选择器生成结果的表格。我似乎无法让服务器重新处理数字并使用日期选择器的输入重新生成表格。 Blazor 服务器应用程序是否适用于此？我不想在用户的浏览器中进行大量的数字运算，所以我选择了服务器。

<div class="row">
    <div class="col-xl-2">
        <label for="start">Start date:</label>

        <input type="date" id="start" name="range-start"
               value=@startDate
               min=@minDate max=@maxDate>
    </div>
    <div class="col-xl-2">
        <label for="end">End date:</label>

        <input type="date" id="end" name="range-end"
               value=@endDate
               min=@minDate max=@maxDate>
    </div>
    <div class="col-xl-2">
        <button class="btn btn-primary" type="submit" id="fetch" name="fetch-data" @onclick="GetDataAsync">Fetch data</button>
    </div>

.razor @code Portion

protected async Task GetDataAsync()
{
    rd = null;
    DateTime start,end;
    start = new DateTime(Convert.ToDateTime(startDate).Year,Convert.ToDateTime(startDate).Month,Convert.ToDateTime(startDate).Day);
    end = new DateTime(Convert.ToDateTime(endDate).Year,Convert.ToDateTime(endDate).Month,Convert.ToDateTime(endDate).Day);
    rd = await DataService1.GetDataAsync(start,end);
}

从这些摘录中需要注意的一些事项：

1. 服务被注入
2. rd 是表的数据源
3. 在页面加载时调用该服务并生成默认数据集
4. 点击“获取数据”按钮似乎没有从输入中传回值
5. 在第一次之后重复点击按钮似乎根本没有触发回调/事件

显然我是新手，可以使用一些指导、阅读建议、示例代码。任何帮助，将不胜感激。提前致谢。

解决方法

我想通了。用户控件的值需要附加一个@bind-，变量需要一个公共属性{get; set;} 使用 [Attribute] 装饰器而不是私有变量。

正确时看起来像这样：

<div class="row">
<div class="col-xl-2">
    <label for="start">Start date:</label>

    <input type="date" id="start" name="range-start"
           @bind-value=@startDate
           min=@minDate max=@maxDate>
</div>
<div class="col-xl-2">
    <label for="end">End date:</label>

    <input type="date" id="end" name="range-end"
           @bind-value=@endDate
           min=@minDate max=@maxDate>
</div>
<div class="col-xl-2">
    <button class="btn btn-primary" type="submit" id="fetch" name="fetch-data" @onclick="GetDataAsync">Fetch data</button>
</div>

.razor @code 部分

[Parameter]
public DateTime startDate { get; set; }
[Parameter]
public DateTime endDate { get; set; }

protected async Task GetDataAsync()
{
    rd = null;
    DateTime start,end;
    start = new DateTime(Convert.ToDateTime(startDate).Year,Convert.ToDateTime(startDate).Month,Convert.ToDateTime(startDate).Day);
    end = new DateTime(Convert.ToDateTime(endDate).Year,Convert.ToDateTime(endDate).Month,Convert.ToDateTime(endDate).Day);
    rd = await DataService1.GetDataAsync(start,end);
}