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

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 2

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?