Question

I need to pass values from my asp.net code to a javascript code block in the page.

I know at least two ways to do this:

<script runat=server>
int a = 42;
protected override void OnInit(EventArgs e)
{
   lbl.Text = "42";
}
</script>

<script>
   var a = <%= a %>;
   var b = <asp:Literal runat=server id=lbl>/>;
   alert("the meaning of life=" + a + " or " + b);
</script>

But is there a better way in asp.net WebForms to bind the value of a variable in asp.net code to a javascript block? Both of these seem messy because they don’t support intellisense.

Answer 1

I ended up doing something which I think it more robust. In master page I added this:

public Dictionary<string, object> JavaScriptVars { get; set; }

Then I append the result of this function to the page:

public string GetJavaScriptVars()
{
    if (JavaScriptVars.Count == 0) return null;
    StringBuilder sb = new StringBuilder();
    sb.Append("<script>");
    System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    int i = 0;
    foreach (string s in JavaScriptVars.Keys)
    {
        if (i == 0)
            sb.Append("var ");
        sb.Append(s + "=");

        object o = JavaScriptVars[s];
        if (o is System.Collections.Specialized.NameValueCollection)
        {
            Dictionary<string, string> dict = new Dictionary<string, string>();
            foreach (string key in ((System.Collections.Specialized.NameValueCollection)o).Keys)
                dict[key] = ((System.Collections.Specialized.NameValueCollection)o)[key];
            o = dict;
        }
        sb.Append(serializer.Serialize(o));
        sb.Append(i == JavaScriptVars.Count - 1 ? ";" : ",");
        i++;
    }
    sb.Append("</script>");
    return sb.ToString();
}

So now I can do this:

JavaScriptVars["Name"] = "John"; //string
JavaScriptVars["Age"] = 32; //int
JavaScriptVars["Hobbies"] = new string[]  { "Sewing", "Hiking" }; //array

and in my final page, I get:

<script>
    var Name='John',Age=32,Hobbies=["Sewing", "Hiking"];
</script>

So now I have a robust way to pass values with types correctly managed to the page without script blocks or labels.