CODEWITHSUNDEEP
jqueryasp.netasp.net-mvcjsonfullcalendar
Eran
Eran

Reputation: 165

Return Json causes save file dialog in asp.net mvc

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:

Upvotes: 3

Views: 2817

Answers (6)

Harold
Harold

Reputation: 228

The only way I have gotten this to work without having the end user go through crazy stuff is to change the content type to "text/html" in the return.

I have tried all the suggestions above, as well as a few other.

Heck, I even tried this.

Upvotes: 0

Bryant
Bryant

Reputation: 1

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
);

Upvotes: 0

an.it.professional
an.it.professional

Reputation: 121

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);
}

Upvotes: 1

chris
chris

Reputation: 1

Try using a JSonResult instead of an ActionResult.

Upvotes: 0

Franci Penov
Franci Penov

Reputation: 75991

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

Upvotes: 0

Rune
Rune

Reputation: 8380

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.

Upvotes: 0

Related Questions