Как открыть всплывающее окно модального окна bootstrap вместо его открытия в новом окне? - PullRequest
Новая
       3

Как открыть всплывающее окно модального окна bootstrap вместо его открытия в новом окне?

0 голосов
/ 21 февраля 2020

Я пытаюсь получить модальное всплывающее окно со списком любых ошибок валидации для пользователя при отправке формы. С моим текущим кодом окно открывается как совершенно новый вид вместо модального окна. Как я могу заставить это окно перекрывать вид формы вместо открытия совершенно нового вида?

Контроллер 

[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 Ответ

0 голосов
/ 22 февраля 2020
  1. Насколько я понимаю, вы отправляете свою форму в действие контроллера как полный пост обратно. Вместо этого вам нужно отправить его как ajax сообщение, это даст вам гибкость при работе с ответом.
  2. Я бы порекомендовал визуализировать ваш модал при начальной загрузке страницы, а затем работать только с JSON, когда получение результата от контроллера. Это исключит сложный логический анализ c ответа (выяснение, является ли это частичным представлением или чем-то еще для правильных дальнейших действий).

Так визуализируйте ваш частичный вид на главном виде (уберите 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');
            }
        }
    });
...