【问题标题】：Posting form without @HTML.Beginform and using Jquery(ajax) in asp.net MVC在 asp.net MVC 中发布不带 @HTML.Beginform 并使用 Jquery(ajax) 的表单
【发布时间】：2013-08-17 21:34:59
【问题描述】：

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

【问题讨论】：

你在哪里处理响应？

标签： c# asp.net-mvc jquery

【解决方案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。这样路由可以生成你的 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 项目的贡献者。

【讨论】：

谢谢，但这不是完整的解决方案。服务器端方法是什么样的？我运行它，但我继续在服务器端接收空数据。 ://
@Dermot 在这种情况下，服务器操作看起来像这样：public ActionResult Method(string form1, string form2)
嗯，这就是我所拥有的，但它仍然无法正常工作。明天我会用一个新的头脑尝试一下，如果我不能让它工作，我会发布一个新问题。感谢您的回复。
正确的动作代码：action="@Url.Action("Method", "Controller")"

【解决方案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 内容），但在大多数情况下会很好。

【讨论】：

【解决方案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>");
}

【讨论】：