[英]How to use select2 component in blazor?
hello community I am trying to use the select2 component in blazor, I took an example from github but the truth is I am lost in how to fill the component with the records from the database你好社区我正在尝试在 blazor 中使用 select2 组件,我从 github 中举了一个例子,但事实是我迷失了如何用数据库中的记录填充组件
this is the razor page and this is the component:这是剃刀页面,这是组件:
<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();
}
}
}
How could you fill the component with records from the database, calling an api in a controller, something like this:你怎么能用数据库中的记录填充组件,在控制器中调用一个api,像这样:
private async Task<IEnumerable<Persona>> BuscarPersonas(string searchText)
{
var responseHttp = await repositorio.Get<List<Persona>>($"api/Personas/buscar/{searchText}");
return responseHttp.Response;
}
}
Test of result
结果检验
Here is example of Blazor(client) and WebAPI(server).这是 Blazor(客户端)和 WebAPI(服务器)的示例。
Client Side(Blazor)
客户端(Blazor)
1. Bind List<Persona>
to Select2
and fetch data from PersonaService
. 1. 将
List<Persona>
绑定到Select2
并从PersonaService
获取数据。
Codes of Index.razor
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();
}
}
}
2. Request data from url("https://localhost:44307/api/Personas/buscar/{searchText}") 2.从url("https://localhost:44307/api/Personas/buscar/{searchText}")请求数据
Codes of PersonaService
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.
}
}
}
Server Side(WebAPI)
服务器端(WebAPI)
1. receive and handle the request. 1.接收并处理请求。 return data in
json
format.以
json
格式返回数据。
Codes of Controller
Controller
代码
[HttpGet]
[Route("/api/Personas/buscar/{searchText}")]
public async Task<JsonResult> GetPersona(string searchText)
{
var personas = _repository.getPersona(searchText);
return new JsonResult(personas);
}
2. Retrieve Data From Database. 2. 从数据库中检索数据。
Codes of Repository
代码
Repository
public List<Persona> getPersona(string searchText)
{
var personas = _context.Personas.Where(p=>p.Name.Contains(searchText)).ToList();
return personas;
}
Notes: If access data from other domain(https://localhost:44379) like the example above, don't forget to enable CORS .注意:如果像上面的例子一样从其他域(https://localhost:44379)访问数据,不要忘记启用CORS 。
Links: Create a web API with ASP.NET Core链接: 使用 ASP.NET Core 创建 Web API
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.