Unable to connect to the C# Controller from frontend request-CodePudding

I am implementing Search by siteId feature using typescript and C#. I am not able to connect to C# controller from frontend request. Here i am suppose to pass siteId as parameter. Please find my code below.
HTML:

              <div >
                <label>Site Id search:</label>
                <input type="text" title="You can search for a partial SiteId or a list of SiteId separated by semicolons" ng-model="vm.siteIdFilter" />&nbsp;<button ng-click="vm.loadAvailableDevices()"><i  aria-hidden="true"></i>&nbsp;Search</button><br />
              </div>

controller.ts

loadAvailableDevices(currentPage: number = 1) {
      if (currentPage === 1) {
        this.isLoading = true;
        this.availableDevices = new Array<any>();
      }

      let queryFilter: any = { serialNumber: this.serialNumberFilter, deviceType: this.selectedDeviceType };

      this.deviceService.loadUpdatableDevices(this.currentTenant.Id, queryFilter, this.siteIdFilter)
        .then((response: any) => {
          this.availableDevices = this.availableDevices.concat(response);

          this.deviceCnt = this.availableDevices.length;
          this.isLoading = false;
        });
    }

service.ts

      loadUpdatableDevices(tenantId: number, filter: any, siteId: string): ng.IPromise<any> {
        const uri = this.routes.getUpdatableDevices.replace('{:tenantId}', tenantId.toString());

        return this.restService
          .get(uri, { siteId, filter }, true)
          .then((response: any) => {
            if (response.data) {
              return response.data;
            }
          })
          .catch((response: any) => {
            return this.$q.reject(response);
          });
      }

RoutePath

getUpdatableDevices: '/device-management/tenants/{:tenantId}/updatableDevices'

C# Controller.cs

[Route("tenants/{tenantId}/updatableDevices")]
        [AcceptVerbs("GET")]
        public IEnumerable<EtpDevice> GetUpdatableDevices(int tenantId, [FromUri] string filter, string siteId)
        {
            var connectedUser = GetUser();
            if (siteId != null)
            {
                var siteList = this.DataAccess.GetSitesListById(connectedUser, siteId);
            }
        }

I am not able to connect to C# controller when I pass siteid from the frontend. Below is the error i am getting in inspect element. "{"StatusCode":500,"Message":"Can't bind multiple parameters ('siteId') to the request's content."}"

May I know what's wrong with the code? Please help me to fix this. Thanks in advance.

CodePudding user response：

Try to modify your service.ts as follows, pass the siteId parameter as a query string instead of the request body.

loadUpdatableDevices(tenantId: number, filter: any, siteId: string): Promise<any> {
  const uri = this.routes.getUpdatableDevices.replace('{:tenantId}', tenantId.toString());

  return this.restService
    .get(uri   `?filter=${encodeURIComponent(JSON.stringify(filter))}&siteId=${siteId}`)
    .then((response: any) => {
      if (response.data) {
        return response.data;
      }
    })
    .catch((response: any) => {
      return Promise.reject(response);
    });
}

CodePudding user response：

Assume that your AngularJS side successfully passes the nested object as params to API.

The Uri should be as:

'/device-management/tenants/{:tenantId}/updatableDevices/?filter.serialNumber=SerialNumberValue&filter.deviceType=DeviceType&siteId=SiteId'

Create the DeviceFilterModel class to match the object type that receives from Uri.

public class DeviceFilterModel
{
    public Filter Filter { get; set; }
    public string SiteId { get; set; }
}

public class Filter
{
    public string SerialNumber { get; set; }
    public string DeviceType { get; set; }
}

Modify the GetUpdatableDevices API action signature as below:

[Route("tenants/{tenantId}/updatableDevices")]
[AcceptVerbs("GET")]
public IEnumerable<EtpDevice> GetUpdatableDevices(int tenantId, 
    [FromUri] DeviceFilterModel model)

Reference: Using [FromUri]