블레이저에서 상자 바인딩 선택

블레이저에서 상자 바인딩 선택

제본을 하려고 합니다.CountryId선택된 항목의 값에 대한 모델에서SelectList블레이저에모든 국가 항목은 다음과 같이 목록으로 제공됩니다.{CountryId, CountryName}물건.나는 이렇게 코드를 합니다.

    <InputSelect @bind-Value="model.ByCountryId" class="form-control">
        @if (model?.Countries != null)
        {
           @foreach (var cnt in model.Countries)
           {
               <option value="@cnt.Id">@cnt.Name</option>
           }
        }
     </InputSelect>

그리고 코드 블록:

@code {

BrandModel model = new BrandModel();

protected override async Task OnInitializedAsync()
{
    model = new BrandModel
    {
        Id = 19,
        ByCountryId = 1,
        Countries = new List<ent.Country>
            {
                new ent.Country { Id = 1, Name = "Azerbaijan" },
                new ent.Country { Id = 2, Name = "Turkey" }
            },
        IsActive = true,
        Name = "Brand"
    };
}

그러나 이 실행으로 브라우저에 다음과 같은 오류가 발생합니다.

blazor.webassembly.js:1 WASM: 시스템메서드 예외 누락:'시스템' 유형의 생성자입니다.구성 요소 모델.바이트 변환기'를 찾을 수 없습니다.

편리한 바인딩 방법은 무엇입니까?<select>그리고.model.data블레이저에서?

제가 넣을 때 잘 작동합니다.<InputSelect>일순간에<EditForm Model="@model">..</EditForm >데이터 바인딩에는 문제가 없습니다.

아래 코드를 사용하여 설정해 보십시오.<BlazorLinkOnBuild>false</BlazorLinkOnBuild>csproj 파일에서.

<PropertyGroup>
   <BlazorLinkOnBuild>false</BlazorLinkOnBuild>
</PropertyGroup>

https://github.com/aspnet/AspNetCore/issues/7784 참조

업데이트:

사용하다<select>꼬리표를 달다<InputSelect>맘에 들다

<select @bind="model.ByCountryId">
        @if (model?.Countries != null)
        {
            @foreach (var cnt in model.Countries)
            {
                <option value="@cnt.Id">@cnt.Name</option>
            }
        }
</select>

선택한 요소의 국가 목록을 표시하고 선택한 국가 코드 또는 ID를 검색하는 방법에 대한 예입니다.

<select class="form-control" @bind="@SelectedCountryID">

    <option value=""></option>
    @foreach(var country in CountryList)
    {
        <option value = "@country.Code"> @country.Name </option >
    }
}

</select>

<p>@SelectedCountryID</p>

코드블록

@code {

    string selectedCountryID;

    string SelectedCountryID
    {
        get => selectedCountryID;
        set
        {
            selectedCountryID = value;

        }
    }

    List<Country> CountryList = new List<Country>() { new Country ("USA", "United States"),
                                                      new Country ("UK", "United Kingdom") };

    public class Country
    {

        public Country(string code, string name)
        {
            Code = code;
            Name = name;
        }
        public string Code { get; set; }
        public string Name { get; set; }

    }
}

---

이 코드는 다른 선택 요소와 통합하여 계단식 드롭다운 경험(국가를 선택한 후 인구가 밀집된 도시 목록 등)을 형성하는 데 적합합니다.코드 스니펫을 Index.razor 파일에 복사해서 실행하면 됩니다.

<InputSelect>저는 인에서 일해요.NET 5. 내가 사용하는 모든 입력(텍스트, 번호, 날짜, 선택, 확인란 등)에 대해<EditForm>와 함께Model.

<EditForm Model="item">
   <InputSelect @bind-Value="item.CountryId">
      <option value=""></option>
      @foreach (var c in countries)
      {
         <option value="@c.Id">@c.Name</option>
      }
   </InputSelect>
</EditForm>

이 예의 경우:ItemModel item최소한의 속성을 가지고 있습니다.CountryId그리고.List<CountryModel> countries적어도 속성을 갖습니다.int Id그리고.string Name

blazor에서 API를 사용하여 Core 6에서 정상 작동

<InputSelect @bind-Value="patientCreateDTO.DoctorId" class="form-control" id="doctorid">
    <option value="">--Select--</option>
    @foreach(var doctor in doctorslist)
    {
        <option value="@doctor.Id">@doctor.Doctor_name</option>
    }
</InputSelect>

그리고 여기 코드가 있습니다.

private List<DoctorReadDTO> doctorslist = new();

// ...

protected override async Task OnInitializedAsync()
{
    var response = await dService.GetDoctor();
    if (response.Success)
    {
        doctorslist = response.Data;
    }
}

<select class="form-select" id="instant" @bind="_selected">
    <option value="Y">Y</option>
    <option value="N">N</option>
</select>

c#

@code {
    var _selected="Y";
}

InputSelect열거 값과 각 옵션에 대한 예제.

<InputSelect @bind-Value="context.Severity" class="form-control">
    @foreach (var severityEnum in Enum.GetValues(typeof(Severity)).Cast<Severity>().Where(x => x != Severity.None).ToList())
    {
        <option value="@severityEnum">@severityEnum.ToString()</option>
    }
</InputSelect>

public enum Severity
{
    None = 0,
    Critical = 1,
    High = 2,
    Medium = 3,
    Low = 4
}

저는 추천합니다.InputSelectovernative htmlselect사용자 입력을 수신하고 검증해야 하는 경우.

https://learn.microsoft.com/en-us/aspnet/core/blazor/forms-and-input-components?view=aspnetcore-7.0#built-in-input-components

언급URL : https://stackoverflow.com/questions/58485439/select-box-binding-in-blazor