如何通过http get向服务器发送参数

Question

我正在努力学习 asp.net 休息 api 和 Angular Kendo UI。一切正常，但我想通过将 take 和 skip 作为 Get 参数发送到 API 来进行服务器端分页。

这是我对 API get 方法的实现：

       public ResaultPage GetProducts(int skip =1, int take=20)
          {
       ResaultPage rp = new ResaultPage();
       var count= db.Products.Count<Product>();

        rp.count = count;
        IPagedList<Product> x = db.Products.OrderBy(s => 
         s.CategoryID).ToPagedList<Product>(skip, take);
        foreach (Product v in x)
        {
            rp.pr.Add(v);
        }

        return rp;}

其中 ResaultPage class 包含产品列表和计数属性。

这是我的产品-service.ts获取函数：

    getProducts1(skip:any, take:any ): Observable<ResaultPage> {
     let params = new URLSearchParams(); 
     params.set('Skip', skip);  
     params.set('Take', take); 
     return this.http.get<ResaultPage>(this.productsUrl)
  .pipe(
    tap(data => console.log(JSON.stringify(data))),
    catchError(this.handleError)

     );
      }

这里是 product-component.ts 处理函数：

         public pageChange(event: PageChangeEvent): void {
            this.gridState.skip = event.skip+10;


          this.productService.getProducts1(this.gridState.skip,
        this.gridState.take).subscribe(
           sub  => {
        this.totalCount=sub.count;
       this.products=sub.pr;
          console.log(this.products);

         });

当我运行应用程序时，我在同一页面中使用 (1,2) 分页获得前 20 条记录当我点击 2 时，我仍然得到相同的结果。

例如，我需要每页仅获取 10 个，其他 10 个在第 2 页。

其中 Kendo Ui 的属性 skip =1 and for take= 10;

Answer 1

在 url 之后，您需要再传递一个名为 options 的包含参数的对象。你可以使用 HttpParams 发送参数

getProducts1(skip:any, take:any ): Observable<ResaultPage> {
     let myparams = new HttpParams(); 
     myparams.set('Skip', skip);  
     myparams.set('Take', take); 
     return this.http.get<ResaultPage>(this.productsUrl,{params:myparams})
  .pipe(
    tap(data => console.log(JSON.stringify(data))),
    catchError(this.handleError)

     );
      }

如何通过http get向服务器发送参数

How to send Parameters to server through http get

http

telerik

kendo-ui

angular