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中：＆＃34;＃Name＆＃34;和＃34;＃name＆＃34;不一样在id字段中。警告......

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);
            }
        });
    });

Answer 3

如果您的按钮是实际的＆＃34;按钮＆＃34;元素而不是＆＃34;输入＆＃34;元素，然后确保添加type =＆＃34; button＆＃34;到按钮，否则默认为键入=＆＃34;提交＆＃34;，表单/页面将在点击该按钮时发布。通过将类型更改为＆＃34;按钮＆＃34;，然后点击其他处理程序代码时没有任何反应。

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

3 个答案: