Return Json causes save file dialog in asp.net mvc

Question

Hi,

I'm integrating jquery fullcalendar into my application. Here is the code i'm using:

in index.aspx:

<script type="text/javascript">
   $(document).ready(function() {
       $('#calendar').fullCalendar({
           events: "/Scheduler/CalendarData"
       });
   });  
</script>

<div id="calendar">
</div>

Here is the code for Scheduler/CalendarData:

public ActionResult CalendarData()
    {

        IList<CalendarDTO> tasksList = new List<CalendarDTO>();

        tasksList.Add(new CalendarDTO
        {
            id = 1,
            title = "Google search",
            start = ToUnixTimespan(DateTime.Now),
            end = ToUnixTimespan(DateTime.Now.AddHours(4)),
            url = "www.google.com"
        });
        tasksList.Add(new CalendarDTO
        {
            id = 1,
            title = "Bing search",
            start = ToUnixTimespan(DateTime.Now.AddDays(1)),
            end = ToUnixTimespan(DateTime.Now.AddDays(1).AddHours(4)),
            url = "www.bing.com"
        });

        return Json(tasksList,JsonRequestBehavior.AllowGet);
    }

    private long ToUnixTimespan(DateTime date)
    {
        TimeSpan tspan = date.ToUniversalTime().Subtract(
        new DateTime(1970, 1, 1, 0, 0, 0));

        return (long)Math.Truncate(tspan.TotalSeconds);
    }

    public ActionResult Index()
    {
        return View("Index");
    }

I also have the following code inside head tag in site.master:

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />
<link href="<%= Url.Content("~/Content/jquery-ui-1.7.2.custom.css") %>" rel="stylesheet" type="text/css" />
<link href="~Perspectiva/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~Perspectiva/Content/fullcalendar.css" rel="stylesheet" type="text/css" />
<script src="~Perspectiva/Scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script src="~Perspectiva/Scripts/fullcalendar.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>

Everything I did was pretty much copied from http://szahariev.blogspot.com/2009/08/jquery-fullcalendar-and-aspnet-mvc.html

When navigating to /scheduler/calendardata I get a prompt for saving the json data which contents are exactly what I created in the CalendarData function.

What do I need to do in order to render the page correctly?

Thanks in advance,

Eran

Update: Following Rune's and Franci's comments I added a view called CalendarData.aspx which is identical to index.aspx. Results:

• Navigating to /scheduler/calendardata still gives me the save file dialog.
• Navigating to /scheduler/index I get the following runtime error in Visual Studio: Microsoft JScript runtime error: Object expected. VS highlights the $(document).ready(function()...) code in the scrip tag.

Answer 1

You need to navigate to the URL mapped to an action returning Index.aspx instead of the URL mapped to CalendarData(). I assume this would be something like "/scheduler". When you go to "/scheduler/calenderData" the server will return the Json data straight to the browser.

Answer 2

If you navigate to /scheduler/calendarData in the browser, the browser gets a response with Content-Type: application/json. Some browsers don't know how to display such content type, so they let you save the content as a local file, so you could view it in another program.

You should be navigating to your browser to /scheduler/index instead, which returns a human-readable result that can be rendered by all browsers (has Content-Type: text/html).

If you want to see the content returned by CalendarData for debugging purposes, you have two options:

• use browser that understands Content-Type: application/json
• use a tool like Fiddler, that allows you to inspect the HTTP traffic

Answer 3

Try using a JSonResult instead of an ActionResult.

Answer 4

I had same problem and I was missing the basic ActionResult that returned the View to start with...? I was thinking it was something deeper...but here is the basic things to check that fixed my issue;

in my Homecontroller; public ActionResult Index() { ViewData["Message"] = "Whatever!!! just work!";

        return View();
    }

in Global, I also had to refix my maproutes back to default as I was roting to the GetData action when try things to fix it: routes.MapRoute( "Default", // Route name "{controller}/{action}/{id}", // URL with parameters new { controller = "Home", action = "Index", id = "" } // Parameter defaults );

Answer 5

Try using a JSonResult instead of an ActionResult.

public JSonResult CalendarData()
{
    IList<CalendarDTO> tasksList = new List<CalendarDTO>();

    tasksList.Add(new CalendarDTO
    {
        id = 1,
        title = "Google search",
        start = ToUnixTimespan(DateTime.Now),
        end = ToUnixTimespan(DateTime.Now.AddHours(4)),
        url = "www.google.com"
    });
    tasksList.Add(new CalendarDTO
    {
        id = 1,
        title = "Bing search",
        start = ToUnixTimespan(DateTime.Now.AddDays(1)),
        end = ToUnixTimespan(DateTime.Now.AddDays(1).AddHours(4)),
        url = "www.bing.com"
    });

    return Json(tasksList, JsonRequestBehavior.AllowGet);
}