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

Revise a catalog when an object initiates its own removal

Each time a page loads, the react useContext feature is causing the web socket connection to reset

How can Javascript split main.js into two separate files using import or require?

What is the best way to insert a Button within a Tab while ensuring that the indicator remains in the appropriate tab?

Steps to Extract the key value from the parseJson() function

`I'm experiencing difficulty sending JSON data to Typeahead using PHP`

What is the purpose of using double % in Java or JSP?

Dynamic Magento Profile Editing with AJAX

React components need to refresh after fetching data from an API

Angular select tag failing to display input data accurately

Trouble altering an attribute using jquery

Focus Google Map on Selected Option using AngularJS

The Rails application utilizes a background process application callback to initiate a specific event

What precautions can I take to safely and securely extend event handling?

What crucial element is absent from my array.map function?

Received an unforeseen outcome when processing POST data with Ajax

Indeed, conditional validation is essential

Optimal method for linking jQuery ajax requests to transfer data

Having trouble with flash messages in Node.js?

Ruby on Rails: Making an Easy AJAX Call