页面无法呈现但没有错误消息答案

【问题标题】：Page fails to render but no error message页面无法呈现但没有错误消息
【发布时间】：2019-05-22 05:11:33
【问题描述】：

VS 2017 内部版本 15.9.3 Blazor 运行时 0.7 rtm
在 Blazor 尝试我的手。有一个简单的页面，我试图让一个下拉列表填充对象列表中的项目。项目构建，但页面未呈现，也未生成任何错误或异常。其他页面工作正常，只是不是这个。这显然与选择有关，因为如果我删除它，它会呈现良好。但是，我没有看到任何错误 - 无论是在浏览器中还是在 Visual Studio 中。我是用 F5 从 VS 启动的，所以我可以在需要时进行调试。

@page "/PriceList"


<p>Audit screen test</p>

<select id="selPriceRate" bind="@prices">
    <option value="test">test</option>
</select>

<br/>
Select terminal:<br/>
<select id="ddTerminal" onchange="@ChangeTerminal" >
    <option value="NYC">NYC</option>
    <option value="LHR">LHR</option>
    <option value="DFW">DFW</option>
    <option value="LAX">LAX</option>
</select>

@functions {

    List<PriceSetting> prices = new List<PriceSetting>();

    void ChangeTerminal()
    {
        // load ddRateMaster
        prices.Add(new PriceSetting() { PriceName = "test1",PriceValue = 104.13m });
        prices.Add(new PriceSetting() { PriceName = "test2", PriceValue = 105.13m });
        prices.Add(new PriceSetting() { PriceName = "test3", PriceValue = 106.13m });
    }

    protected override async Task OnInitAsync()
    {
        var t = prices.Count();

        await Task.Delay(1000);

    }

}

【问题讨论】：

浏览器控制台窗口也没有错误？
正确，浏览器开发控制台 (chrome) 中没有任何内容。我正在使用服务器端托管模型
安装了正确版本的.net core SDK？
两个项目 - (1) Todo.Server - .Net Core 2.1，(2) Todo.App - .Net Standard 2.0
不是我的意思。 dotnet --list-sdks 说什么？ 2.1.500 应该在列表中。

标签： blazor

【解决方案1】：

此答案基于您要创建两个选择元素的假设；一显示机场列表，第二个是价格列表。（这是我能从你的问题中得出的最好结论）现在，当用户选择一个机场时，您希望第二个选择列出价格，对吧？

@if (Terminals == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <select bind="@SelectedTerminalId">
        <option value=@(0)></option>
        @foreach (var Terminal in Terminals)
        {
            <option value="@Terminal.TerminalId">@Terminal.Name</option>
        }
    </select>
}

@if (SelectedTerminalId != default)
{
    var prices = Terminal.Single(x => x.TerminalId == SelectedTerminalId).Prices;

    <select bind="@SelectedPriceSettingId">
        <option value=@(0)></option>
        @foreach (var price in Prices)
        {
            <option value="@price.Id">@price.Name (@price.Value)</option>
        }
    </select>

}

@functions {
    private static readonly List<Terminal> Terminals = new List<Terminal>{
            new Terminal{
                TerminalId = 1, Name = "NYC", Prices = new List<PriceSetting>
                {
                    new PriceSetting{Id = 1, Name = "test1", Value = 104.13m},
                    new PriceSetting{Id = 2, Name = "test2", Value = 105.13m )
                }
            },
            new Terminal{
                TerminalId = 2, Name = "LHR", Prices = new List<PriceSetting>
                {
                    new PriceSetting{Id = 3, Name = "test3", Value = 106.13m}

                }
            }
        };


    int _selectedTerminalId;
    int SelectedTerminalId
    {
        get => _selectedTerminalId;
        set
        {
            _selectedTerminalId = value;
            SelectedPriceSettingId = default;
        }
    }

    int SelectedPriceSettingId { get; set; }


}

【讨论】：

很好的答案，比我的更详细。它有一些错别字，我修复了它并根据您的代码创建了示例blazorfiddle.com/s/t4xj7n5l

【解决方案2】：

您刚刚尝试绑定价目表

List<PriceSetting> prices = new List<PriceSetting>();

选择元素值。

<select id="selPriceRate" bind="@prices">
<option value="test">test</option>
</select>

这是不正确的。你可以试试这样的

<select id="selPriceRate" bind="@selectedPriceName">
@foreach(var price in prices) {
    <option value="@price.PriceName">@price.PriceName</option>
}    
</select>

或

<select id="selPriceRate" onchange="@ChangePriceRate">
@foreach(var price in prices) {
    <option value="@price.PriceName">@price.PriceName</option>
}    
</select>

注意：你不能在同一个元素上使用 bind 和 onchange @bind and @onchange on the same element doesn't work

【讨论】：