Ajax调用无法将Action返回的PartialView传入success回调，原因何在？

首先一眼就看到了脚本里的致命错误——你把AJAX的success回调拼写成succes了！少了一个字母's'，jQuery根本识别不到这个回调函数，所以就算Action正常执行，alert也不会触发，这是最直接的原因。

除了这个拼写错误，还有几个潜在问题需要一并修复：

1. 修正AJAX的回调拼写 #

把succes改成success，这是让alert弹出的关键，同时建议加上error回调方便后续排查问题：

$(".detail-link").click(function () {
    var Did = $(this).data("id");
    $.ajax({
        type: 'POST',
        url: "/Home/Details", // 建议去掉末尾斜杠，避免路由匹配问题
        data: { id: Did },
        dataType: 'html',
        success: function(data){ // 这里修正拼写
            alert(data);
            // 之后可以把data追加到模态框里，比如：
            // $("#your-modal-content").html(data);
        },
        // 新增error回调，方便排查请求失败的原因
        error: function(xhr, status, error) {
            console.log("请求出错：", status, error);
            console.log("服务器响应内容：", xhr.responseText);
        }
    });
});

2. 修复Action中的空引用隐患 #

你的Action里，当book == null时，只写了HttpNotFound();但没有return，这会导致代码继续往下执行，访问book.DisplayNumber时抛出空引用异常，返回500错误，AJAX会进入error回调而不是success。需要加上return：

[HttpPost]
public ActionResult Details(int? id)
{
    HomeModel model = new HomeModel();
    var book = db.Books.Where(b => b.Id == id).Include(b => b.Author).SingleOrDefault();
    if (book == null)
    {
        return HttpNotFound(); // 加上return，终止后续代码执行
    }
    book.DisplayNumber++;
    db.SaveChanges();
    model.bookDetails = book;
    return PartialView(model);
}

额外排查建议 #

• 打开浏览器开发者工具（F12），切换到Network标签，点击按钮后查看AJAX请求的状态码和响应内容，这是排查AJAX问题最直观的方式。
• 确认你的PartialView存在于正确路径下（默认会匹配Views/Home/Details.cshtml）。

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