Question

我开始学习Blazor

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

我编写此代码，该代码调用服务以从sql服务器加载数据；

我设置了参数并调用了一个方法，此方法可以正常工作，但是第二次接口不更新时它不起作用。

列表 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

我相信这些是您代码的唯一问题。我发现问题是我已经创建了您的代码的某种回购。如果在更正错误后您的代码无法正常工作，我可以在此处发布我的代码段，该代码段效果很好。

我想知道为什么编译器或运行时没有通知您……更奇怪的是，您说它是第一次工作。无论如何，我的存储库运行良好。如果需要，我会发布。

发布中......

Index.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; }
    }

ChipsReportService.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;
        }

     
    }

Startup.cs

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

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

1 个答案:

Index.razor

ChipReport.cs

ChipsReportService.cs

Startup.cs