locked
Ajax call not returning success or failure when Controller completes RRS feed

  • Question

  • User-1533839883 posted

    I am trying to show a Bootstrap Modal popup while performing a save function in my MVC controller. I can debug through the controller and the popup displays. However when the controller returns, the success or failure call in the ajax function is never hit. Can anyone help?

    I have a Controller function set like this:

    public class MyTestController : Controller

    {

    [HttpPost]
    public IActionResult MySave(MyViewModel model)
    {
       if (ModelState.IsValid)
        {
           return RedirectToAction("Index", "Tools");
       }
       return RedirectToAction("Index", model);
    }

    }

    In my .cshtml page, I have  set my form up like this:

    @model MyViewModel

    using (Html.BeginForm("MySave", "MyTest", FormMethod.Post,
                              new { encType = "multipart/form-data", id = "newToolForm", name = "newToolForm" }))
    {

        <form id="newToolForm" method="post" asp-action="">

            @Html.Partial("DetailsView", Model)

            <hr />

            <div class="form-group">
                <div class="col-md-offset-5 col-md-1">
                    <input type="submit" value="Save" class="btn" id="save" />
                </div>
            </div>

            <div id="busyModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 id="busymodaltitle" class="modal-title" />
                        </div>
                        <div class="modal-body">
                            <p id="busymodalbody" />
                        </div>
                    </div>
                </div>
            </div>

        </form>
    }

    In my scripts section I have the following ajax call:

    @section Scripts

        {
        @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
     
        <script type="text/javascript">

            $(document).ready(function () {

                //// Attach click handler to the submit button:
                //$('#save').click(function () {
                //    $('#newToolForm').submit();
                //});

                // Handle the form submit event, and make the Ajax request:
                $("#newToolForm").on("submit", function (event) {
                    event.preventDefault();

                    $("#busyModal").modal('toggle');

                    var url = $(this).attr("action");
                    var formData = $(this).serialize();
                    $.ajax({
                        url: url,
                        type: "POST",
                        data: JSON.stringify(formData),
                        dataType: "json",
                        processData: false,
                        success: function (resp) {
                            $('#busyModal').modal('toggle');
                        },
                        failure: function (resp) {
                            $('#busyModal').modal('toggle');
                        }
                    })
                });
            });

        </script>

    }

    Friday, September 29, 2017 9:30 AM

Answers

  • User475983607 posted

    The AJAX function has errors.  This code...

    var formData = $(this).serialize();

    Creates a URL encoded parameters like...

    name=value&name1=value1

    Then this...

    data: JSON.stringify(formData),

    Wraps the above in a string.

    "name=value&name1=value1"

    Remove the JSON from the AJAX method

    var url = $(this).attr("action");
    var formData = $(this).serialize();
    $.ajax({
    	url: url,
    	type: "POST",
    	data: formData,
    	processData: false,
    	success: function (resp) {
    		$('#busyModal').modal('toggle');
    	},
    	failure: function (resp) {
    		$('#busyModal').modal('toggle');
    	}
    })

    Or create a proper JSON object.

    https://api.jquery.com/serializeArray/

    Be sure to use the browser's developer tools to debug the script.  All the major browser have this feature.

    https://developer.chrome.com/devtools

    I assume you are testing... Keep in mind the controller is returning a View but the AJAX is not doing anything with the results.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 29, 2017 10:38 AM