Click here to Skip to main content
15,792,382 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I work on blazor server side . I face issue I can't apply select2 multi select based on web API ?

I need multi select as server1,server2 text display when search .

when select first time then server1 and second time select server2 then server1,server2

what I try as below :

1 - create model servers

public class ServerNames
        public int ServerID { get; set; }
        [Required(ErrorMessage = "Server name is required")]
        public string Server_Name{ get; set; }

2 - Implement service

List<ServerNames> GetSimilarServers(string searchText);

public List<ServerNames> GetSimilarServers(string searchText)
            var serverNames = _context.ServerNames.Where(p => p.Server_Name.Contains(searchText)).ToList();

            return serverNames;

3 - call service on controller web api

            public JsonResult GetSimilarServers(string searchText)
                var serversName =  _IserverNamesService.GetSimilarServers(searchText);
                return new JsonResult(serversName);

4 - on server.razor component I call web API make search filter

private List<ServerNames> SimilarServers{ get; set; }
public  async Task<ServerNames> DisplayListServer(string SearchText)
        var serversLists = await GetSimilarServers(SearchText);

        SimilarServers = serversLists.ToList();
public async Task<IEnumerable<ServerNames>> GetSimilarServers(string searchText)
        HttpClient httpClient = new HttpClient();
        var response = await httpClient.GetAsync(config["API_URL"] + "ServerNames/GetSimilarServers/" + searchText + "");
        if (response.IsSuccessStatusCode)
            var result = await JsonSerializer.DeserializeAsync<ServerNames[]>(await response.Content.ReadAsStreamAsync(), new JsonSerializerOptions() { PropertyNameCaseInsensitive = true });
            return result;
            return null; //handle the response that was not successful here.

SO How to make select2 OR any autocomplete allow to me multi select on blazor based on web API above ?

What I have tried:

expected result

<select2 Multiselect="true"></select2>
but I don't know How to implement it

Number of servers exist on database I will select from it reach as maximum to 250 or 300 at maximum and and when I select I will select 2 or 3 server when it separated by comma
Updated 15-Apr-23 21:04pm

1 solution

This is basic WebPage design. There are thousands of examples of how to do the webpage: html multiselect list - Google Search[^]

Once you have it setup, you can then add your Blazor wrapping depending on how you want to implement.

Alternatively, you could use a Blazor Library that does it for you: blazor library multiselect - Google Search[^]
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900