asp.netcoreプロジェクトのリストをフィルタリングする方法

Question

おそらくよく説明されていないものは残念です（私はプログラミングを始めたばかりですので、私はまだフレーズとすべてで新しいです）。

私は、コントローラを使用してDBから取得され、企業内のすべてのエージェントのリストを表示していたに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> 

このコードは正常に動作しますが、私は、ユーザーがエージェント名をフィルタリングできるようにしたいので、彼らは、リスト全体を検索する必要はありません。私はインターネット上で道を探すことを試みているが、何かを見つけることができる（おそらく私は正しい検索語を使用していない）

ありがとう。

EDIT：

マイエージェントクラス（アクション部分）：

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

    ..... 

とビュー：私はこれはとの組み合わせでのAjaxを使用して行われるべきだと思う

<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

何らかの種類のJQueryコントロールなどがあります。

もう1つの解決策は、メモリ（クライアント側）のフィルタリングで行うことです。これは、これらのソリューションを使用して行うこともできます。

しかし、あなたは、サーバー側にフィルタを適用したい場合は、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); 
} 

：ためにあなたがする必要がある

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

いくつかのこと：

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

ビューの終わりには、あなたのjavascriptのコードを追加します。仕事を得る：

1. JSファイルとCSSファイルをビューまたはレイアウトに含めます。
2. あなたの返品がselect2か、 のいずれかであることを確認してください。

Selectセレクトモデルが必要な形式以外のものを使用している場合link

EDIT：新しいコードを追加：私はあなたの状況をシミュレートしようとしました。あなたのビューで

：

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

これは、それは次のようになります方法です：

そして、あなたが検索した場合：