Reposting to an existing ASP.net MVC Bootstrap modal window dynamic form fails

By : devc2
Source: Stackoverflow.com
Question!

I call a javascript function myModal to open a bootstrap modal window which gets dynamically inserted into the html using ASP.NET MVC partial page.

my html on the main page is simplified as

<html>
//header stuff
<body>
<span class="btn btn-default btn-sm btn-color-primary" onclick="myModal('mycontroller/edit?id=1')"></span>
<br>
<span class="btn btn-default btn-sm btn-color-primary" onclick="myModal('mycontroller/edit?id=2')"></span>
<br>
<span class="btn btn-default btn-sm btn-color-primary" onclick="myModal('mycontroller/edit?id=3')"></span>
<br>
<div id="modalPlaceHolder"></div>
//script libraries.
</body>
</html>

I pass it the url of where to fetch the modal window contents e.g. /myconroller/myaction/?id=1

function myModal(data) {
        $.ajax({
            url: data,  //e.g./myconroller/myaction/?id=1`
            success: function (response) {
                debugger;
                $('#modalPlaceHolder').html(response);//empty div on the main page
                $('#resultModal').modal('show');
            }
        })
    }

My Controller method get:

    [HttpGet]
    public async Task<IActionResult> Edit(int id)
    {

        //fetch viewmodel from db

        return PartialView("~/_PartialPage.cshtml", myViewModel);
    }

The ASP.NET MVC controller method returns a partial page which looks like this:

_PartialPage.cshmtl

<div class="modal fade" tabindex="-1" role="dialog" id="resultModal">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Detail</h4>
        </div>
        <div class="modal-body">
            <form action="@(Url.Action("Edit", "MyController"))" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#modalPlaceHolder" id="formDetail" method="post">
             //rest of the form
             <button class="btn btn-sm btn-primary" id="btnSave">Save</button>
             </form>

The above code works.

However when the form is submitted to save, it successfully goes to the save method of the controller. However if ModelState is not valid I want to return to the save modal form.

    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Edit(MyViewModel myViewModel)
    {

        try
        {
            if (ModelState.IsValid)
            {
                //save data
                return RedirectToAction("Index");
            } else {
                 return PartialView("~/_PartialPage.cshtml", myViewModel);
            }
        }

    }

However when I do this and it reaches the return PartialView code above the frontend removes the existing modal window at the point of hitting @{await Html.RenderPartialAsync("_PartialPage", Model);} and just displays the modal background and not the new modal window

Viewing the source I can see

<div id="modalPlaceHolder"></div>

which means it is empty, despite the controller/edit post sending it data.

I then added eventhandler to the submit function to force close the modal background to clear before submit but it still doesn't change the behavior of nothing being shown on the screen. When saving the form and wanting to return to the same form it doesn't work and displays nothing on the screen. Not even java script error in the browser console.

What am I doing wrong?

By : devc2


Answers

I resolved it. The form tag ajax tags seem to be having issues. Might have been related to async and causes very strange behavior with multiple HTTP Posts in combination with using an eventhandler and doesn't work well with the bootstrap modal.

I removed the ajax form tags

form action="@(Url.Action("Edit", "MyController"))" id="formDetail" method="post">

and instead wrote a jquery eventhandler to handle the form submit

$(document).ready(function () {

    $("#formDetail").submit(function (e) {
        e.preventDefault();

        $.ajax({
            processData: false,
            contentType: false,
            data: new FormData(this),
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            success: function (data) {
                $('#modalPlaceHolder').html(data);
                $('#resultModal').modal('show');

            }
        });

    });

I still have the issue with the modal background but I resolved that using the solutions mentioned on the forum as that seems to be because I'm loading forms dynamically

By : devc2


This video can help you solving your question :)
By: admin