How to filter a list on asp.netcore project

Question

I'm sorry in advance for what will probably be not explained well (I just started programming so i'm still new with the phrases and all).

I have an asp.netcore application , in which I'm showing a list of all the agents in the company , which is fetched from the DB using controller:

ViewData["Agents"] = new SelectList(_context.Agent.OrderBy(x => x.FullName), "Id", "FullName");

I'm then displaying the data in a View :

 <div class="col-md-10">
     <select asp-for="AgentId"  class ="form-control"  asp-items="ViewBag.Agents"  ></select>
 </div>

This code works properly , but i want to allow the users to filters the agent name, so they won't have to search the entire list . I'm trying to look for a way on the internet but can find any (probably I'm not using the correct search words)

Thanks.

EDIT:

My agent class(the action part):

public class AgentAggrementChangeRequestsController : Controller
{
    private readonly SabresContext _context;
    .......

    // GET: AgentAggrementChangeRequests
    public async Task<IActionResult> Index(string SearchString)
    {
        var sabresContext = _context.AgentAggrementChangeRequest.Include(a => a.Agent);
        ViewData["Agents"] = new SelectList(_context.Agent.OrderBy(x => x.FullName), "Id", "FullName");


        return View(await sabresContext.ToListAsync());
    }

    .....

And the view:

<h2>חדש</h2>
<form asp-action="Create">
    <div class="form-horizontal" >
        <h4>תנאי הסכם סוכן חדש</h4>
        <hr />
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <label asp-for="AgentId" class="col-md-2 control-label">סוכן</label>
            <div class="col-md-10">
                <select asp-for="AgentId"  class ="form-control"  asp-items="ViewBag.Agents"  ></select>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="צור חדש" class="btn btn-default" />
            </div>
        </div>
    </div>
</form>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Answer 1

Agree with Jordy.

What you can do is fetch list of agents using ajax or return that in View Model and use select2 or similar plugin for better use experience.

Your Action Method:

public ActionResult ReturnPage(){

  using(var _context = new YourDbObject())
  {
     var listOfAgents = _context.Agents.OrderBy(x => x.FullName).ToList();
  }

  return View(listOfAgents);
}

In your View:

<div class="col-md-10">
  <select class ="form-control" id="selectAgent"></select>
</div>

At end of View add your javascript code:

<script>
   $('#selectAgent').select2({
     data: @Html.Raw(Json.Encode(@Model))
   });
</script>

Few things you need to do in order to get work:

1. Include JS and CSS files in View or Layout.
2. Make sure whatever your returning is either in format expected by select2 or just map it that you way.

Select2 if your model uses something other than required format link

EDIT: Adding new code: I've tried to simulate your situation.

In your View:

<h2>חדש</h2>
<form asp-action="Create">
    <div class="form-horizontal">
        <h4>HI</h4>
        <hr />
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <label asp-for="AgentId" class="col-md-2 control-label">סוכן</label>
        <div class="col-md-10">
            <select asp-for="AgentId" id="selectAgent" class="form-control" asp-items="ViewBag.Agents"></select>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Submit" class="btn btn-default" />
        </div>
    </div>
</form>

@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

    <script>

        var rawModel = @Html.Raw(Json.Encode(ViewData["Agents"]));

        var data = $.map(rawModel, function (obj) {

            obj.id = obj.id || obj.Value; // replace Value with your identifier (in your case that would be Id)

            obj.text = obj.text || obj.Text; // replace name with the property used for the Text (in your case that would be FullName)
            return obj;
        });

        $('#selectAgent').select2({ data:data});

    </script>
}

This is how it would look like:

And if you searched:

Answer 2

I think this should be done using Ajax in combination with some kind of JQuery control or something else.

Another solution is to do it in memory (client side) filtering. This can also be done using these solutions.

But if you want to filter server side you need to pass a query/term to the ajax call and filter like

_context.Agent.Where(x=>x.FullName.ToLower().Contains(term.ToLower()).OrderBy(x => x.FullName)

see JQuery Autocomplete Or Select2