javascript - Asp.net MVC ajax 在模态中提交表单

Question

我正在尝试在模式中使用 ajax 提交表单。到目前为止，我最接近完成这项工作的是：

@model AppStudio.Data.ViewModels.RolesDetailsViewModel
@section scripts{
    @Scripts.Render("~/bundles/jquery.unobtrusive-ajax")
}
<div id="roleDetails" class="modal">
    <div class="col-sm-12">
        @if (Model.Id == null)
        {
            <h2>Add Role</h2>
        }
        else
        {
            <h2>Edit Role</h2>
        }
        <hr />
    </div>
    @using (Ajax.BeginForm("SaveRole", new AjaxOptions() {
            InsertionMode = InsertionMode.Replace
    }))
    {
        @Html.AntiForgeryToken()
        <div class="col-sm-12">
            <div class="form-group">
                @Html.HiddenFor(m => m.Id)
                @Html.HiddenFor(m => m.ApplicationId)
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.RoleName)
                @Html.TextBoxFor(m => m.RoleName, new { @class = "form-control col-sm-12" })
                @Html.ValidationMessageFor(m => m.RoleName)
            </div>
            <div class="form-group">
                <div class="clearfix">
                    <button type="submit" class="btn btn-primary pull-right">Save</button>
                    <a href="#" class="btn btn-default pull-right" rel="modal:close">Cancel</a>
                </div>
            </div>
        </div>
    }
</div>

但是，当我提交此内容时，它会将我重定向到包含我输入的新页面

然后我尝试删除 ajax.beginform 并将其替换为 beginform 并将我的提交按钮更改为这样的 href 链接：

<a href="#" id="save" class="btn btn-primary pull-right">Save</a>

我还在上面添加了这个脚本：

   <script>
        $(document).ready(function (e) {
            $("#save").click(function () {
                alert("test");
            });
        });
    </script>

但是，这会导致 url 仅添加了一个 # 。有没有办法在模式中做 ajax 提交？我试着四处寻找，但到目前为止还没有找到太多。

标签： javascriptjqueryasp.netajaxasp.net-mvc