How to pass variables in to a JS file...

Question

I know there's an easy answer to this, but this comes in the form of 2 problems.

Problem 1:

In an asp.net page there is a javascript block like this:

<script type="text/javascript">
    function doSomethingRandom() {
        var myVarToUse = <asp:Literal runat="server" ID="HackyLiteral" />
    }
</script>

Ok, so it's a simplified version of the problem, but it should be clear. I now want to move this function in to a JS file...but I can't get the asp:Literal into the JS.

var myVarToUse = <asp:Literal runat="server" ID="HackyLiteral" />
<script src="myJSFile.js" />

...Makes me a little sick, is there a better way?

Problem 2:

Similar problem, but this time the second version looks like this:

<asp:ScriptManagerProxy runat="server">
    <Scripts>
        <asp:ScriptReference Path="~/tree/AttributeTree.js" />
    </Scripts>
</asp:ScriptManagerProxy>

But this time I can't realistically put the

var myVarToUse = <asp:Literal runat="server" ID="HackyLiteral" />

above it because with the ScriptManagerProxy there's no real way of knowing exactly where the script file is going to appear.

So, them's the problems! Thanks.

Answer 1

Basically: you can't do that.

What you can do is set the value on the site which is generated by ASP (like you have now) and then refer to that variable from external js scripts, but that's ugly.

The other solution is that you can store this variable in a cookie (which will be set by ASP) and then read that cookie in external JS. You can also pass this value to a URL of a site you are displaying and parse the url in JS to get the value but I think cookies will be better for that since you will still have a clean URL and reading cookie is easier then parsing url params.

Answer 2

We use the Page's RegisterStartupScript method to register initialization functions with the ClientScriptManager. Our Javascript files only contain functions and are loaded via ScriptManager (like in your snippet). We wrote an extension method for the Page (called JSStartupScript) that helps with registering the startup scripts and at the end of the day our code looks like the following:

<%
   Page.JSStartupScript(string.Format("initFeatureX({0}, {1}, {2});",
      AntiXss.JavaScriptEncode(ViewData.Property1),
      AntiXss.JavaScriptEncode(ViewData.Property2),
      AntiXss.JavaScriptEncode(ViewData.Property3)));
%>

This also works great in combination with the ScriptManagers CompositeScript collection and LoadScriptsBeforeUI = false setting.

Answer 3

You could use an aspx file as a js file.

\<script src="<%= ResolveUrl("~/js/dynamic.aspx") %>"></script>

The you can do whatever you want in the aspx.

Answer 4

The other way is to load javascript file dynamically. I mean something like this

<script>
var myVarToUse = <asp:Literal runat="server" ID="HackyLiteral" />
ComponentLoad("/tree/AttributeTree.js"); //here Javascript file will be loaded
</script>

But even this is not the best solution. Because there will be a lot of global variables than. So better to do this:

<script>
ComponentLoad("/tree/AttributeTree.js","doSomethingRandom",{myVarToUse:"<asp:Literal runat="server" ID="HackyLiteral" />"}); //here Javascript file will be loaded
</script>