Поиск на сервере (фильтрация) с помощью ASP.NET Core на клиенте Angular7

Question

Я делаю небольшое приложение для адресной книги CRUD. У него есть таблица, которая отображает все контакты. Данные в таблице получены из основного веб-API asp.net.

Я сделал окно поиска, которое должно быть в состоянии вернуть запрос имени, фамилии или адреса из базы данных. Я предполагаю, что запрос будет отправлен через измененный URI, и он возвращает только контакт со строками, соответствующими запросу.

Это контроллер:

namespace AddressBook.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ContactDetailController : ControllerBase
    {
        private readonly ContactDetailContext _context;

        public ContactDetailController(ContactDetailContext context)
        {
            _context = context;
        }

        // GET: api/ContactDetail
        [HttpGet]
        public async Task<ActionResult<IEnumerable<ContactDetail>>> GetContactDetail()
        {
            return await _context.ContactDetail.ToListAsync();
        }

В моей папке Models у меня есть контекст и схема:

public class ContactDetailContext:DbContext
    {
        public ContactDetailContext(DbContextOptions<ContactDetailContext> options):base(options)
        {

        }

        public DbSet<ContactDetail> ContactDetail { get; set; }
    }

public class ContactDetail
    {
        [Key]
        public int CTId { get; set; }
        [Required]
        [Column(TypeName ="nvarchar(100)")]
        public string FirstName { get; set; }
        [Required]
        [Column(TypeName = "nvarchar(100)")]
        public string LastName { get; set; }
        [Required]
        [Column(TypeName = "nvarchar(100)")]
        public string Address { get; set; }
        [Required]
        [Phone]
        [Column(TypeName = "nvarchar(15)")]
        public string PhoneNumber { get; set; }
    }

Это служба в angular, которая потребляет API:

import { Injectable } from "@angular/core";
import { ContactDetail } from "./contact-detail.model";
import { HttpClient } from "@angular/common/http";

@Injectable({
  providedIn: "root"
})
export class ContactDetailService {
  formData: ContactDetail;
  readonly rootURL = "http://localhost:60809/api";
  list: ContactDetail[];

  constructor(private http: HttpClient) {}

// contact list
  refreshList() {
    this.http
      .get(this.rootURL + "/ContactDetail")
      .toPromise()
      .then(res => (this.list = res as ContactDetail[]));
  }

Затем я использую refreshList () с OnInit для отображения таблицы. Окно поиска находится в другом компоненте. Я не уверен, что должна делать кнопка поиска при клике.

Это компонент для списка:

@Component({
  selector: "app-contact-detail-list",
  templateUrl: "./contact-detail-list.component.html",
  styles: []
})
export class ContactDetailListComponent implements OnInit {
  currentContactInfo: any = {};

  constructor(
    private service: ContactDetailService,
    private toastr: ToastrService
  ) {}

  ngOnInit() {
    this.service.refreshList();
  }

Поскольку поиск выполняется в другом компоненте, я создаю там функцию, затем импортирую ее здесь, верно?

Нужно ли создавать новый метод в контроллере или помещать аргумент в существующий, и как мне отправить этот аргумент через angular?