如何过滤asp.net核心项目的列表

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 获取代理列表或在 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，请选择2

编辑：添加新代码：我已尝试模拟您的情况。

在你看来：

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

如下所示：

如果您搜索过：

Answer 2

我认为这应该使用 Ajax 结合某种 JQuery 控件或其他东西来完成。

另一个解决方案是在内存（客户端）过滤中进行。这也可以使用这些解决方案来完成。

但是如果你想过滤服务器端，你需要将查询/术语传递给 ajax 调用并像过滤器一样进行过滤

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

见JQuery Autocomplete 或Select2