Come posso aprire un popup modale bootstrap invece di aprirlo in una nuova finestra?

2020-02-22 javascript c# ajax asp.net-mvc asp.net-core

Sto provando ad avere un popup modale che elenca tutti gli errori di convalida per l'utente quando inviano il modulo. Con il mio codice attuale, la finestra si apre come una vista completamente nuova anziché come una finestra modale. Come posso ottenere questa finestra per sovrapporre la vista del modulo invece di aprire una vista completamente nuova?

controllore

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

Vista parziale

@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>

Answers

  1. Per quanto ho capito, stai inviando il tuo modulo all'azione del controller come post completo. Invece, devi inviarlo come post ajax , questo ti darà flessibilità lavorando con la risposta.
  2. Vorrei raccomandare di rendere il tuo modale al caricamento della pagina iniziale e quindi lavorare solo con JSON quando si ricevono risultati dal controller. Eliminerà la complessa logica di analisi della risposta (capire se si tratta di una visione parziale o qualcos'altro per un'ulteriore azione adeguata).

Quindi rendi la tua vista parziale sulla vista principale (rimuovi Errors: @Model.ErrorList dalla vista parziale e lascia l'etichetta vuota perché non ti serve più):

@Html.Partial("_ErrorsModal")

L'azione del controller che restituirà 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 });
    }

E la tua chiamata ajax quando pubblichi il modulo:

    $.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');
            }
        }
    });

Related