Ajax向MVC控制器新增参数后，所有参数数据均为空求助

Hey there! I’ve run into this exact issue before when mixing file uploads with additional JSON data in AJAX calls to MVC controllers. Let’s break down what’s going wrong and how to fix it.

The Root Problem #

When you send a FormData object for file uploads alongside a separate JSON string, MVC’s model binding can’t parse both formats at once. FormData uses the multipart/form-data content type, while your JSON string expects application/json—mixing these two without proper handling breaks the binding process entirely.

The Solution: Combine Everything Into FormData #

Instead of sending two separate data sources, append your JSON string directly to the FormData object. This lets MVC parse all data in one consistent format. Here’s how to adjust your AJAX code:

function uploadFile() { 
    var fileData = new FormData($(form1)[0]); // Grab form file data
    var details = JSON.stringify(markers); // Stringify your markers array
    
    // Add the JSON string to your FormData object
    fileData.append('Details', details);
    
    $.ajax({ 
        url: '../Home/FilePost', 
        type: 'POST',
        processData: false, // Critical: Don't let jQuery process FormData (breaks file uploads)
        contentType: false, // Critical: Let the browser set the correct multipart header
        data: fileData,
        success: function(response) {
            // Handle success logic here
            console.log("Upload successful!", response);
        },
        error: function(xhr, status, error) {
            // Handle error cases here
            console.error("Upload failed:", error);
        }
    });
}

Adjust Your Controller to Receive the Combined Data #

Now update your MVC controller to accept the unified data. You can use either a model class (cleaner for larger data sets) or direct parameters:

Option 1: Use a Model Class

First, define a model that matches the data structure you’re sending:

public class UploadRequest
{
    // Matches the file inputs in your HTML form (name attributes should align)
    public IEnumerable<HttpPostedFileBase> Files { get; set; }
    // Matches the 'Details' key we added to FormData
    public string Details { get; set; }
}

Then use this model in your controller action:

using Newtonsoft.Json; // Ensure you have the Newtonsoft.Json NuGet package installed

[HttpPost]
public ActionResult FilePost(UploadRequest request)
{
    // Deserialize the JSON string back into your markers array
    var markers = JsonConvert.DeserializeObject<List<YourMarkerModel>>(request.Details);
    
    // Process your files and marker data here
    // Example: Save files to server, persist marker data to database, etc.
    
    return Json(new { Success = true, Message = "Upload completed successfully!" });
}

Option 2: Direct Parameters (Simpler for Smaller Data)

If you don’t want to create a model, you can accept parameters directly:

using Newtonsoft.Json;

[HttpPost]
public ActionResult FilePost(IEnumerable<HttpPostedFileBase> files, string Details)
{
    var markers = JsonConvert.DeserializeObject<List<YourMarkerModel>>(Details);
    
    // Your processing logic here
    
    return Json(new { Success = true });
}

Key Notes to Avoid Future Issues #

• processData: false: Prevents jQuery from converting FormData into a string, which would corrupt file uploads.
• contentType: false: Tells jQuery not to set a custom content type header—instead, the browser will automatically set the correct multipart/form-data header with a proper boundary.
• Matching Names: Ensure the key used in fileData.append('Details', ...) exactly matches the parameter/model property name in your controller.
• JSON Serialization: Make sure your markers array is fully serializable (no circular references, all properties are primitive types or serializable objects).

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