What's the best way to display a bootstrap modal window popup without redirecting to a new page?

Question

What's the best way to display a bootstrap modal window popup without redirecting to a new page?

I am having trouble implementing a modal window that will display validation errors to the user when they submit a form. Currently, the window is opening as a new view instead of overlapping the existing form's view. How can I adjust my code so that the modal window pops up over the form?

Controller

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

Partial View

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

javascript c#ajax asp.net-mvc asp.net-core

Answer 1

Answer №1

It seems like you are currently submitting your form to a controller action using a full post back method. Instead, consider sending it as an ajax post, which will provide you with more flexibility when handling the response.
I suggest rendering your modal on the initial page load and then exclusively working with JSON upon receiving results from the controller. This approach will simplify the parsing process of the response, removing any complexities involved in determining whether it is a partial view or something else that requires specific actions.

To integrate your partial view into the main view (remove Errors: @Model.ErrorList from the partial view and keep the label empty as it is no longer needed):

@Html.Partial("_ErrorsModal")

Your controller action returning 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 });
    }

Update your ajax call for when you submit the form:

    $.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){
                //actions to take when validation is successful...
            } else {
                $('#errorsModal .modal-body label').html(data.message);
                $('#errorsModal').modal('toggle');
            }
        }
    });

Answer 2

It seems like you are currently submitting your form to a controller action using a full post back method. Instead, consider sending it as an ajax post, which will provide you with more flexibility when handling the response.
I suggest rendering your modal on the initial page load and then exclusively working with JSON upon receiving results from the controller. This approach will simplify the parsing process of the response, removing any complexities involved in determining whether it is a partial view or something else that requires specific actions.

To integrate your partial view into the main view (remove Errors: @Model.ErrorList from the partial view and keep the label empty as it is no longer needed):

@Html.Partial("_ErrorsModal")

Your controller action returning 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 });
    }

Update your ajax call for when you submit the form:

    $.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){
                //actions to take when validation is successful...
            } else {
                $('#errorsModal .modal-body label').html(data.message);
                $('#errorsModal').modal('toggle');
            }
        }
    });

What's the best way to display a bootstrap modal window popup without redirecting to a new page?

Answer №1

Similar questions

How come my JavaScript regular expression doesn't function properly when applied to elements in an array?

Displaying a Laravel variable in an Ajax callback to trigger a separate Ajax function

What could be the reason for the full name not being updated in the model when the last name is changed

Populate dropdown list dynamically in Codeigniter using AJAX and jQuery

Create a small circle in the bottom left corner with a constrained size

Execute and generate a continuous loop in JavaScript

Require Google Chrome to show a blank page upon refresh

Hiding elements in FireBase and Angular based on user identification

Is it possible to forecast an on click event using jQuery?

"Uh-oh, looks like there's an

Including extra js files disrupts the jQuery IntelliSense functionality

Unpacking Reddit's JSON data in a Node environment proves challenging as the Javascript parser seems to have a distaste for

JavaScript code for validating two passwords is malfunctioning

Peer-to-peer Ajax image sharing

retrieve the month and year data from the input date

Display a text box upon clicking an item

Weapons of Mass Destruction - receive markdown content

Techniques for determining if a file is empty using jQuery

Error message "Undefined is not a function" occurred while using jQuery's .replace and scrollTop functions

Before the file upload process is finished, the progress of tracking Angular files reaches 100%