C# 如何在当前页面的ASP.NET MVC表单中的submit按钮上从ajax获取响应

当我点击“提交”按钮时，我想停留在页面上，打一个Ajax电话，然后显示成功警报框。但有了这段代码，它会将我重定向到

http://localhost:65464/Home/TestMethod

我的HMTL：

(...)
@using (Html.BeginForm("TestMethod", "Home", FormMethod.Post))
{
    <table cellpadding="0" cellspacing="0">
        <tr>
            <th colspan="2" align="center">Person Details</th>
        </tr>
        <tr>
            <td>PersonId: </td>
            <td>
                @Html.TextBoxFor(m => m.Name)
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Submit" id="submitBtn" /></td>
        </tr>
    </table>
}

我希望保留这种“剃刀”语法，因为我的模型中有注释（验证）

我可以将.js文件放入ajax并调用此方法，但无法直接从表单中的模型注释进行验证。如何在不重定向的情况下保持在页面上

更新的js文件：

 $('#submitBtn').click(function () {
    //var form = $('#emailForm');
    //form.validate();
    var obj = new Object();
    obj.Name = $('#Name').val();
    obj.CheckInCheckOutDate = $('#CheckInCheckOutDate').val();
    obj.MobilePhone = $('#MobilePhone').val();
    obj.EMail = $('#EMail').val();
    obj.AdultsNumber = $('#AdultsNumber').val();
    obj.ChildrenNumber = $('#ChildrenNumber').val();
    obj.MessageBody = $('#MessageBody').val();
    obj.MobilePrefixCountry = $('#MobilePrefixCountry').val();
    obj.ApartmentName = $('#ApartmentName').val();
    obj.NumberOfNights = $('#NumberOfNights').val();

    $.ajax({
        url: "/Home/SendEmail",
        type: "POST",
        data: JSON.stringify(obj),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            console.log(data)
            $('#successAlert').show('fade')
                .delay(3000)
                .fadeOut(function () {
                    $(this).remove();
                });
        },
        error: function () {
            $('#errorAlert').show('fade')
                .delay(3000)
                .fadeOut(function () {
                    $(this).remove();
                });
        },
    });
});

我叫不同的方法，但原理实际上是一样的

基于@D-Shiha解决方案，我尝试了： js:

我的新html：

@using (Html.BeginForm("TestMethod", "Home", FormMethod.Post))
{

    <table cellpadding="0" cellspacing="0">
        <tr>
            <th colspan="2" align="center">Person Details</th>
        </tr>
        <tr>
            <td>PersonId: </td>
            <td>
                @Html.TextBoxFor(m => m.Name)
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" value="Submit" id="submitBtn" /></td>
        </tr>
    </table>
}

@使用（Html.BeginForm（“TestMethod”、“Home”、FormMethod.Post））
{
人员详细信息
人物：
@Html.TextBoxFor（m=>m.Name）
}

首先像这样分配表单id

@using (Html.BeginForm("TestMethod", "Home", FormMethod.Post,new {id="idForm"}))
{...

像这样通过ajax操作处理表单提交和序列化表单并发送

$("#idForm").submit(function(e) {
    var form = $(this);        
    $.ajax({
           type: "POST",
           url: "/Home/SendEmail",
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {

           }
         });

    e.preventDefault(); 
});

不需要所有这些

obj.Name=$（'#Name'）.val（）

obj.CheckInCheckOutDate=$（“#CheckInCheckOutDate”）.val（）

obj.MobilePhone=$（'#MobilePhone'）.val（）

obj.EMail=$（'#EMail'）.val（）

obj.AdultsNumber=$（'#AdultsNumber'）.val（）

---

…

您可以使用AjaxHelper而不是HTMLHelper来构造表单以提交页面，而无需向服务器返回完整的帖子。这将帮助您使用注释验证表单，并控制成功和失败回调

Ajax.BeginForm采用以下参数

• actionName
• 控制器名称
• 路线价值
• ajaxOptions
• HTMLAT贡品

首先从NuGet软件包中添加jquery.unobtrusive-ajax库的引用

替换此项：

@using (Html.BeginForm("TestMethod", "Home", FormMethod.Post))

用这个

@using (Ajax.BeginForm("TestMethod", "Home", new AjaxOptions { HttpMethod = "POST"}))

您可以使用JS回调函数将OnSuccess事件添加到AjaxOptions

希望这有帮助

有关更多详细信息，请参阅此链接：

---

AjaxHelper类：

您能给我们展示一下您的js ajax代码吗？

@using (Html.BeginForm("TestMethod", "Home", FormMethod.Post))

@using (Ajax.BeginForm("TestMethod", "Home", new AjaxOptions { HttpMethod = "POST"}))