![](/img/trans.png)
[英]Asp.Net MVC and Partial Views and Mixing Ajax.BeginForm and Html.BeginForm
[英]Posting form without @HTML.Beginform and using Jquery(ajax) in asp.net MVC
如何在不使用@HTML.Beginform和使用JQuery Ajax的情况下填写表单? 现在我试过了:
var postData = { form1: username, form2: password };
$.ajax({
type: "POST",
url: '/Controller/Method',
data: postData,
dataType: "json",
traditional: true
});
但发布后,浏览器无法导航到正确的视图。 我当然在控制器中正确返回View()。 使用Fiddler我看到它被正确发布并且响应也是正确的...
我是否必须使用@ HTML.Beginform或者我可以使用Ajax吗?
您可以使用原始HTML <form>
标记或@HTML.BeginForm
帮助程序。 这是一个仅使用HTML
的示例
<form action"/Controller/Method" method="POST" id="signInForm">
<input type="text" name="form1" />
<input type="text" name="form2" />
<input type="submit" value="Sign in" />
</form>
$( function() {
$( 'signInForm' ).submit( function( evt ) {
//prevent the browsers default function
evt.preventDefault();
//grab the form and wrap it with jQuery
var $form = $( this );
//if client side validation fails, don't do anything
if( !$form.valid() ) return;
//send your ajax request
$.ajax( {
type: $form.prop( 'method' ),
url: $form.prop( 'action' ),
data: $form.serialize(),
dataType: "json",
traditional: true,
success: function( response ) {
document.body.innerHTML = response;
}
});
});
});
我建议使用@Url.Action
设置表单操作的URL。 这种方式路由可以生成您的URL。
<form action"@Url.Action("Method", "Controller")" method="POST" id="signInForm">
<input type="text" name="form1" />
<input type="text" name="form2" />
<input type="submit" value="Sign in" />
</form>
它略高一些,但我会尝试使用Take Command之类的东西来管理你的jQuery Ajax调用。
免责声明,我是TakeCommand项目的贡献者。
当您使用@Html.BeginForm
,HTML输出是:
<form method="POST" action="/Controller/Method">
当您提交该表单时,浏览器会像其他页面导航一样处理它(仅使用POST
方法),因此响应将加载到父框架中。
但是,当您启动Ajax
请求时,由您来处理来自服务器的响应(通常使用回调函数)。
如果您想模拟常规表单提交行为,它将类似于:
$.ajax({
type: "POST",
url: '/Controller/Method',
data: postData,
dataType: "json",
traditional: true,
success: function(response)
{
document.body.innerHTML = response;
}
});
这不会用响应(只有BODY
内容)替换整个页面内容,但在大多数情况下它会没问题。
这将向服务器发送xhr帖子并将视图作为数据返回(响应)它将无法导航,如果它返回html,则需要在请求中设置正确的数据类型,以告知您希望从服务器返回html:
如果您的操作返回html,您可以将返回的html放在页面中的成功函数中。
postData = "{'ID':'test'}";
$.ajax({
type: "POST",
url: '/Home/Test',
data: postData,
dataType: 'html',
contentType: 'application/json',
traditional: true,
success: function (data) {
$("#yourdomelement").html(data);
}
});
在你的行动;
public ActionResult Test([FromBody]PostData id)
{
return Content("<p>hello</p>");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.