Passing dataset to client side javascript from c#

Question

What I am trying to achieve is I want to pass a dataset to client side javascript from asp.net. Please see c# code below :

DataSet ds = new DataSet();
using (SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["Sql CONN"].ConnectionString))
{
    using (SqlCommand cmd = new SqlCommand("spuGetDetailsById", con))
    {
        cmd.CommandType = CommandType.StoredProcedure;

        cmd.Parameters.Add("@BPId", SqlDbType.Int).Value = column2;

        con.Open();
        using (SqlDataAdapter da = new SqlDataAdapter(cmd))
        {
            da.Fill(ds);                
        }
    }
}

var serializedDS = JsonConvert.SerializeObject(ds, Formatting.None, new JsonSerializerSettings()
{
    ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore
});

ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), serializedDS, "Func()", true);

The dataset has 2 tables and I am receiving the data correctly. But when I am trying to pass it to javascript, it is showing undefined. My js code :

function Func(serializedDS) {
    if (serializedDS != null)
    {
        var a = serializedDS[0]; // The table1
        var b = serializedDS[1]; // The table2
    }
}

Please help.

EDIT :

I also tried this method. It is also giving serializedDS as undefined. The Json Serialized data is showing the dataset in code though.

ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "text", string.Format("Func('{0}');", serializedDS), true);

Answer 1

You need to return the serializedDS in your javascript method:

ScriptManager.RegisterStartupScript(Page, Page.GetType(), 
    "getSerializedDS", 
    $"return {serializedDS};", 
    true
);

Later, you need to call your dynamically registered function to access the dataset in the javascript:

function Func() {
    var serializedDS = getSerializedDS();

    if (serializedDS != null)
    {
        var a = serializedDS[0]; // The table1
        var b = serializedDS[1]; // The table2
    }
}

However, there is no need to register a function just to retrieve a variable. Use RegisterClientScriptBlock for that purpose:

ScriptManager.RegisterClientScriptBlock(
    Page, 
    Page.GetType(), 
    "initMyDs", 
    $"var myDs = {serializedDS}", 
    true
);

Then access the myDs variable in your javascript as usual.

function Func() {
    if (myDs != null)
    {
        var a = serializedDS[0]; // The table1
        var b = serializedDS[1]; // The table2
    }
}

Further, the ScriptManager is used ONLY for scripts, used in partial page post backs - ie when the registering control sits is an UpdatePanel . If you don't use UpdatePanel , do Page.ClientScript :

Page.ClientScript.RegisterClientScriptBlock(
    Page.GetType(), 
    "initMyDs", 
    $"var myDs = {serializedDS}", 
    true
);