2
我正在開發一個應用程序在asp.net MVC 5中,我有一個窗體在我的屏幕上有一些必填字段,在我的窗體上有一個添加新按鈕,這是一個簡單的按鈕,點擊添加一個引導模式打開的新按鈕,但是當引導模式打開時,它會在服務器上提交我的表單,我不想在模態打開時提交表單。請指教。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);
}
});
}
引導模態創建和顯示按鈕
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\">×</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;
};
代碼提交,按鈕是簡單的按鈕 – Billz
爲什麼這個'ajax'在這裏?你在哪裏打電話? –
我打電話給我通過ajax的局部視圖,並追加我的部分觀點HTML在模式 – Billz