使用 JQuery Ajax Post 调用渲染一个简单的 ASP.NET MVC PartialView
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15466597/
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
Rendering a simple ASP.NET MVC PartialView using JQuery Ajax Post call
提问by User101
I have the following code in my MVC controller:
我的 MVC 控制器中有以下代码：
[HttpPost]
public PartialViewResult GetPartialDiv(int id /* drop down value */)
{
PartyInvites.Models.GuestResponse guestResponse = new PartyInvites.Models.GuestResponse();
guestResponse.Name = "this was generated from this ddl id:";
return PartialView("MyPartialView", guestResponse);
}
Then this in my javascript at the top of my view:
然后在我视图顶部的 javascript 中：
$(document).ready(function () {
$(".SelectedCustomer").change( function (event) {
$.ajax({
url: "@Url.Action("GetPartialDiv/")" + $(this).val(),
data: { id : $(this).val() /* add other additional parameters */ },
cache: false,
type: "POST",
dataType: "html",
success: function (data, textStatus, XMLHttpRequest) {
SetData(data);
}
});
});
function SetData(data)
{
$("#divPartialView").html( data ); // HTML DOM replace
}
});
Then finally my html:
最后是我的 html：
<div id="divPartialView">
@Html.Partial("~/Views/MyPartialView.cshtml", Model)
</div>
Essentially when a my dropdown tag (which has a class called SelectedCustomer) has an onchange fired it should fire the post call. Which it does and I can debug into my controller and it even goes back successfully passes back the PartialViewResult but then the success SetData() function doesnt get called and instead I get a 500 internal server error as below on Google CHromes console:
本质上，当我的下拉标签（它有一个名为 SelectedCustomer 的类）触发了 onchange 时，它应该触发 post 调用。它确实做到了，我可以调试到我的控制器中，它甚至成功返回，将 PartialViewResult 传回，但随后没有调用成功的 SetData() 函数，而是在 Google CHromes 控制台上收到如下 500 内部服务器错误：
POST http:// localhost:45108/Home/GetPartialDiv/1 500 (Internal Server Error) jquery-1.9.1.min.js:5 b.ajaxTransport.send jquery-1.9.1.min.js:5 b.extend.ajax jquery-1.9.1.min.js:5 (anonymous function) 5:25 b.event.dispatch jquery-1.9.1.min.js:3 b.event.add.v.handle jquery-1.9.1.min.js:3
POST http://localhost:45108/Home/GetPartialDiv/1 500（内部服务器错误） jquery-1.9.1.min.js:5 b.ajaxTransport.send jquery-1.9.1.min.js:5 b.extend .ajax jquery-1.9.1.min.js:5（匿名函数）5:25 b.event.dispatch jquery-1.9.1.min.js:3 b.event.add.v.handle jquery-1.9.1 .min.js:3
Any ideas what I'm doing wrong? I've googled this one to death!
任何想法我做错了什么？我已经在谷歌上搜索了这个！
回答by AliR?za Ad?yah?i
this line is not true: url: "@Url.Action("GetPartialDiv/")" + $(this).val(),
这行不是真的： url: "@Url.Action("GetPartialDiv/")" + $(this).val(),
$.ajaxdataattribute is already included route value. So just define url in urlattribute. write route value in dataattribute.
$.ajaxdata属性已包含路由值。所以只需在url属性中定义 url 。在data属性中写入路由值。
$(".SelectedCustomer").change( function (event) {
$.ajax({
url: '@Url.Action("GetPartialDiv", "Home")',
data: { id : $(this).val() /* add other additional parameters */ },
cache: false,
type: "POST",
dataType: "html",
success: function (data, textStatus, XMLHttpRequest) {
SetData(data);
}
});
});
