Popular blog tags

.net Core 3.1

 

 

1.use standard HTML form elements

such as <input> and <select> within our mark-up

select Event handlers

select  add @onchange Event handlers

<div class="row" style="padding-top:10px">
            <div class="col-md-4">
                <select class="form-control" @onchange="((e)=>CountryClicked(e))">
                    <option value="">-- 请选择板块 --</option>
                    @foreach (var item in countryList)
                    {
                        <option value="@item.DomainName">@item.DomainName</option>
                    }
                </select>
            </div>
            <div class="col-md-4">
                <select class="form-control" @onchange="((e)=>CityClicked(e))">
                    <option value="">-- 请选择子板块 --</option>
                    @if (cityList != null)
                    {
                        @foreach (var city in cityList)
                        {
                            <option value="@city.DomainName">@city.DomainName</option>
                        }
                    }
                </select>
            </div>

            @cityList.Count
        </div>

 

@code {

    List<Stockso.Core.Domain.Stocks.Domain> countryList;
    List<Stockso.Core.Domain.Stocks.SubDomain> cityList;

    Stockso.Core.Domain.Stocks.SubDomain cityCode;

    string countryId { get; set; }
    string countryName { get; set; }

    string cityId { get; set; }
    string cityName { get; set; }

    Stockso.Core.Domain.Stocks.Domain[] stockBlockList;
    Stockso.Core.Domain.Stocks.Domain[] forecasts;


    protected override async Task OnInitializedAsync()
    {
        countryList = await Http.GetJsonAsync<List<Stockso.Core.Domain.Stocks.Domain>>("http://api.stockso.com/v1/StockFullABK/GetMainFullABK");

        //初始化变量
        cityList = new List<Stockso.Core.Domain.Stocks.SubDomain>();

        cityCode = new Stockso.Core.Domain.Stocks.SubDomain();
        //  forecasts = await Http.GetJsonAsync<Stockso.Core.Domain.Stocks.Domain[]>("http://api.stockso.com/v1/GetStockInfo/GetFullABK");
        // forecasts = await Http.GetJsonAsync<Stockso.Core.Domain.Stocks.Domain[]>("http://api.stockso.com/v1/GetStockInfo/GetFullABK");



    }

    protected async Task CountryClicked(ChangeEventArgs countryEvent)
    {
        cityList.Clear();

        cityName = string.Empty;
        countryId = countryEvent.Value.ToString();
        countryName = countryList.FirstOrDefault(s => s.DomainName == countryId).DomainName;
        cityList = await Http.GetJsonAsync<List<Stockso.Core.Domain.Stocks.SubDomain>>("http://api.stockso.com/v1/StockFullABK/GetSubFullABKList/" + countryId);

       
        this.StateHasChanged();
    }

    protected async void CityClicked(ChangeEventArgs cityEvent)
    {
        cityId = cityEvent.Value.ToString();
        cityCode = await Http.GetJsonAsync<Stockso.Core.Domain.Stocks.SubDomain>("http://api.stockso.com/v1/StockFullABK/GetSubFullABK/" + cityId);


        this.StateHasChanged();
    }
}

2.The following component shows an example of how to perform the initial redirection when the user selects a culture:

razor

@inject NavigationManager NavigationManager

<h3>Select your language</h3>

<select @onchange="OnSelected">
    <option>Select...</option>
    <option value="en-US">English</option>
    <option value="fr-FR">Français</option>
</select>

@code {
    private double textNumber;

    private void OnSelected(ChangeEventArgs e)
    {
        var culture = (string)e.Value;
        var uri = new Uri(NavigationManager.Uri())
            .GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped);
        var query = $"?culture={Uri.EscapeDataString(culture)}&" +
            $"redirectUri={Uri.EscapeDataString(uri)}";

        NavigationManager.NavigateTo("/Culture/SetCulture" + query, forceLoad: true);
    }
}

 

select 

  <!--显示提示信息,数据来自Description字段-->
        <select class="form-control" @bind="searchModel.SelectedMenuId">

            @foreach (var item in searchModel.AvailablePanKouDataMenu)
            {
                <option value=@item.Value>@item.Description</option>
            }

        </select>

 

绑定查询model

  <!--双向绑定数据search-->
        <form>
            <label>上市日期</label>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label>From</label>
                    <input class="form-control" @bind="stockInfoSearchModel.StockTradeFirstDayDateRange.From" format-value="yyyy/MM/dd" aria-describedby="priceRangeFromHelp" placeholder="输入要查询最小日期" />
                </div>
                <div class="form-group col-md-6">
                    <label>to</label>
                    <input class="form-control" @bind="stockInfoSearchModel.StockTradeFirstDayDateRange.To" format-value="yyyy/MM/dd" aria-describedby="priceRangeToHelp" placeholder="输入要查询最大日期" />
                </div>
            </div>



            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" @bind="stockInfoSearchModel.StockTradeFirstDayDateRange.IsEnabled" aria-describedby="priceRangeFromHelp" placeholder="是否查询日期" />
                    <label class="form-check-label">
                        按上市日期查询
                    </label>
                </div>
            </div>

        </form>

查询事件

@code {

    List<StockInfo> forecasts;

   

    [Parameter]
    public StockInfoSearchModel stockInfoSearchModel { get; set; }



    protected override async Task OnInitializedAsync()
    {

        //股票信息查询菜单
        stockInfoSearchModel = await StockDataDatabaseService.GetStockInfoSearchViewMode();

       
    }


    //查询按钮
    protected override async Task OnParametersSetAsync()
    {
        indexCount = 0;
        stockInfoSearchModel.CurrentPage = 0;
        forecasts = await StockDataDatabaseService.GetStockInfo(stockInfoSearchModel);

        
    }
}

2.EditForm component

There is a standard collection of input components available in Blazor, all descended from the base class InputBase<T>.

 

datetime

C# Blazor and data binding to a DateTime

1. date

<input type="date" @bind="StartDate" @bind:format="yyyy-MM-dd">

2.time

<EditForm Model=@model OnValidSubmit="Submit">
    <InputText type="time" @bind-Value="TimeProxy" />
</EditForm>
@code {
    // This field is required as you can not use property in out statement
    private TimeSpan LocalTime = TimeSpan.FromHours(0);
    private string TimeProxy { 
        get => model.Time.ToString();
        set => TimeSpan.TryParse(value,out LocalTime);
    }
    private void Submit() {
        model.Time = LocalTime;
        // following submit logic...
    }
}

3.data and time

<input type="datetime" @bind="searchModel.ReportDateTimeRange.To" @bind:format="yyyy-MM-dd HH:mm:ss">

 

see:https://docs.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-3.1#format-strings

 

EditForm component

https://blazor-university.com/forms/editing-form-data/ 

 

Blazor University