MVC3：jquery ajax 从控制器返回带有 HTML 数据类型的部分视图，但出现错误答案

【问题标题】：MVC3: jquery ajax to return partial view with HTML dataType from controller but getting errorMVC3：jquery ajax 从控制器返回带有 HTML 数据类型的部分视图，但出现错误
【发布时间】：2014-05-17 12:22:37
【问题描述】：

我需要一些帮助。在按钮单击事件上从 jQuery ajax 调用它时，我从控制器操作返回部分视图作为 HTML dataType。

这是我的主视图中的 Javascript 标记：

$(function () {
     $('#searchButton').click(function () {
        var DTO = {
            Name: $('#Name').val()
        };
        $.ajax({
            url: '/Grid/GetSearch',
            type: "GET",
            dataType: "html",
            data: DTO,
            cache: false,
            success: function (data) {
                //Fill div with results
                $("#SearchViewDiv").html(data);
            },
            error: function (xhr, status, error) {
                alert(xhr.responseText);
            }
        });
    });
});

控制器代码：

[HttpGet]
    public ActionResult GetSearch(string name)
    {
        var accounts = _userAccounts.FindAll(x => x.Name.Contains(name));
        return PartialView("SearchResult", accounts);
    }

当 jQuery ajax 调用此操作时，我能够调试此控制器，但是当它返回时，我进入了 jQuery Ajax 的错误函数。所以猜测目标 URL 是正确的。但无法弄清楚我哪里出错了。如果需要更多信息，请告诉我。

【问题讨论】：

你遇到了什么错误？

标签： jquery asp.net-mvc asp.net-mvc-3

【解决方案1】：

感谢 Dzmitry 的投入。但我想出了解决办法。

问题：问题是在单击按钮后页面正在重新加载，导致 Ajax 调用在返回此部分视图响应时被取消。

解决方案：只需添加 event.preventDefault() 即可解决此问题。所以 Javascript sn-p 会是这个样子，

$('#searchButton').click(function (e) {
        var DTO = {
            Name: $('#Name').val()
        };
        e.preventDefault();
        $.ajax({
            url: '/Grid/GetSearch',
            type: "GET",
            dataType: "html",
            data: DTO,
            cache: false,
            success: function (data) {
                //Fill div with results
                $("#SearchViewDiv").html(data);
            },
            error: function (xhr, status, error) {
                alert(xhr.responseText);
            }
        });
    });

【讨论】：

【解决方案2】：

试试这个：

$(function () {
    $('#searchButton').click(function () {
        $.ajax({
            url: "@(Url.Action("GetSearch"))",
            type: "GET",
            data: { name: $("#Name").val() },
            cache: false,
            success: function (data) {
                //Fill div with results
                $("#SearchViewDiv").html(data);
            },
            error: function (xhr, status, error) {
                alert(xhr.responseText);
            }
        });
    });
});

还有这个……

[HttpGet]
public PartialViewResult GetSearch(string name)
{
    return PartialView("SearchResult", _userAccounts.Where(u => u.Name.Contains(name)));
}

控制器操作参数区分大小写很重要（字符串名称！= 字符串名称）。同样在 html 和 jquery 中：“#Name”与 id 字段中的“#name”不同。被警告...

【讨论】：

在 JS url 中获取 URL 是否正确："@(Url.Action("GetSearch"))",

【解决方案3】：

如果您的按钮是实际的“按钮”元素而不是“输入”元素，请确保将 type="button" 添加到按钮，否则默认为 type="submit"，并且表单/页面将在单击该按钮时发布。通过将类型更改为“按钮”，则在单击处理程序代码之外不会发生任何事情。

【讨论】：