如何筛选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

同意Jordy。

您可以做的是使用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>

在View结尾添加您的javascript代码：

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

为了获得工作，你需要做的事情很少：

1. 在视图或布局中包含JS和CSS文件。
2. 确保您返回的任何内容都是select2所期望的格式，或者只是按照您的方式映射它。

如果您的模型使用非必需格式链接，请选择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