MVC3:jquery ajax从控制器返回带有HTML dataType的部分视图但是收到错误

Question

我需要一些帮助.我在按钮点击事件中从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的错误函数.所以猜测目标网址是正确的.但无法弄清楚我哪里出错了.如果需要更多信息,请告诉我.

Answer 1

试试这个:

$(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"不同.被警告...

Answer 2

感谢Dzmitry的投入。但是我想出了解决方案。

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

解决方案：只需添加event.preventDefault（）即可解决此问题。所以Javascript片段看起来像这样，

$('#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);
            }
        });
    });