受欢迎的博客标签

The two techniques that we're going to look at are.

use standard HTML form elements

Multi-Select Checkbox Dropdown List(.Net 5.x)

Multi-Select Checkbox Dropdown List(.Net 3.x)

 

use EditForm component

.Net 6.x

.Net 6.x- <InputSelect> as a multi-select

 

.Net 5.x

.Net 5.x -InputRadioGroup

 

 

1. Use standard HTML form elements

.net 5.x

Multi-Select Checkbox Dropdown List(.Net 5.x)

https://findandsolve.com/articles/multiselect-dropdownlist-in-asp-dot-net-core-dot-net-5

 

.net Core 3.1

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 [email protected]>@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);

        
    }
}

multi checkbox

<form method="post">
    @for (var i = 1; i <= 10; i++)
    {
        <input name="AreChecked" type="checkbox" value="@i" /> @i<br />
    }
    <button>Click</button>
</form>

When you select multiple boxes and submit the form, the values are included in the request like this:

AreChecked=1&AreChecked=2&AreChecked=4&AreChecked=6&AreChecked=10

https://www.learnrazorpages.com/razor-pages/forms/checkboxes

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

two-way data binding of radio button

@functions {
    int EditionCode = 1;

    // "Edition" class has "int Code" and "string Text" properties.
    Edition[] Editions = new [] {
      new Edition { Code = 1, Text = "Home" },
      new Edition { Code = 2, Text = "Pro" },
      new Edition { Code = 3, Text = "Enterprise" },
    };
}

@foreach (var edition in this.Editions)
{
<label>
  <input type="radio" 
         name="edition"
         checked="@(EditionCode == edition.Code)"
         onchange="@(() => EditionCode = edition.Code)"/>
         @edition.Text
</label>
}

 

Multi-Select Checkbox Dropdown List(.Net 3.x)

https://www.c-sharpcorner.com/article/multi-select-checkbox-dropdown-list-create-edit-in-net-core-3-1/

 

2.use EditForm component

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

 

.Net 6.x

Multi-Select Support

In version .Net 6 when a <InputSelect> component is bound to an IEnumerable<T> it is rendered as a multi-select, thus enabling the user to select multiple values.

 

 

.Net 5.x

InputRadio 
Blazor in .NET 5 now includes built-in InputRadio and InputRadioGroup components. These components simplify data binding to radio button groups with integrated validation alongside the other Blazor form input components.

Opinion about blazor:
<InputRadioGroup @bind-Value="survey.OpinionAboutBlazor">
    @foreach (var opinion in opinions)
    {
        <div class="form-check">
            <InputRadio class="form-check-input" id="@opinion.id" Value="@opinion.id" />
            <label class="form-check-label" for="@opinion.id">@opinion.label</label>
        </div>
    }
</InputRadioGroup>

 

.Net core 3.x

datetime

C# Blazor and data binding to a DateTime

1. date

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

2.time

<EditForm [email protected] 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">

 <InputNumber>

<div class="form-group ">
        <div>
            <label>数量 :</label>
            <div>
                <InputNumber @bind-Value="@dev.Quantity" />
                <ValidationMessage For="@(() => dev.Quantity)" />
            </div>
        </div>
    </div>

@SendComment for example

 <EditForm Model="@comment" OnValidSubmit="@SendComment">
                    <DataAnnotationsValidator />
                    <ValidationSummary />
                    <div class="form-group">
                        <label for="CommentAuthor">Author</label>
                        <InputText @bind-Value="comment.Author" class="form-control" id="CommentAuthor" placeholder="Hater" />
                    </div>


                    <div class="form-group">
                        <label for="CommentText">Text</label>
                        <InputTextArea @bind-Value="comment.Text" class="form-control" id="CommentText" rows="3" />
                    </div>
                    <button type="submit" class="btn btn-primary g-recaptcha">Send</button>
                </EditForm>

 

 

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