JsonResult shows up a file download in browser

Question

I'm trying to use jquery.Ajax to post data to an ASP.NET MVC2 action method that returns a JsonResult. Everything works great except when the response gets back to the browser it is treated as a file download instead of being passed into the success handler. Here's my code:

Javascript:

 <script type="text/javascript">
        $(document).ready(function () {
            $("form[action$='CreateEnvelope']").submit(function () {
                $.ajax({
                    url: $(this).attr("action"),
                    type: "POST",
                    data: $(this).serialize(),
                    dataType: "json",
                    success: function (envelopeData) {
                        alert("test");
                    }
                });
            });
            return false;
        });
    </script>

Action method on controller:

public JsonResult CreateEnvelope(string envelopeTitle, string envelopeDescription)
    {
        //create an envelope object and return
        return Json(envelope);
    }

If I open the downloaded file the json is exactly what I'm looking for and the mime type is shown as application/json. What am I missing to make the jquery.ajax call receive the json returned?

Answer 1

I have just started using ajax similar to this and first impressions looking at your code would indicate that you dont need to call submit on the form? You only need to do the ajax call. I may be wrong but it might be that the ajax is returning the data and the page is doing a refresh where the page data is replaced with the json data?

Answer 2

You are missing a "return false" in the handler of your submit event. If you don't return false, then JQuery will still pass the submit as it would do normally.

<script type="text/javascript">
    $(document).ready(function () {
        $("form[action$='CreateEnvelope']").submit(function () {
            $.ajax({
                url: $(this).attr("action"),
                type: "POST",
                data: $(this).serialize(),
                dataType: "json",
                success: function (envelopeData) {
                    alert("test");
                }
            });
            // IMPORTANT: return false to make sure the normal post doesn't happen!
            return false;
        });
        return false;
    });
</script>

You were almost there!

Answer 3

And what if you want to autocomplete passwords? I am using similar thing here... I am using Div (id=loginButton) and it has some image - I don't want button control in MVC application (), neither image button. I have hidden input control which is hidden button actually (id=submit_btn).

So, on div's (id=loginButton) click, I want to call hidden input control (id=submit_btn) and it's submit action.

HTML:

<div id="loginButton" > </div>

<input type="submit" style="display:none" name="submit" id="submit_btn" />

And JQuery:

$(document).ready(function() {
$('#loginButton').click(function() {
  $('#LoginForm').submit();
});
$("form[action$='HandleLoginForm']").submit(function() {
   Login();
   return false;
 });
 return false;

});

Function Login() is working with Ajax, same as you did, without downloading file dialog, but I need also auto complete passwords dialog.

It is easy when you use only

<input type="submit">

instead of DIV. Form knows that it is for auto completing passwords, but if I use div and force hidden button click like in the code from below, it doesn't show autocomplete password dialog.

 $('#submit_btn').click();

It will not work. User is logged in, but no reminding for browser to store password.

I need this.