簡體   English   中英

如何打開引導模式窗口彈出窗口而不是在新窗口中打開它?

[英]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>
  1. 據我所知,您將表單作為完整回發發布到控制器操作。 相反,您需要將其作為ajax帖子發送,這將為您提供處理響應的靈活性。
  2. 我建議在初始頁面加載時呈現您的模式,然后在從控制器接收結果時僅使用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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM