Hey there! Let's walk through the fixes you need to get that Ajax partial refresh working—since you're new to MVC, these are common gotchas that trip up even experienced devs sometimes.

First, let's break down the issues in your current code and how to fix them:

1. Incorrect Controller URL Format #

MVC routing doesn't expect the word "Controller" in your URL. Your current URL is /PacientsController/Edit?id=...—it should be /Pacients/Edit instead. The framework automatically maps the controller name without the suffix.

2. Make Sure Your Edit Action Returns a PartialView #

If your Edit action in PacientsController returns a full View(), it'll include your layout page (like headers/footers) which you don't want for partial content. Update it to return a PartialView() instead:

public ActionResult Edit(int id)
{
    var patient = db.Pacients.Find(id);
    if (patient == null)
    {
        return HttpNotFound();
    }
    // Return a partial view without the full layout
    return PartialView("Edit", patient);
}

(Note: If your partial view has a different name than the action, specify it explicitly like above.)

3. Fix Event Binding for Dynamic Elements #

Since your buttons are generated inside a foreach loop (dynamic content), the direct .click() binding might not work because the buttons don't exist when the initial DOM loads. Use event delegation instead to bind the click event to a parent element that exists on page load:

// Use document as the parent (or a closer static container if you have one)
$(document).on("click", ".editButton", function () {
    var patientId = $(this).data("id");
    
    $.ajax({
        url: "/Pacients/Edit",
        type: "GET",
        // Pass the ID as a data parameter instead of appending to the URL (cleaner)
        data: { id: patientId },
        success: function (result) {
            $("#content").html(result);
        },
        // Add an error handler to help debug if things go wrong
        error: function(xhr, status, error) {
            $("#content").html("Oops, failed to load edit form: " + error);
        }
    });
});

4. Verify jQuery is Loaded Correctly #

Double-check that jQuery is referenced in your page (either in _Layout.cshtml or directly in Index.cshtml). If it's missing, your Ajax code won't run at all. Example:

<!-- Place this before your custom script, usually at the end of the body -->
<script src="~/Scripts/jquery-3.7.1.min.js"></script>

(Make sure the path matches the jQuery version you have in your project's Scripts folder.)

5. Check Your Route Configuration #

Ensure your default route in RouteConfig.cs is set up correctly to handle the id parameter:

routes.MapRoute(
    name: "Default",
    url: "{controller}/{action}/{id}",
    defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);

Once you make these changes, clicking your "Edit" button should load the partial view content into the #content div without redirecting to a new page. You can apply the same pattern to your Details and Delete actions too—just create partial views for them and adjust the Ajax URL accordingly.

内容的提问来源于stack exchange，提问作者L.Johnson