MVC中点击按钮后PartialView显示随即消失的问题求助

Hey there! Let’s tackle that frustrating problem where your PartialView pops up for a split second and then vanishes—this is one of the most common pitfalls in MVC projects, so we’ll get this sorted out step by step.

What’s Causing This? #

9 times out of 10, the issue boils down to default form submission behavior. If your button is inside a form (either using Html.BeginForm() or a plain HTML <form> tag), clicking it triggers a full page refresh. Your PartialView renders briefly before the page reloads, wiping out the dynamic content.

Step-by-Step Solutions #

1. Block Default Form Submission with AJAX #

The most reliable fix is to use jQuery AJAX to load the PartialView asynchronously, and stop the button from triggering a full form submit. Here’s how to implement it:

First, add a container in your main view where the PartialView will render:

<!-- Main View -->
<div id="partialViewContainer"></div>

Then, bind a click event to your button that prevents the default submit and fetches the PartialView via AJAX:

<script>
    $('#fetchDetailsBtn').click(function(e) {
        // Stop the form from submitting normally
        e.preventDefault();
        
        // Grab the Employee_ID value from your input
        var empId = $('#Employee_ID').val();
        
        // Send AJAX request to your controller action
        $.ajax({
            url: '@Url.Action("GetEmployeePartial", "YourControllerName")',
            type: 'GET',
            data: { employeeId: empId },
            success: function(result) {
                // Populate the container with the PartialView HTML
                $('#partialViewContainer').html(result);
            },
            error: function() {
                alert('Oops, something went wrong loading the details!');
            }
        });
    });
</script>

Make sure your controller action returns a PartialView, not a full View:

// Controller Action
public ActionResult GetEmployeePartial(int employeeId)
{
    // Use your service/repo to fetch data based on employeeId
    var employeeDetails = YourDataService.GetEmployeeInfo(employeeId);
    
    // Return the PartialView with your model
    return PartialView("_EmployeeDetailsPartial", employeeDetails);
}

2. Use a Non-Submit Button #

If you don’t want to use AJAX right away, you can just change your button type to avoid triggering form submission. Replace any <input type="submit"> or <button type="submit"> with:

<button type="button" id="fetchDetailsBtn">Load Details</button>

Then you can still bind the same AJAX logic to this button—no default submit behavior to worry about!

3. Use Ajax.BeginForm (Alternative Approach) #

If you prefer using MVC’s built-in AJAX helpers, you can use Ajax.BeginForm to automatically update the PartialView container without full page reloads. Just make sure you include the jquery.unobtrusive-ajax.js script in your layout or view.

Here’s how it looks in your main view:

@using (Ajax.BeginForm("GetEmployeePartial", "YourControllerName", 
    new AjaxOptions { 
        UpdateTargetId = "partialViewContainer", 
        HttpMethod = "GET",
        LoadingElementId = "loadingSpinner" // Optional: show a loading indicator
    }))
{
    @Html.LabelFor(m => m.Employee_ID)
    @Html.TextBoxFor(m => m.Employee_ID)
    
    <input type="submit" value="Load Details" />
}

<div id="partialViewContainer"></div>
<div id="loadingSpinner" style="display:none;">Loading...</div>

Quick Checks to Verify #

• Double-check that your controller action returns PartialView() and not View()—returning a full View will replace the entire page instead of just the PartialView container.
• Ensure your PartialView doesn’t include layout elements (like _Layout.cshtml)—this can cause unexpected rendering issues. You can add @{ Layout = null; } at the top of your PartialView to disable the layout.

That should do it! Try these steps, and your PartialView should stay visible once loaded.

内容的提问来源于stack exchange，提问作者Hussain Abdul Majeed