Blazor在调用方法后不会更新用户界面

Question

我开始学习Blazor

我需要从UI中设置一些值，并调用数据服务。

我写的这段代码调用一个服务来从sql server加载数据；

我设置了参数并调用了一个方法，这很好，但在接口第二次不更新时就不起作用了。

列表public List<ChipReport> chipReports它不更新

为什么？

每次调用该方法时，接口不应该自动更新吗？

这是我的代码

芯片报告页面

@page "/ChipsReport"
@using Data;
@inject ChipsReportService crService
<h3>ChipsReport</h3>
<input id="txtDate" type="date" required @bind-value="paramChipReport.DataIni" />
<select @bind="paramChipReport.ValueTypeId">
<option value="42">Par </option>
<option value="1">Par 2</option>
<option value="36">Par 3</option>
<option value="100">Par 4</option>
</select>
<select @bind="paramChipReport.Absolute">
<option value="0">Inc</option>
<option value="1">Abs</option>
</select>
<button class="btn btn-primary" @onclick="@(() => LoadData(paramChipReport))">Load data</button>
<br />
<hr />
@if (@chipReports == null)
{ 
<h2>Noting</h2>
}
else
{
<table class="table table-sm table-striped">
<thead>
<tr>
<th>Tag</th>
<th>Date</th>
<th>Total</th>       
</tr>
</thead>
<tbody>
@foreach (var cr in @chipReports)
{
<tr>
<td>@cr.Tag</td>
<td>@cr.DataIni.ToShortDateString()</td>
<td>@cr.Total</td>
</tr>
}
</tbody>
</table>
}

@code {
public class ParamChipReport
{
public DateTime DataIni { get; set; }
public int ValueTypeId { get; set; }
public int Absolute { get; set; }
};
public ParamChipReport paramChipReport = new ParamChipReport();
public List<ChipReport> chipReports;
private async Task<List<ChipReport>> LoadData(ParamChipReport paramChipReport)
{
return chipReports = await crService.GetChipsReportsAsync(paramChipReport.DataIni, paramChipReport.ValueTypeId, paramChipReport.Absolute);
}
}

ChipReportService类中数据的方法服务

public async Task<List<ChipReport>> GetChipsReportsAsync(DateTime DataIni, int valueTypeId, int absolute)
{

var param = new SqlParameter[] 
{
new SqlParameter() {ParameterName = "@dataini", SqlDbType = System.Data.SqlDbType.DateTime, Direction = System.Data.ParameterDirection.Input, Value = gamingDate },
new SqlParameter() {ParameterName = "@valuetypeid", SqlDbType = System.Data.SqlDbType.Int, Direction = System.Data.ParameterDirection.Input, Value = valueTypeId },
new SqlParameter() {ParameterName = "@absolute", SqlDbType = System.Data.SqlDbType.Int, Direction = System.Data.ParameterDirection.Input, Value = absolute}
};

chipsReport = await _context
.chipsReports
.FromSqlRaw("EXECUTE [Accounting].[usp_ChipsReportEx] @dataini, @valuetypeid, @absolute ", param)
.ToListAsync();

return chipsReport;
}

ChipReport类

public class ChipReport
{
[Key()]
public string Tag { get; set; }
public DateTime DataIni { get; set; }
public int Total { get; set; }      
}

Answer 1

定义public DateTime DateIni{ get; set; }

但是你使用@bind-value="paramChipReport.DataIni"

此外，crService.GetChipsReports方法的第一个参数应该是paramChipReport.DateIni，而不是paramChipReport.GamingDate

我相信这些是您的代码中唯一的问题。我发现这些问题我已经为您的代码创建了一种repo。如果您的代码在更正错误后不起作用，我可以在这里发布我的代码片段，它运行得非常好。

我想知道为什么你的编译器或运行时没有通知你。。。更奇怪的是，你第一次说它有效。不管怎样，我的回购操作非常好。如果你需要，我会寄出去。

正在发布。。。。

索引.razor

@page "/"
@inject ChipsReportService crService
<h3>ChipsReport</h3>
<input id="txtDate" type="date" required @bind-value="paramChipReport.DateIni" />
<select @bind="paramChipReport.ValueTypeId">
<option value="42">opt1</option>
<option value="1">opt2</option>
<option value="36">opt3</option>
<option value="100">opt4</option>
</select>
<select @bind="paramChipReport.Absolute">
<option value="0">Inc</option>
<option value="1">Tot</option>
</select>
<button class="btn btn-primary" @onclick="@(() => LoadData(paramChipReport))">Load data</button>
<br />
@if (chipReports != null)
{
<table class="table table-sm table-striped">
<thead>
<tr>
<th>Test</th>
<th>Test1</th>
<th>Test2</th>
</tr>
</thead>
<tbody>
@foreach (var cr in chipReports)
{
<tr>
<td>@cr.Tag</td>
<td>@cr.Time.ToShortDateString()</td>
<td>@cr.Pos</td>
</tr>
}
</tbody>
</table>
}
@code {
public class ParamChipReport
{
public DateTime DateIni { get; set; }
public int ValueTypeId { get; set; }
public int Absolute { get; set; }
};
ParamChipReport paramChipReport = new ParamChipReport();
ChipReport[] chipReports;
private async Task<ChipReport[]> LoadData(ParamChipReport paramChipReport)
{
return chipReports = await crService.GetChipsReports(paramChipReport.DateIni, paramChipReport.ValueTypeId, paramChipReport.Absolute);
}
}

ChipReport.cs

public class ChipReport
{
public string Tag { get; set; }
public DateTime Time { get; set; }
public string Pos { get; set; }
}

芯片报告服务.cs

public class ChipsReportService
{
ChipReport[] chipsReport;
public async Task<ChipReport[]> GetChipsReports(DateTime GamingDate,int ValueTypeId, int Absolute)
{
if (ValueTypeId == 42)
{
chipsReport = new ChipReport[] { new ChipReport{ Tag="My Tag1: 42 ", Time=DateTime.Now, Pos="1" },
new ChipReport{ Tag="My Tag2", Time=DateTime.Now, Pos="2"} };
}
if (ValueTypeId == 1)
{
chipsReport = new ChipReport[] { new ChipReport{ Tag="My Tag1: 1 ", Time=DateTime.Now, Pos="1" },
new ChipReport{ Tag="My Tag2", Time=DateTime.Now, Pos="2"} };
}
if (ValueTypeId == 36)
{
chipsReport = new ChipReport[] { new ChipReport{ Tag="My Tag1: 36 ", Time=DateTime.Now, Pos="1" },
new ChipReport{ Tag="My Tag2", Time=DateTime.Now, Pos="2"} };
}
if (ValueTypeId == 100)
{
chipsReport = new ChipReport[] { new ChipReport{ Tag="My Tag1: 100 ", Time=DateTime.Now, Pos="1" },
new ChipReport{ Tag="My Tag2", Time=DateTime.Now, Pos="2"} };
}
await Task.Yield();
return chipsReport;
}

}

启动.cs

public void ConfigureServices(IServiceCollection services)
{
// Code removed for brevity's sake
services.AddScoped<ChipsReportService>();
}