Question

我正在制作一个小型CRUD通讯录应用程序。它有一个显示所有联系人的表。表中的数据是从asp.net核心Web API使用的。

我创建了一个搜索框，该搜索框应该能够返回数据库中的名字，姓氏或地址的查询。我假设查询将通过修改后的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; }
    }

这是使用api的angular服务：

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发送该参数？

在Angular7客户端上使用ASP.NET Core进行服务器端搜索（过滤）

0 个答案: