javascript - Bootstrap 模态提交我的表单

Question

我正在 asp.net MVC 5 中开发一个应用程序，我的屏幕上有一个表单，其中有一些必填字段，并且在我的表单上有一个添加新按钮，这是一个简单的按钮，单击添加新按钮后，一个 Bootstrap 模式打开但是当 Bootstrap 模式打开时它会在服务器上提交我的表单，我不想在模式打开时提交表单。请指教。

@using (Ajax.BeginForm("NewUser", null, new AjaxOptions { OnSuccess = "UserRoles.onSuccess", OnFailure = "UserRoles.onFailure", HttpMethod = "POST", OnBegin = "return setValues()" }, new { @class = "" }))
{
    <button id="btnAddEditUserRoles" class="btn btnPrimaryStyle pull-left">
        @Resources.AddNew
    </button>

    <div class="row mrgnTop15">
        <div class="form-group btn-group col-sm-6 ">
            <button type="submit" class="btnPrimaryStyle btn  col-sm-3 col-xs-12 pull-left">@Resources.Save</button>
        </div>
        <div class="form-group btn-group col-sm-6">
            <button type="button" class="btn btnDefaultStyle  col-sm-3 col-xs-12">کینسل</button>
        </div>
    </div>
}

点击按钮

$btnAddEditUserRoles.on("click", function () {
     UserRoles.openAddEditModal(null);
});

var openAddEditModal = function (UserId) {
     getData();
};

function getData(){
    $.ajax({
            url: url,
            type: "GET",
            contentType: "application/json; charset=utf-8",
            cache: false,
            async: false,
            success: function (data, status) {
                if (status && data) {
                    var modalMarkup = data;
                    var modalTitle = userId && userId != null ? UserRoles.messages.Edit : UserRoles.messages.AddNew;
                    $modalAddEdit = BootstrapModal.createAndShow("modalAddEditUserRoles", modalTitle, modalMarkup);
                    //jQuery("#gridUR").jqGrid('editGridRow', "new", { height: 280, reloadAfterSubmit: false });
                }
            },
            error: function () {
                toastr.error(ServiceCenters.messages.ErrorOccurred);
            }
     });
}

Bootstrap Modal 创建和显示按钮

var createAndShow = function (modalElementId, modalTitle, modalBodyMarkup) {
        debugger;

        var modalMarkup = "";
        modalMarkup = modalMarkup + "<div id=\"%ModalId%\" class=\"modal fade\">";
        modalMarkup = modalMarkup + "<div class=\"modal-dialog\">\"";
        modalMarkup = modalMarkup + "<div class=\"modal-content\">";
        modalMarkup = modalMarkup + "<div class=\"modal-header\">";
        modalMarkup = modalMarkup + "<button type=\"button\" class=\"close pull-left\" data-dismiss=\"modal\" aria-label=\"Close\">";
        modalMarkup = modalMarkup + "<span aria-hidden=\"true\">&times;</span></button>";
        modalMarkup = modalMarkup + "<h4 class=\"modal-title pull-right\">%ModalTitle%</h4>";
        modalMarkup = modalMarkup + "</div>";
        modalMarkup = modalMarkup + "<div class=\"modal-body\">%ModalBodyMarkup%</div>";
        //modalMarkup = modalMarkup + "<div class=\"modal-footer\">";
        //modalMarkup = modalMarkup + "<button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>";
        //modalMarkup = modalMarkup + "<button type=\"button\" class=\"btn btn-primary\">Save changes</button>";
        //modalMarkup = modalMarkup + "</div>";
        modalMarkup = modalMarkup + "</div></div></div>";

        var replacements = {
            "%ModalId%": modalElementId ? modalElementId : "modal" + Common.getRandomString(5),
            "%ModalTitle%": modalTitle ? modalTitle : "",
            "%ModalBodyMarkup%": modalBodyMarkup ? modalBodyMarkup : ""
        };
        modalMarkup = modalMarkup.replace(/%\w+%/g, function (all) {
            return replacements[all];
        });

        $("body").append(modalMarkup);

        var $modal = $("#" + modalElementId);

        $modal.find(".modal-content").css({ 'top': "", 'left': "" });

        //if (modalBodyMarkup.length > 0) {
        //    $modal.find(".modal-body").html(modalBodyMarkup);
        //}

        $modal.modal({
            show: true,
            keyboard: false,
            backdrop: "static"
        });


        //To make the modal draggable in future
        //$modal.find(".modal-content").draggable({
        //    cursor: "move"
        //});

        BootstrapModal.bindModalEvents($modal);

        return $modal;
    };

Answer 1

尝试将 type 属性添加到您的按钮，否则 Web 表单默认将其视为 submit。

<button type="button" id="btnAddEditUserRoles" class="btn btnPrimaryStyle pull-left">

或者，您可以像这样在您的 javascript 中阻止 PostBack。

$btnAddEditUserRoles.on("click", function (e) {
    e.preventDefault();
    UserRoles.openAddEditModal(null);
});