如何在Blazor中使用Select2组件？

Question

你好，社区。我正在尝试在Blazor中使用select2组件。我从GitHub上找到了一个示例，但实际上，我不知道如何用来自数据库的记录填充该组件。

这是razor页面，这是组件：

<span>Simple string example</span>
<Select2 TItem="string"
         Id="simple-string-example"
         Data="@SimpleStringList"
         @bind-Value="@ValueSelected">
</Select2>
<span>Currently selected value: @ValueSelected</span>
<br />

@code {

    private EditContext EditContext { get; set; }
    private Select2<SomeInnerObject> ProvidedSelect2Ref { get; set; }
    public SomeObject FakeObject { get; set; } = new SomeObject { SomeName = "Name" };
    private List<string> SimpleStringList { get; set; } = new List<string>();
    private List<SomeInnerObject> InnerObjectList { get; set; }
    private string ValueSelected { get; set; }

    private SomeInnerObject FooObject = new SomeInnerObject { InnerName = "Inner Foo" };

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        if (firstRender)
        {
            SimpleStringList.Add("Foo");
            SimpleStringList.Add("Bar");
            SimpleStringList.Add("Baz");

            InnerObjectList = new List<SomeInnerObject> { FooObject, new SomeInnerObject { InnerName = "Inner bar" } };
            for (var i = 0; i < 100; i++)
                InnerObjectList.Add(new SomeInnerObject { InnerName = $"Inner bar{i}" });
            EditContext = new EditContext(FakeObject).AddDataAnnotationsValidation();
            StateHasChanged();
        }
    }   
}

您怎样能通过从控制器中调用API，将组件填充为来自数据库的记录，类似如下代码：

```html

```

private async Task<IEnumerable<Persona>> BuscarPersonas(string searchText)
    {
        var responseHttp = await repositorio.Get<List<Persona>>($"api/Personas/buscar/{searchText}");
        return responseHttp.Response;
    }
}

- Jasiel Torres

Answer 1

Test of result

这是一个Blazor（客户端）和WebAPI（服务器端）的示例。

客户端（Blazor）：

1. 将List绑定到Select2并从PersonaService获取数据。 Index.razor的代码如下：

@page "/"
@using System.Linq
@using Demo.WebAssembly.Models
@using Demo.WebAssembly.Data


@inject PersonaService service

<span>Simple string example</span>
<Select2 TItem="Persona"
         Id="simple-string-example"
         Data="@personas"
         TextExpression="@(item => item.Name)"
         @bind-Value="@ValueSelected">
</Select2>

<span>Currently selected Inner value: @(ValueSelected?.Name)</span>


<br />

@code
{ 

    private Persona ValueSelected { get; set; } = new Persona { Name = "Name" };

    private List<Persona> personas { get; set; }

    protected override async Task OnInitializedAsync()
    {
        var personaList = await service.BuscarPersonas("user");

        personas = personaList.ToList();

    }


    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        if (firstRender)
        {

            StateHasChanged();
        }
    }
}

请求从url("https://localhost:44307/api/Personas/buscar/{searchText}")获取数据。

代码为PersonaService。

public class PersonaService
{

    public async Task<IEnumerable<Persona>> BuscarPersonas(string searchText)
    {
        HttpClient httpClient = new HttpClient();
        var response = await httpClient.GetAsync("https://localhost:44307/api/Personas/buscar/" + searchText);
        if (response.IsSuccessStatusCode)
        {
            var result = await JsonSerializer.DeserializeAsync<Persona[]>(await response.Content.ReadAsStreamAsync(), new JsonSerializerOptions() { PropertyNameCaseInsensitive = true });
            return result;
        }
        else
        {
            return null; //handle the response that was not successful here.
        }
    }

}

服务器端（WebAPI）：

1. 接收并处理请求。以 JSON 格式返回数据。

2. 控制器代码：

    [HttpGet]
    [Route("/api/Personas/buscar/{searchText}")]
    public async Task<JsonResult> GetPersona(string searchText)
    {
        var personas = _repository.getPersona(searchText);

        return new JsonResult(personas);
    }

从数据库检索数据。

Repository 的代码。

    public List<Persona> getPersona(string searchText)
    {
        var personas = _context.Personas.Where(p=>p.Name.Contains(searchText)).ToList(); 

        return personas;
    }

注意：如果像上面的示例一样从其他域（https://localhost:44379）访问数据，请不要忘记启用CORS。

链接：使用ASP.NET Core创建Web API

- Michael Wang

---

非常感谢您的时间和帮助，对我来说它完美地运行了，尽管我对使用PersonaService并不是很理解。谢谢！ - undefined

@JasielTorres 你是否按照被接受的答案完全实现了它？不知何故，它对我来说不起作用。我已成功填充了数据对象（personas），但选择2组件的选项没有刷新。 - undefined