页面无法呈现但没有错误消息
Page fails to render but no error message
VS 2017 版本 15.9.3
Blazor 运行时 0.7 rtm
在 Blazor 试试我的手。有一个简单的页面,我试图让一个下拉列表来填充对象列表中的项目。项目构建,但页面不呈现,也不生成任何错误或异常。其他页面工作正常,只是这个页面不行。这显然是 select 的问题,因为如果我删除它,它就可以正常显示。但是,我没有看到任何错误 - 无论是在浏览器中还是在 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);
}
}
您刚刚尝试绑定价格表
List<PriceSetting> prices = new List<PriceSetting>();
到select元素值。
<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
此答案基于您要创建两个 select 元素的假设;一
显示机场列表,第二个显示价格列表。 (这是我能从你的问题中得到的最好答案)
现在,当用户 select 一个机场时,您希望第二个 select 列出价格,对吗?
@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; }
}
VS 2017 版本 15.9.3
Blazor 运行时 0.7 rtm
在 Blazor 试试我的手。有一个简单的页面,我试图让一个下拉列表来填充对象列表中的项目。项目构建,但页面不呈现,也不生成任何错误或异常。其他页面工作正常,只是这个页面不行。这显然是 select 的问题,因为如果我删除它,它就可以正常显示。但是,我没有看到任何错误 - 无论是在浏览器中还是在 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);
}
}
您刚刚尝试绑定价格表
List<PriceSetting> prices = new List<PriceSetting>();
到select元素值。
<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
此答案基于您要创建两个 select 元素的假设;一 显示机场列表,第二个显示价格列表。 (这是我能从你的问题中得到的最好答案) 现在,当用户 select 一个机场时,您希望第二个 select 列出价格,对吗?
@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; }
}