在asp.net MVC中使用Jquery(ajax)发布没有@HTML.Beginform的表单
本文关键字:布没 @HTML 表单 Beginform ajax MVC net asp Jquery | 更新日期: 2023-09-27 18:28:14
如何在不使用@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之类的东西来管理jQueryAjax调用。
免责声明,我是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>");
}