Bootstrap模式提交我的表格

Question

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

@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); 
      } 
    }); 
} 

引导模态创建和显示按钮

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); 
});