完整解决方案：

Question

如何在不使用@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吗？

Answer 1

您可以使用原始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。

<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项目的撰稿人。

Answer 2

当您使用@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内容）替换整个页面内容，但在大多数情况下它会没问题。

Answer 3

这将向服务器发送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>");
}

在没有@ HTML.Beginform的情况下发布表单并在asp.net MVC中使用Jquery（ajax）

3 个答案:

完整解决方案：