Parse 2D array from ASP.NET C# code behind to Javascript

Question

I've written a function (addCalendarEvents) which takes in an array (events) and parses into a custom calendar. Everything works perfectly fine when its fired through the document.ready function, events are registering and etc.

Javascript

$(document).ready(function () {
    loadCalendar(null);
    addCalendarEvents([{ title: 'All Day Event', start: '2016-01-01' }, { title: 'Long Events', start: '2016-01-07', end: '2016-01-10' }]);     
});

function addCalendarEvents(events) {
    $('#calendar').fullCalendar('addEventSource', events)
}

However, I also need them to be fired through the code behind to add events dynamically. I've tried using ScriptManager's RegisterStartupScript, but it's not working. Is there a proper way for me to do so?

C# Code Behind

protected void Page_Load(object sender, EventArgs e) 
{
    ScriptManager.RegisterStartupScript(this, this.GetType(), "addEvents", "addCalendarEvents([{ title: 'Other Event', start: '2016-01-01' }, { title: 'Other Long Events', start: '2016-01-07', end: '2016-01-10' }]);", true);
}

rashfmnb · Answer 1 · 2016-03-10T17:06:19.467

0

try to convert the data into json while adding the script. Add your assemblies

using this Assembly
using System.Web.Script.Serialization;

Then Deserialize your object

var json = new JavaScriptSerializer().Serialize(obj);

then call registerStartupScript

ScriptManager.RegisterStartupScript(this, this.GetType(), "addEvents", json, true);

and at client side do this to convert it into json

var obj = JSON.parse(string);

edited Mar 10 '16 at 17:06

answered Mar 10 '16 at 16:03

rashfmnb

9,959
4
33
44

so what should 'obj' be, a string? Lets say if i want to parse in '[{ title: 'All Day Event', start: '2016-01-01' }, { title: 'Long Events', start: '2016-01-07', end: '2016-01-10' }]' how can i do so? Do i have to create a class which houses the property 'title', 'start' and 'end'? – WaftureRobin Mar 10 '16 at 16:15
obj would be c# object of any class that you want to convert in to json string or create you own class than convert it into json it depends how you want to see your json yes u are right u have to create the class pouplate it with your data than convert it in to json to use on front end – rashfmnb Mar 10 '16 at 16:16
Check out my posted answer. I've tried using your method, but it's not working. – WaftureRobin Mar 10 '16 at 16:35
it's ok the only thing that you have to do is var obj = JSON.parse(string); at client side – rashfmnb Mar 10 '16 at 17:05

NickT · Accepted Answer · 2016-03-10T16:38:54.590

0

It might be simpler to use a <asp:Literal id="StartupScript" runat=server /> control containing the $(document).ready() function to inject your page load callouts.

You could write the statements to the literal control within your Page_Load event and they should get executed by the client when the page is ready.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <asp:Literal ID="CodeInject" runat="server"/>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

And the code behind is:

 protected void Page_Load(object sender, EventArgs e)
    {
        StringBuilder SB = new StringBuilder();
        SB.Append("<script>");
        SB.Append("$(document).ready(function () {");

        // statements here
        SB.Append("alert('test');");


        SB.Append("});</script>");
        CodeInject.Text = SB.ToString();
    }

edited Mar 10 '16 at 16:38

answered Mar 10 '16 at 16:07

NickT

214
1
5

You can't just put an aspx control in the document.ready() function. How do you propose they do this? – Rick S Mar 10 '16 at 16:09
It's admittedly been a while since I worked with asp.net controls, but I do remember writing the entire tag including the ` – NickT Mar 10 '16 at 16:23
I modified my answer with a quick example. I tested it locally and it does execute the statements on page load. Hope that helps! – NickT Mar 10 '16 at 16:39
@NickT Thanks, your method is working. I tried initializing the calendar above the Literal control, then the adding the events within the Literal control and it didn't work. I tried it again, this time initializing and adding events within the Literal control and it works, weird uh.. I think the calendar plugin only allows events to be parsed in on the on page load function, when the calendar is initialized. – WaftureRobin Mar 10 '16 at 17:16
@WaftureRobin I'm glad you got it working! I was going to suggest that you still needed the `SB.Append("$(document).ready(function () {");` and ` SB.Append("});");` parts of the example. – NickT Mar 10 '16 at 17:24
yupp, it's included within the literal control and it's working. thanks! – WaftureRobin Mar 10 '16 at 23:28

Parse 2D array from ASP.NET C# code behind to Javascript

2 Answers2