[英]How can I open a bootstrap modal window popup instead of opening it in a new window?
當用戶提交表單時,我試圖讓一個模態窗口彈出窗口向用戶列出所有驗證錯誤。 使用我當前的代碼,窗口是作為一個全新的視圖而不是模態窗口打開的。 我怎樣才能讓這個窗口與表單的視圖重疊而不是打開一個全新的視圖?
控制器
[HttpPost]
public IActionResult Daily(Daily dailyReport)
{
var dr = new ReportDaily();
var rc = new ReportDailyCriteria();
dr.Preview(rc, IntPtr.Zero, out Notification notification);
if (notification.HasErrors) {
var error = new Errors();
string errorString = notification.GetConcatenatedErrorMessage(Environment.NewLine + Environment.NewLine);
error.ErrorList = errorString;
return PartialView("_ErrorsModal", error);
}
return View(dailyReport);
}
局部視圖
@model Test.Areas.Reports.Models.Errors
<!-- Modal -->
<div id="errorsModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title float-left">Error List</h4>
<button type="button" class="close" data-dismiss="modal"></button>
</div>
<div class="modal-body">
<label>Errors: @Model.ErrorList</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
ajax
帖子發送,這將為您提供處理響應的靈活性。JSON
。 它將消除響應的復雜解析邏輯(確定它是局部視圖還是其他適當的進一步操作)。 因此,在主視圖上呈現您的部分視圖(從部分視圖中刪除Errors: @Model.ErrorList
並將標簽留空,因為您不再需要它):
@Html.Partial("_ErrorsModal")
您將返回Json
控制器操作:
[HttpPost]
public IActionResult Daily(Daily dailyReport)
{
var dr = new ReportDaily();
var rc = new ReportDailyCriteria();
dr.Preview(rc, IntPtr.Zero, out Notification notification);
if (notification.HasErrors)
{
return Json(new
{
success = false,
message = notification.GetConcatenatedErrorMessage(Environment.NewLine + Environment.NewLine)
});
}
return Json(new { success = true });
}
當您發布表單時,您的ajax
調用:
$.ajax({
type: 'POST',
data: JSON.stringify($('#your_form_id').serializeArray().reduce(function(m,o){ m[o.name] = o.value; return m;}, {})),
url: 'http://your_website/your_controller/Daily',
contentType: 'application/json; charset=utf-8',
success: function (data) {
if(data.success){
//your actions when validation successful...
} else {
$('#errorsModal .modal-body label').html(data.message);
$('#errorsModal').modal('toggle');
}
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.