MVC3：jquery ajax 从控制器返回带有 HTML 数据类型的部分视图但出现错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23711280/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MVC3: jquery ajax to return partial view with HTML dataType from controller but getting error
提问by Bit_Pulse
I need some help. I am returning partial view as HTML dataType from controller action when calling it from jQuery ajax on button click event.
我需要帮助。当在按钮单击事件上从 jQuery ajax 调用它时，我将部分视图作为 HTML 数据类型从控制器操作返回。
This is my Javascript tag from my main view:
这是我的主视图中的 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);
}
});
});
});
Controller code:
控制器代码：
[HttpGet]
public ActionResult GetSearch(string name)
{
var accounts = _userAccounts.FindAll(x => x.Name.Contains(name));
return PartialView("SearchResult", accounts);
}
I am able to debug this controller when jQuery ajax is making call to this action but when it is returning I am getting into error function of jQuery Ajax. So guessing target URL is correct. But not able to figure out where I am going wrong. Please let me know if more info is required.
当 jQuery ajax 调用此操作时，我能够调试此控制器，但是当它返回时，我进入了 jQuery Ajax 的错误功能。所以猜测目标网址是正确的。但无法弄清楚我哪里出错了。如果需要更多信息，请告诉我。
回答by Bit_Pulse
Thanks Dzmitry for your inputs. But I figured out the solution.
感谢 Dzmitry 的投入。但我想出了解决办法。
Issue: Problem was page was reloading after button click that was causing Ajax call to be getting cancelled while returning this partial view response.
问题：问题是在单击按钮后重新加载页面，导致 Ajax 调用在返回此部分视图响应时被取消。
Solution: Just adding event.preventDefault() solved this problem. So Javascript snippet will look like this,
解决方案：只需添加 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);
}
});
});
回答by Bit_Pulse
Try this:
尝试这个：
$(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);
}
});
});
});
and this...
和这个...
[HttpGet]
public PartialViewResult GetSearch(string name)
{
return PartialView("SearchResult", _userAccounts.Where(u => u.Name.Contains(name)));
}
Controller action parameters case sensivity are important (string name != string Name). Also in html and jquery: "#Name" not the same as "#name" in id field. Be warned...
控制器动作参数区分大小写很重要（字符串名称！= 字符串名称）。同样在 html 和 jquery 中：“#Name”与 id 字段中的“#name”不同。被警告...
回答by Gen1-1
If your button is an actual "button" element instead of an "input" element, then make sure you add type="button" to the button, otherwise it defaults to type="submit", and the form/page will get posted on click of that button. By changing the type to "button", then nothing happens on click other that your handler code.
如果您的按钮是实际的“按钮”元素而不是“输入”元素，那么请确保将 type="button" 添加到按钮，否则默认为 type="submit"，并且表单/页面将被发布单击该按钮。通过将类型更改为“按钮”，单击其他处理程序代码时不会发生任何事情。
