ASP.NET MVC中如何从JavaScript调用C#类的void方法

Hey there! Let's break down your two questions and walk through solutions step by step.

First, looking at your partial code snippet, I notice you've got the right foundation with enctype="multipart/form-data" (critical for file uploads) and the anti-forgery token. Let's fill in the gaps and cover common pitfalls:

Complete Frontend Form Example #

Here's a polished version of your form with proper file input setup:

@using(Html.BeginForm("UploadDocuments", "User", FormMethod.Post, new { enctype = "multipart/form-data", id = "form-upload-documents" })) 
{ 
    @Html.AntiForgeryToken() 
    <ul id="UploadContainer" class="upload-container" data-last-id="0"> 
        <li class="col-upload-figure"> 
            <figure class="upload-figure"> 
                <label class="btn-upload" for="Picture_0"> 
                    <span class="btn-upload-text">Click to add files</span>
                </label>
                <!-- Hidden file input with correct name for MVC model binding -->
                <input type="file" id="Picture_0" name="uploadedFiles" multiple style="display: none;" />
            </figure>
        </li>
        <!-- Add dynamic file inputs here if you need multiple upload slots -->
    </ul>
    <button type="submit" class="btn btn-primary mt-3">Upload All Files</button>
}

Corresponding Backend Action #

Make sure your UserController has an action that properly handles the uploaded files:

[HttpPost]
[ValidateAntiForgeryToken]
public void UploadDocuments(IEnumerable<HttpPostedFileBase> uploadedFiles)
{
    // Check if any files were uploaded
    if (uploadedFiles == null || !uploadedFiles.Any())
        return;

    // Define your upload directory (ensure it has write permissions!)
    var uploadDir = Server.MapPath("~/App_Data/Uploads");
    if (!Directory.Exists(uploadDir))
        Directory.CreateDirectory(uploadDir);

    foreach (var file in uploadedFiles)
    {
        // Skip empty files
        if (file.ContentLength <= 0)
            continue;

        // Generate a safe filename to avoid conflicts
        var safeFileName = Path.GetFileName(file.FileName);
        var fullPath = Path.Combine(uploadDir, safeFileName);
        
        // Save the file to disk
        file.SaveAs(fullPath);
    }
}

Common Fixes to Check #

• Matching Names: Ensure the file input's name attribute matches the action parameter name (e.g., name="uploadedFiles" ↔ IEnumerable<HttpPostedFileBase> uploadedFiles).
• Write Permissions: The server needs write access to your target upload directory.
• Dynamic Inputs: If you're adding file inputs dynamically, make sure each one uses the same name attribute (MVC will bind all of them to the IEnumerable parameter).
• JavaScript Interference: Check if any JS is preventing the form's default submit behavior (e.g., event.preventDefault() without handling the upload manually).

There are a few straightforward ways to do this, depending on whether you need an asynchronous call or can tolerate a page refresh:

Option 1: Async Call with Ajax (Recommended) #

This keeps the page intact and lets you handle success/error states in JS.

Backend Action #

First, define your void method in the controller:

[HttpPost]
[ValidateAntiForgeryToken]
public void ProcessData(string inputValue, int itemId)
{
    // Your business logic here (no return value needed)
    // Example: Update a database record, trigger a background task, etc.
}

JavaScript (jQuery Example) #

Use Ajax to send a POST request with the anti-forgery token (critical for security):

function triggerServerMethod() {
    // Grab the anti-forgery token from your page (auto-added by @Html.AntiForgeryToken())
    var token = $('input[name="__RequestVerificationToken"]').val();

    $.ajax({
        url: '@Url.Action("ProcessData", "User")', // Generates the correct URL via MVC routing
        type: 'POST',
        headers: {
            'RequestVerificationToken': token // Pass the token to prevent CSRF attacks
        },
        data: {
            inputValue: 'Sample text',
            itemId: 42
        },
        success: function() {
            console.log('Server method executed successfully!');
            // Add user feedback here (e.g., a toast notification)
        },
        error: function(xhr, status, error) {
            console.error('Failed to call server method:', error);
            // Handle errors (e.g., show an error message to the user)
        }
    });
}

Option 2: Form Submission (Page Refresh) #

If you don't mind a page reload, you can create a hidden form and submit it programmatically:

function callMethodViaForm() {
    // Create a hidden form element
    var form = $('<form>', {
        action: '@Url.Action("ProcessData", "User")',
        method: 'POST'
    });

    // Add anti-forgery token
    form.append($('<input>', {
        type: 'hidden',
        name: '__RequestVerificationToken',
        value: $('input[name="__RequestVerificationToken"]').val()
    }));

    // Add any parameters your method needs
    form.append($('<input>', {
        type: 'hidden',
        name: 'inputValue',
        value: 'Sample text'
    }));
    form.append($('<input>', {
        type: 'hidden',
        name: 'itemId',
        value: 42
    }));

    // Append to the page and submit
    form.appendTo('body').submit();
}

Option 3: SignalR (Real-Time Scenarios) #

If you need real-time communication (e.g., triggering server actions from client events without polling), use SignalR. This is more advanced but perfect for live apps like chat or dashboards.

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