如何解决如何在blazor中使用select2组件?
您好社区,我试图在blazor中使用select2组件,我从github上举了一个例子,但事实是我迷失了如何用数据库中的记录填充该组件
这是剃须刀页面,这是组件:
<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,如下所示:
private async Task<IEnumerable<Persona>> BuscarPersonas(string searchText)
{
var responseHttp = await repositorio.Get<List<Persona>>($"api/Personas/buscar/{searchText}");
return responseHttp.Response;
}
}
解决方法
结果测试
以下是Blazor(客户端)和WebAPI(服务器)的示例。
客户端(Blazor)
1。将List<Persona>
绑定到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();
}
}
}
2。从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
格式返回数据。
Controller
[HttpGet]
[Route("/api/Personas/buscar/{searchText}")]
public async Task<JsonResult> GetPersona(string searchText)
{
var personas = _repository.getPersona(searchText);
return new JsonResult(personas);
}
2。从数据库中检索数据。
Repository
的代码
public List<Persona> getPersona(string searchText)
{
var personas = _context.Personas.Where(p=>p.Name.Contains(searchText)).ToList();
return personas;
}
注意:如果像上面的示例一样从其他域(https:// localhost:44379)访问数据,请不要忘记启用CORS。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。