Is there a good alternative to having JavaScript code as string literals in my ASP.net code?

Question

Working on an ASP.net web application, I've been wondering if there is a good way to avoid writing JavaScript code in string literals in my ASP.net code. See here: http://www.4guysfromrolla.com/articles/030202-1.aspx.

In the linked example, I see code that looks like:

Private Sub Calendar1_SelectionChanged(sender As Object, e As EventArgs)
  Dim strjscript as string = "<script language=""javascript"">"
  strjscript &= "window.opener." & _
        Httpcontext.Current.Request.Querystring("formname") & ".value = '" & _
        Calendar1.SelectedDate & "';window.close();"
  strjscript = strjscript & "</script" & ">" 'Don't Ask, Tool Bug

  Literal1.Text = strjscript  'Set the literal control's text to the JScript code
End Sub

I'm not used to using much JavaScript. A lot of the code that I've worked with has been mostly server-side coding with T-SQL. The above code gives me a headache just looking at it. Not only is it ugly, but it shows a pattern where a malicious user could try to inject malicious code.

Is there a better way to avoid manipulating JavaScript code as string literals? Think of the ways we have to avoid manipulating T-SQL code as string literals.

Answer 1

for starters the StringBuilder is far better for this than using String (it's easier to read and more performance tuned)

Dim sbuild As StringBuilder = New StringBuilder
sbuild.Append("<script language=""javascript"">")
sbuild.Append("window.opener.")
sbuild.Append(Httpcontext.Current.Request.Querystring("formname"))
sbuild.Append(".value = ")
sbuild.Append(Calendar1.SelectedDate)
sbuild.Append("';window.close();")
sbuild.Append("</script>")

Literal1.Text = sbuild.ToString

But beyond that, I would suggest trying something like the TagBuilder Class. It says it's for MVC, but I don't see why you can't use it in a Web Forms scenario as well (you'd just have to import the MVC namespace) - (though I could be wrong on this part).

Answer 2

There are a few things to consider in dealing with your issue.

There are several methods, including Page.RegisterClientScript, that handle some of the dirty work, by properly wrapping your JavaScript code in the proper tags, as well as placing it within the proper place in the page (inline vs. beginning/end) that will deal with some of the formatting issues.

Your code sample above is VB.Net, which is little rough working with with large amounts of text due to the requirement of having to append the &_ to every line. C# does a better job at this. The good news is that with the release of .Net 4, you no longer have to worry about doing all the line concatenations.

If you are dealing with a large amount of text that you need to embed, you could consider keeping your JavaScript in a separate text file, and read the file into your literal, or script registration. You can even do some simple string replacements if you have to have some dynamic data. The StringBuilder class is also a help, with the use of the Append and AppenLine methods(), but again it depends on how much text you're dealing with and how often you'll be needing to work with the code block in question.

Answer 3

A common way is to use the clientscriptmanager class:

http://msdn.microsoft.com/en-us/library/z9h4dk8y.aspx

You can call the registerstartupscript method, which will add the script to the end of your page, executes when the page finishes loading but before the page's OnLoad event is raised.

The RegisterClientScriptBlock method adds the script to the top of your page. This is where you might add commonly used fnctions.

  Dim script As New StringBuilder()
  script.AppendFormat("window.opener.{0}", Httpcontext.Current.Request.Querystring("formname"))
  script.AppendFormat(".value = '{0}';window.close();", Calendar1.SelectedDate)

  Dim cs As ClientScriptManager = Page.ClientScript
  cs.RegisterClientScriptBlock(Me.GetType(), "ScriptKey", script.ToString(), true)

The last parameter tells the script manager to wrap the script in <script>...</script> tags so that you don't have to.

Also, if you are adding scripts from a user control, the "ScriptKey" makes sure that the same script does not get added more than once. If you need a separate script for each control, you can dynamically generate that parameter based on the control id.

The other common method for adding links to script files on your page is RegisterClientScriptInclude

Answer 4

Ugh, dynamically building javascript and putting it inside a literal?

Generally the only time I embed javascript in code is when I am making a custom control and want it packaged neatly (no sepatate js file to worry about), and even then I use RegisterClientScriptBlock instead of a hack like this.

Why not just have a javascript function inside the page source (or an include file) that takes two parameters (form name and selected date) and then dynamically build the function call instead of the entire script?

Answer 5

From the example posted by rockinthesixstring, if you want to "clean" up the visual aspect of the code, you would also write it as:

Dim sbuild As StringBuilder = New StringBuilder
With sbuild
   .Append("<script language=""javascript"">")
   .Append("window.opener.")
   .Append(Httpcontext.Current.Request.Querystring("formname"))
   .Append(".value = ")
   .Append(Calendar1.SelectedDate)
   .Append("';window.close();")
   .Append("</script>")
End With

Literal1.Text = sbuild.ToString

However I would look into the methods Page.ClientScript

Page.ClientScript.RegisterStartupScript  

or if you are using a ScriptManager

ScriptManager.RegisterStartupScript

Answer 6

Move as much as possible into a .js file.

If anything, you should only need to render simple js function calls. I try to minimize the need for these, by adding a css class and then using jquery's class selector to attach the behavior.

Answer 7

When working with JavaScript in ASP.NET, these are the paths you should follow:

Put it in a seperate JavaScript file. More maintanable.

However, if you (for whatever reason) can't put it in a JavaScript file, put it in a static class which exposes the script as constants with placeholders for value insertion (use the @ symbol so you don't have to escape characters.

Like this:

public static class JavaScriptStuff
{
    public const string SpecialScriptFormat = @"window.opener.{0}.value = '{1}';window.close();"
}

Then register it using ClientScriptManager - this way you also don't need to explicity open/close the script tag (stops human error).

http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.aspx

string myScript = string.Format(JavaScriptStuff.SpecialScriptFormat, HttpContext.Current.Request.QueryString("formname"), Calendar1.SelectedDate);
Page.ClientScript.RegisterStartupScript(this.GetType(), "myscript", myScript, true);

You can go even further, and not expose the scripts as public properties, instead expose "getter" methods which accept the params - which adds another layer of maintainability:

public static class JavaScriptStuff
{
        private const string SpecialScriptFormat = @"window.opener.{0}.value = '{1}';window.close();"

        public string GetSpecialScript(string queryString, string selectedDate)
        {
           return string.Format(SpecialScriptFormat, queryString, selectedDate);
        }
    }
}

Page.ClientScript.RegisterStartupScript(this.GetType(), "myscript", JavaScriptStuff.GetSpecialScript(HttpContext.Current.Request.QueryString("formname"), Calendar1.SelectedDate), true);

HTH

Answer 8

Instead of writing out the complete function, embed the function on the page or in an external file and only dynamically write out the values. For example:

<script>
   <asp:Literal ID="ScriptValues" runat="server" />
</script>

<script>
     function foo(bar) { ... }
</script>

Then in your code behind or wherever (sorry, I don't do VB):

var values = new StringBuilder();
values.Append("var bar = " + bar + ";");
...
ScriptValues.Text = values.ToString();