如何过滤asp.netcore项目上的列表

Question

对于可能不会很好解释的内容，我很抱歉（我刚刚开始编程，所以我对这些短语和所有内容仍然是新的）。

我有一个asp.netcore应用程序，其中我展示的公司，这是从数据库中使用控制器获取所有代理的列表：

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

那么我显示在视图中的数据：

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

此代码工作正常，但我想允许用户过滤剂的名字，所以他们不会有搜索整个列表。我试图在互联网上寻找一种方式，但可以找到任何（可能我没有使用正确的搜索词）

谢谢。

编辑：

我的代理类（动作部分）：

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()); 
    } 

    ..... 

和视图：

<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

我想这应该结合使用Ajax与完成某种类型的JQuery控件或其他东西。

另一种解决方案是在内存（客户端）过滤中执行此操作。这也可以通过使用这些解决方案来完成。

但是，如果你要过滤服务器端需要查询/学期传递给Ajax调用和过滤器像

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

看到JQuery Autocomplete 或者Select2

Answer 2

与约迪同意。

你可以做的是使用ajax获取代理列表或者返回View Model中的代理列表，并使用select2或类似的插件以获得更好的使用体验。

动作方法：

public ActionResult ReturnPage(){ 

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

    return View(listOfAgents); 
} 

在你看来：

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

在视图的末尾添加JavaScript代码：

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

一些事情你需要为了做获得工作：

1. 在视图或布局中包含JS和CSS文件。
2. 确保无论您的退货是按照select2还是 的预期格式，只需将其映射为您的方式即可。

如果你的模型采用了比需要的格式以外的其他选择二link

编辑：添加新的代码：我试图模仿你的情况。

在你看来：

<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> 
} 

这是它会是什么样子：

如果您搜索：