Asp.net MVC Core - 使用Ajax无法加载部分视图

Question

根据这篇文章，我试图通过Ajax加载Partial View。但是partial view没有被加载。

注意事项：

1. 我使用默认安装/配置的Jquery，在Visual Studio的MVC Core Web应用程序项目模板中。
2. Google Chrome的开发人员工具没有显示任何错误。浏览器视图源仍然显示<div id="UpdateTabData"></div>标签为空。
3. 我已测试在Ajax调用的点击事件内放置了alert('Test')并且在控制器操作方法内使用断点来确实调用了TestAction方法，并且该方法确实返回了return PartialView("PartialView", myViemodel);而没有任何错误。
4. 但是Ajax最终从其错误函数返回了我的自定义错误消息。

控制器：

[HttpGet]
public IActionResult TestAction(string calledFrom)
{
  ... some code here with a view model myViemodel

  return PartialView("myPartialViewName", myViemodel);
}

视图:

@model myProj.Models.myTestViewModel
...some html here...
<div id="UpdateTabData"></div>
... more html here
...

在视图末尾的Ajax代码:

$(document).ready(function () {

    $('#myTabstripID li').click(function () {
        var li_id = $(this).attr("id");

        $.ajax({
            url: '@Url.Action("TestAction", "myControllerName")',
            data: { calledFrom: li_id},
            contentType: 'application/json',
            dataType: 'html'
            type: 'GET',
            cache: false,
            success: function (data) {
                $('#UpdateTabData').html(data);
            },
            error: function (data) {
                alert('Error occurred');
            }
        });
    });

});

- nam

---

打开您的浏览器开发工具 -> 网络选项卡，查看您的ajax调用响应。它是200 OK吗？如果不是，请检查响应并查看您正在获取什么。也许您的服务器代码正在崩溃。 - Shyju

@Shyju 是的，dev tools -> network -> Headers 选项卡显示了 状态码：200 OK。 - nam

你的开发工具中的预览窗格显示什么？ - Detilium

通过使用您的评论，我能够通过在控制器中的return PartialView("myPartialViewName", myViemodel);语句中添加.cshtml扩展名来解决问题。很抱歉，我没有意识到状态码：200 OK实际上是在我发现响应部分中未找到视图文件的消息后（我的错）。我只是随便添加了.cshtml扩展名，并没有检查它是否实际上已解决问题。为了其他用户的利益，如果您将您的评论转换为“答案”，我会将其标记为答案。 - nam

Answer 1

1. 按下F12键，检查应该返回部分视图的操作的URL。
2. 复制该URL并粘贴到浏览器地址栏中，然后按回车键。
3. 您将看到错误（如果有错误）或者您的部分视图。
4. 如果在步骤3中没有错误，请尝试在控制台中输入alert($('#UpdateTabData').length);（如果确实有这样的ID元素，则应为1）；

这是一个非常简单的任务（我是指获取返回部分视图的一些操作结果），所以它应该有效。因此，在某个地方可能只是您拥有错误的ID或类似于此的一些次要问题。

- Dmitry Sikorsky

Answer 2

你可以删除代码中的这部分内容。

contentType: 'application/json',

根据您在控制器中的ActionResult，您正在返回一个部分视图。因此，您的ajax调用期望的是视图而不是json。这将解决您的问题。

- Jorge Kean

---

这是不正确的，内容类型定义您正在发送的数据类型，而不是接收。DataType定义您要接收的内容。 - Anthony Mason