c# - 在没有 @HTML.Beginform 的情况下发布表单并在 asp.net MVC 中使用 Jquery(ajax)

Question

如何在不使用 @HTML.Beginform 而改用 JQuery Ajax 的情况下填写表单？现在我尝试了:

    var postData = { form1: username, form2: password };

    $.ajax({
        type: "POST",
        url: '/Controller/Method',
        data: postData,
        dataType: "json",
        traditional: true
    });

但是在发布之后，浏览器没有导航到正确的 View 。当然，我在 Controller 中正确地返回了 View() 。使用 Fiddler 我看到它已正确发布并且响应也正确......

我必须使用@HTML.Beginform 还是可以使用 Ajax 来实现？

Answer 1

您可以使用原始 HTML <form>标签或 @HTML.BeginForm helper 。这是一个仅使用 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 项目的贡献者。