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

【问题标题】：Am I going about this the wrong way? What would be the ideal way to do this?我会以错误的方式解决这个问题吗？这样做的理想方法是什么？
【发布时间】：2021-03-31 08:02:30
【问题描述】：

我有一个 .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);
}

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

服务被注入
rd 是为表格提供数据的数据源
在页面加载时调用该服务并生成默认数据集
单击“获取数据”按钮似乎不会从输入中传回值
第一次后重复点击按钮似乎根本不会触发回调/事件

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

【问题讨论】：

标签： blazor-server-side .net-5

【解决方案1】：

我想通了。用户控件的值需要附加一个@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);
}

【讨论】：