jquery - @html.BeginForm 使用 jquery Ajax 不能完全工作

Question

我必须在公式上使用 Ajax 和 asp.net mvc。我的经理不希望我使用@Ajax.BeginForm，所以我必须将ajax 与Jquery 方法结合使用。我的问题是，即使我的代码似乎可以工作，当它进入 Controller 时， Controller 返回一个新页面(就像使用简单的 POST 提交表单一样)，所以我没有 ajax 优势。我真的不知道自己到底哪里做错了，也不知道自己到底有没有做错。这是我的代码:

HTML:

@using (Html.BeginForm("AddCtrl", null, FormMethod.Post,new { id = "addGroupForm" }) )
{
    @Html.AntiForgeryToken()
    <div class="row">
        <div class="row">
            <div class="input-field col s6">
                <i class="material-icons prefix">perm_identitye</i>
                @Html.LabelFor(model => Model.group.Name, htmlAttributes: new { id = "Description" })
                @Html.EditorFor(model => model.group.Name, new { htmlAttributes = new { @class = "validate" } })
                @Html.ValidationMessageFor(model => model.group.Name, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>
    <div class="input-field col s12">
    </div>

    @Html.ListBoxFor(model => model.idList, new MultiSelectList(Model.permissionList, "Id" , "Name"), null)


    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn btn-primary" />
        </div>
    </div>

}

JS:

$(function () {
        $('#addGroupForm').submit(function () {
            alert(this.methode);
            if ($(this).valid()) {
                //the action is send with this ajax request and the send works
                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {
                        alert("yo");
                    }
                });
            }
            return false;
        });
    });

Controller :

[HttpPost]
        public ActionResult AddCtrl(GroupViewModels grp)
        {
            System.Diagnostics.Debug.WriteLine("YOOOOOOOOOOOOOOOOOOOOO");
            System.Diagnostics.Debug.WriteLine(grp.group.Name);
            return Json("{yo:toto}");
        }

Answer 1

在表单提交时使用ajax时，您需要使用e.preventDefault()而不是return false

试试这个:

$(function () {
    $('#addGroupForm').submit(function (e) {
        if ($(this).valid()) {
            //the action is send with this ajax request and the send works
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    alert("yo");
                }
            });
        }
        e.preventDefault();
    });
});