Best way to write javascript to ASP.NET

Question

My scenerio is a user could click on 12 different items on the page and depending on which item they click, a div will be populated with text. I was thinking a good way to do this is just pass all the different text strings to the client on their first request rather than doing a possible of 12 different AJAX calls. I figured front loading the client with the initial load time would be better since the text strings aren't long anyways.

What I am trying to figure out is the best way to write a javascript dictionary/hastable in my C# code behind and pass it to the page on load. What would be the best way to do this?

Show *your way* so that we can suggest *best way* – L.B Nov 01 '12 at 13:12 — L.B, Nov 01 '12 at 13:12

score 1 · Accepted Answer · edited May 23 '17 at 10:26

You can create 12 hidden divs, populate them with HTML and show the appropriate one depending on what the user clicked.
You can convert the Dictionary object to a JavaScript object literal, something like:

var pageContent = {
    button1: "some content",
    button2: "some other content"
    // ...
};

Have a look at System.Runtime.Serialization.Json Namespace and this answer for code. You can then populate a div with the content depending on button clicked.

score 1 · Answer 2 · answered Nov 01 '12 at 13:21

protected void btnHey_Click(object sender, EventArgs e)
{
 StringBuilder sb = new StringBuilder();

 sb.Append("<script language='javascript'>alert('HEY');</script>");

 // if the script is not already registered

 if (!Page.ClientScript.IsClientScriptBlockRegistered(Page.GetType(), "HeyPopup"))

      ClientScript.RegisterClientScriptBlock(Page.GetType(), "HeyPopup", sb.ToString());
}

You can take a look at this http://www.dreamincode.net/forums/topic/185586-aspnet-calling-javascript-from-code-behind/ I hope it helps...

RichardTowers · Answer 3 · 2012-11-01T13:53:02.043

From the point of view of the client you've basically got two choices:

Trigger an AJAX call on page load to get the data asynchronously. (See Sjoerd's answer)
Get ASP to push the data directly into your HTML / JavaScript. (See Ewerton / Scorpio's answers)

If you're uncomfortable having ASP generate your JS dynamically you could also get it to output a script tag with your data in it:

<script type="text/json" id="strings">
     <asp:Literal runat="server" ID="JavascriptData" />
</script>

Produces:

 <script type="text/json" id="strings">
     { "div1" : "First String",
       "div2" : "Second String",
       "etc" : "And so on" }
 </script>

And then read the data in your javascript:

var json = document.getElementById('strings').InnerHTML;
var strings = JSON.Parse(json);

score 0 · Answer 4 · answered Nov 01 '12 at 13:12

0

ScriptManager.RegisterStartupScript will do the trick

answered Nov 01 '12 at 13:12

Ewerton

4,046
4
30
56

Yeah I was looking at doing that, it just seemed like their could be a better way. Such as a method to just write a dictionary out to the source rather than building up a javascript string. – Justin Nov 01 '12 at 13:13
Look at ScrptManager.RegisterArray(), that will simply create variables – BuddhiP Nov 01 '12 at 13:22

score 0 · Answer 5 · answered Nov 01 '12 at 13:18

To solve such a problem myself, I have made a HttpHandler that returns JSON:

public class JsonData : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        var json = serializer.Serialize(GetData());
        context.Response.ContentType = "application/json";
        context.Response.Write(json);
    }
}

In the Javascript of my ASPX I use jQuery to retrieve the data:

$.getJSON("/JsonData.ashx", null, function (data) { ... });

This is really an out-of-band solution, in that the ASPX file retrieves a second file with the data.

What I also sometimes see is something like this:

<script>
    var myData = '<asp:Literal runat="server" ID="JavascriptData" />';
</script>

Where JavascriptData is then filled in the codebehind. I don't really like this method, but it is simple and it works. Don't forget to escape your quotes.

score 0 · Answer 6 · answered Nov 01 '12 at 13:23

0

You can store your html content in a string format in hidden fields, or you can populate 12 separate divs from your server side code. Then write some javascript to show-hide divs based on the button clicks.

answered Nov 01 '12 at 13:23

SutharMonil

78
3
19

Best way to write javascript to ASP.NET

6 Answers6