Angular 5 GET请求无法传递JSON对象至C# WebAPI

Hey there, I’ve dealt with this exact scenario before when working with Angular and WebAPI—let’s get your complex JSON object through that GET request properly. The core issue here is that GET requests don’t natively support sending complex objects in the request body (some clients allow it, but WebAPI’s default model binding ignores GET bodies). Here are your best solutions:

Option 1: Serialize the JSON Object as a Query String Parameter #

This is the simplest fix if you need to stick with GET. We’ll convert your filter array to a JSON string, pass it as a query param, then deserialize it on the backend.

Angular 5 Code: #

import { HttpClient, HttpParams } from '@angular/common/http';

// Assume your filter array is stored in this variable
const filterArray = [ { "Index": 1, /* other properties */ } ];

// Build your parameters
const params = new HttpParams()
  .set('firstStringParam', 'your-first-value')
  .set('secondStringParam', 'your-second-value')
  .set('filter', JSON.stringify(filterArray));

// Send the GET request
this.http.get('/api/Admissions/Filter', { params })
  .subscribe(response => {
    // Handle response
  }, error => {
    // Handle error
  });

C# WebAPI Controller Code: #

using Newtonsoft.Json; // Make sure you have Newtonsoft.Json installed via NuGet

[Route("api/[controller]")]
[ApiController]
public class AdmissionsController : ControllerBase
{
    [HttpGet("Filter")]
    public IActionResult GetFilteredAdmissions(string firstStringParam, string secondStringParam, string filter)
    {
        // Deserialize the JSON string back into your model
        var filterArray = JsonConvert.DeserializeObject<List<OnlineAdmissionFilter>>(filter);
        
        // Your business logic here
        return Ok();
    }
}

// Define your filter model to match the JSON structure
public class OnlineAdmissionFilter
{
    public int Index { get; set; }
    // Add all other properties from your JSON object here
}

Option 2: Switch to a POST Request (Recommended for Complex Data) #

GET is designed for retrieving data with simple parameters—for complex filters, POST is more appropriate (even if you’re just fetching data, this is widely accepted for complex queries). This avoids query string length limits and makes model binding straightforward.

Angular 5 Code: #

import { HttpClient } from '@angular/common/http';

// Create a request body that includes all your parameters
const requestBody = {
    onlineAdmissionFilterArray: [ { "Index": 1, /* other properties */ } ],
    firstStringParam: 'your-first-value',
    secondStringParam: 'your-second-value'
};

// Send the POST request
this.http.post('/api/Admissions/Filter', requestBody)
  .subscribe(response => {
    // Handle response
  }, error => {
    // Handle error
  });

C# WebAPI Controller Code: #

[Route("api/[controller]")]
[ApiController]
public class AdmissionsController : ControllerBase
{
    [HttpPost("Filter")]
    public IActionResult GetFilteredAdmissions([FromBody] AdmissionFilterRequest request)
    {
        // All parameters are automatically bound to the request model
        var filterArray = request.OnlineAdmissionFilterArray;
        var strParam1 = request.FirstStringParam;
        var strParam2 = request.SecondStringParam;
        
        // Your business logic here
        return Ok();
    }
}

// Define a request model to hold all parameters
public class AdmissionFilterRequest
{
    public List<OnlineAdmissionFilter> OnlineAdmissionFilterArray { get; set; }
    public string FirstStringParam { get; set; }
    public string SecondStringParam { get; set; }
}

public class OnlineAdmissionFilter
{
    public int Index { get; set; }
    // Add all other properties from your JSON object here
}

Option 3: Bind Query Parameters Directly to a List (For Strict GET Use Cases) #

If you must use GET and don’t want to serialize to a string, you can construct query parameters in a format WebAPI’s model binding understands.

Angular 5 Code: #

import { HttpClient, HttpParams } from '@angular/common/http';

const filterArray = [ { "Index": 1, /* other properties */ } ];

let params = new HttpParams()
  .set('firstStringParam', 'your-first-value')
  .set('secondStringParam', 'your-second-value');

// Add each filter item's properties as indexed query params
filterArray.forEach((item, index) => {
    params = params
      .set(`onlineAdmissionFilterArray[${index}].Index`, item.Index.toString())
      // Repeat for other properties, e.g.:
      // .set(`onlineAdmissionFilterArray[${index}].PropertyName`, item.PropertyName);
});

this.http.get('/api/Admissions/Filter', { params })
  .subscribe(response => { /* ... */ });

C# WebAPI Controller Code: #

[Route("api/[controller]")]
[ApiController]
public class AdmissionsController : ControllerBase
{
    [HttpGet("Filter")]
    public IActionResult GetFilteredAdmissions(string firstStringParam, string secondStringParam, List<OnlineAdmissionFilter> onlineAdmissionFilterArray)
    {
        // The list will be automatically bound from the query params
        return Ok();
    }
}

public class OnlineAdmissionFilter
{
    public int Index { get; set; }
    // Add other properties here
}

Final Notes #

• Avoid GET for large/complex data: Query strings have length limits (varies by browser/server), so POST is safer for anything beyond simple parameters.
• Always match model properties: Ensure your C# model property names exactly match the JSON keys (case-insensitive in WebAPI, but it’s best to keep them consistent to avoid issues).

内容的提问来源于stack exchange，提问作者Denver Gomes