Pop-up modale visualizzato in modo errato quando ModelState.IsValid = false Redirect

Oct 15 2020

Sto riscontrando un problema con la visualizzazione errata del pop-up modale quando fallisce la convalida del modello su HttpPost. Quando il Modal restituisce i dati e la convalida non riesce, desidero che lo schermo torni ad avere la visualizzazione popup modale come un popup sullo schermo che ha generato inizialmente il popup. Quello che sta succedendo è che il pop-up riempie l'intero schermo, senza NESSUNA formattazione (cioè non è un popup modale a questo punto). Tuttavia, mostra i messaggi di convalida, proprio come il testo non formattato. Ecco tutti i pezzi di codice che utilizzo:

Questo è nel mio site.js

(function () {
// Initialize numeric spinner input boxes
//$(".numeric-spinner").spinedit(); // Initialize modal dialog // attach modal-container bootstrap attributes to links with .modal-link class. // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog. $('body').on('click', '.modal-link', function (e) {
        e.preventDefault();
        $(this).attr('data-target', '#modal-container'); $(this).attr('data-toggle', 'modal');
    });
    // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
    $('body').on('click', '.modal-close-btn', function () { $('#modal-container').modal('hide');
    });
    //clear modal cache, so that new content can be loaded
    $('#modal-container').on('hidden.bs.modal', function () { $(this).removeData('bs.modal');
    });
    $('#CancelModal').on('click', function () {
        return false;
    });  
});

Ecco come chiamo il pop-up:

<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
     <div class="modal-content"></div>
</div>

<a href="@Url.Action("CreateEdit", new { controller = "Issue", issueid = Model.IssueData.issueId, addedit = "add" })" class="modal-link btn btn-success">Add New Status</a>

Questo è il controller che gestisce l'HttpPost dal Modal PopUp

[ValidateAntiForgeryToken]
[HttpPost]
public ActionResult CreateEdit(StatusViewModel model)
{
    if (ModelState.IsValid)
    {
        //Do Stuff
        return RedirectToAction("edit");

    } else
    {
        return PartialView("_CreateEdit", model);
    }           
}

Ed ecco il Modal-PopUp:

@model MYAPP.ViewModels.StatusViewModel
<!--Modal Body Start-->

<div class="modal-content">
    <!--Modal Header Start-->
    <div class="modal-header">
        <h4 class="modal-title">@ViewBag.Title</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <!--Modal Header End-->
    <form asp-action="CreateEdit" asp-controller="Issue" method="post" enctype="multipart/form-data">
        @Html.AntiForgeryToken()

        <div class="modal-body form-horizontal">
            <div class="form-group row">
                @Html.HiddenFor(model => model.addedit)
                @Html.HiddenFor(model => model.IssueID)
                @Html.HiddenFor(model => model.StatusDate)
                @Html.LabelFor(model => model.Status, new { @class = "col-sm-2 col-form-label" })
                <div class="col-sm-10">
                    <textarea asp-for="@Model.Status" class="form-control" rows="10" placeholder="Enter/Update Status">@Model.Status</textarea>

                </div>
            </div>
            <div class="form-group row">
                @Html.LabelFor(model => model.NextStep, new { @class = "col-sm-2 col-form-label" })
                <div class="col-sm-10">
                    <textarea asp-for="@Model.NextStep" class="form-control" rows="10" placeholder="Please enter the next steps here">@Model.NextStep</textarea>
                </div>
            </div>
            <div class="form-group">
                <label asp-for="@Model.ColorCode" class="control-label"></label>
                @Html.DropDownListFor(modelItem => modelItem.ColorCode, new[] {
               new SelectListItem { Text = " ", Value = "" },
               new SelectListItem { Text = "Red", Value = "R" },
               new SelectListItem { Text = "Yellow", Value = "Y" },
               new SelectListItem { Text = "Green", Value = "G" } })

                <span asp-validation-for="@Model.ColorCode" class="text-danger"></span>
            </div>
            <div>
                <table class="statustable">
                    <tr class="statustablerow">
                        <th></th>
                        <th>Previous Status</th>
                        <th>Previous Next Steps</th>
                    </tr>
                    <tr class="statustabledata">
                        @if (@ViewBag.LastColorCode == "R")
                        {
                            <td rowspan="2" width="2%" style=" background-color:red"></td>
                        }
                        else if (@ViewBag.LastColorCode == "Y")
                        {
                            <td rowspan="2" width="2%" style="background-color: yellow"></td>
                        }
                        else if (@ViewBag.LastColorCode == "G")
                        {
                            <td rowspan="2" width="2%" style="background-color: green"></td>
                        }
                        else
                        {
                            <td rowspan="2" width="2%" style="background-color: gray"></td>
                        }
                        <td width="20%">Previous Status:</td>
                        <td width="78%">@ViewBag.LastStatus</td>
                    </tr>
                    <tr class="statustabledata">
                         <td>Previous Next Steps:</td>
                        <td>@ViewBag.LastNextSteps</td>
                    </tr>

                </table>
            </div>
        <!--Modal Footer Start-->
        <div class="modal-footer">
            <button data-dismiss="modal" id="cancel" class="btn btn-default" type="button">Cancel</button>
            <button class="btn btn-success relative" id="btnSubmit" data-save="modal">
                <i class="loader"></i>
                Submit
            </button>
        </div>
        <div class="row">
            &nbsp;
        </div>
 
        <!--Modal Footer End-->
    </form>

</div>
<script type="text/javascript">
    $(function () {
    });
</script>

<!--Modal Body End-->

Come posso fare in modo che lo schermo torni a mostrare la pagina con il popup quando la convalida non riesce?

Risposte

1 mj1313 Oct 16 2020 at 06:16

Dovresti inviare il modulo tramite ajax e sostituire il modal con i dati restituiti (html della vista parziale), altrimenti restituirà direttamente la vista parziale come nuova vista.