web-dev-qa-db-fra.com

Sélectionnez la reliure de la boîte dans le blazor

J'essaie de lier "CountryId" dans le modèle à la valeur d'un élément sélectionné de SelectList dans blazor. Tous les éléments Country viennent dans une liste comme l'objet {CountryId, CountryName}. Je fais le code comme ça:

    <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>

Et bloc de code:

@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"
    };
}

Mais cette exécution me donne cette erreur dans le navigateur:

blazor.webassembly.js: 1 WASM: System.MissingMethodException: constructeur sur le type 'System.ComponentModel.ByteConverter' introuvable.

Quelle est la manière pratique de lier <select> et model.data en blazor? Merci d'avoir lu!

c#asp.netasp.net-coreblazor
1
Emba Ayyub

Cela fonctionne bien quand je mets le <InputSelect> dans un <EditForm Model="@model">..</EditForm >et il n'y a aucun problème dans votre liaison de données.

Essayez d'utiliser le code ci-dessous pour définir <BlazorLinkOnBuild>false</BlazorLinkOnBuild> dans le fichier csproj.

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

Voir https://github.com/aspnet/AspNetCore/issues/7784

Mise à jour:

Utilisation <select> tag au lieu de <InputSelect> comme

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

Je n'ai pas essayé de résoudre vos problèmes car ils sont nombreux. Au lieu de cela, j'ai composé le code pour afficher une liste de pays dans un élément sélectionné et récupérer le code de pays ou l'ID sélectionné. Veuillez voir comment je définis un modèle et comment il est utilisé. Ce code peut être intégré à d'autres éléments de sélection pour former une expérience de liste déroulante en cascade (une liste de villes qui est remplie après avoir sélectionné un pays, etc.). Copiez simplement l'extrait de code dans votre fichier Index.razor et exécutez-le ...

<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; }

    }
}
2
user12207343