如何通过AJAX调用渲染Personeelsdossier控制器中的正确Partial View？

Got it, let's break down exactly how to implement AJAX-loaded partial views for your Personeelsdossier controller—this is a common pattern I use all the time, so here's a straightforward, working approach:

First, you'll need to create action methods in your PersoneelsdossierController that return the partial views you want to render. For example, for the Rekeningen view (assuming you need to pass a staff ID to fetch relevant data):

public IActionResult Rekeningen(int personeelsId)
{
    // Fetch your Rekeningen data here (e.g., from a service or database)
    var rekeningenModel = _yourDataService.GetRekeningenByPersoneelId(personeelsId);
    
    // Return the partial view with the model—make sure the view name matches your actual partial file
    return PartialView("_Rekeningen", rekeningenModel);
}

If you don't need a parameter (e.g., a static partial), you can simplify it to a parameterless method that returns PartialView("_Rekeningen").

In your parent view (like Personeelsdossier/Index), add an empty container where the partial view will be injected. You'll also want a trigger (like a button or navigation link) to initiate the AJAX call:

<!-- Container to hold the loaded partial view -->
<div id="partialViewTarget"></div>

<!-- Example trigger button with embedded staff ID -->
<button id="loadRekeningenBtn" data-personeels-id="456">Laad Rekeningen</button>

Using data-* attributes is a clean way to pass dynamic values (like staff IDs) to your JavaScript.

Use jQuery (or vanilla JS, if you prefer) to handle the AJAX call and render the partial view. Here's a jQuery example that's easy to adapt:

$(document).ready(function() {
    $('#loadRekeningenBtn').click(function() {
        const btn = $(this);
        const personeelsId = btn.data('personeels-id');
        
        // Optional: Add loading state to prevent duplicate clicks
        btn.prop('disabled', true).text('Laden...');
        
        $.ajax({
            url: '/Personeelsdossier/Rekeningen',
            type: 'GET',
            data: { personeelsId: personeelsId },
            success: function(partialHtml) {
                // Inject the returned partial view HTML into the container
                $('#partialViewTarget').html(partialHtml);
                // Reset the button state
                btn.prop('disabled', false).text('Laad Rekeningen');
            },
            error: function(xhr, status, error) {
                // Handle errors gracefully
                $('#partialViewTarget').html('<p>Er is een fout opgetreden bij het laden van de Rekeningen-gegevens.</p>');
                console.error('AJAX Error:', error);
                btn.prop('disabled', false).text('Laad Rekeningen');
            }
        });
    });
});

If you need to load other partials (not just Rekeningen), wrap the AJAX logic in a reusable function to avoid repetition:

function loadPartialView(actionName, personeelsId) {
    const targetContainer = $('#partialViewTarget');
    targetContainer.html('<p>Laden...</p>'); // Show loading message
    
    $.ajax({
        url: `/Personeelsdossier/${actionName}`,
        type: 'GET',
        data: { personeelsId: personeelsId },
        success: function(partialHtml) {
            targetContainer.html(partialHtml);
        },
        error: function(xhr, status, error) {
            targetContainer.html(`<p>Fout bij laden van ${actionName}.</p>`);
            console.error(error);
        }
    });
}

// Usage for Rekeningen
$('#loadRekeningenBtn').click(function() {
    loadPartialView('Rekeningen', $(this).data('personeels-id'));
});

// Usage for another partial (e.g., Persoonsgegevens)
$('#loadPersoonsgegevensBtn').click(function() {
    loadPartialView('Persoonsgegevens', $(this).data('personeels-id'));
});

• Partial View Naming: Ensure the name in PartialView("_Rekeningen") matches your actual partial file name (e.g., _Rekeningen.cshtml). If it's in a subfolder, include the path like PartialView("Partials/_Rekeningen").
• POST Requests: If you need to load a partial after form submission, switch the AJAX type to POST, add the [HttpPost] attribute to your controller action, and pass form data in the data parameter.
• Anti-Forgery Tokens: If using POST, don't forget to include the anti-forgery token in your AJAX request to avoid validation errors.

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