Server Controls Inside a JavaScript Block

Question

I'm trying to render a list of items from a database as a block of JSON so I can use it on the client side via JavaScript. I thought the best way to do this would be to use a Repeater or ListView to render my items, but I get a "server tag is not well formed" error.

This is my code

<asp:ListView runat="server" ID="rptAddresses" ItemPlaceholderID="plcItems">
        <LayoutTemplate> 
            <script type="text/javascript">
                var addressConfig = [
                    <asp:Placeholder ID="plcItems" runat="server"/>
                ];
             </script>
        </LayoutTemplate>
        <ItemTemplate>
            {
                'id': '<asp:Literal runat="server" Text="<%# Eval("AddressID") %>" />',
                'name':...

What am I doing wrong?

Daniel · Accepted Answer · 2015-11-06 14:16:07Z

3

I'm not sure what you are doing wrong, but it is probably your literal. You can just do this instead:

'id': '<%# Eval("AddressID") %>'

That said there are other alternatives to sending an array to your script:

ClientScriptManager.RegisterArrayDeclaration is built into the framework. Here's an example taken from the linked page:

' Define the array name and values.
Dim arrName As String = "MyArray"
Dim arrValue As String = """1"", ""2"", ""text"""
' Get a ClientScriptManager reference from the Page class.
Dim cs As ClientScriptManager = Page.ClientScript

' Register the array with the Page class.
cs.RegisterArrayDeclaration(arrName, arrValue)

This will render the following array just before the close of your form:

var MyArray =  new Array("1", "2", "text");

Personally, I prefer using the JavaScriptSerializer because you can freely serialize basically any object:

Protected Function GetArray() As String
  Dim exampleList As New List(Of Pair) From {New Pair(7, 4), New Pair("Foo", "Bar")}
  Dim serializer As New Script.Serialization.JavaScriptSerializer()
  Return serializer.Serialize(exampleDictionay)
End Function

You can then add it to your .aspx file anywhere you like:

var myArray = <%=GetArray()%>;

which actually renders as an array literal:

var myArray = [{"First":7,"Second":4},{"First":"Foo","Second":"Bar"}];

Of course, you could also do it completely in your aspx markup:

<% Dim serializer As New Script.Serialization.JavaScriptSerializer() %>
var array = <%= serializer.Serialize({"look", "at", "this"})%>;

answered Nov 6, 2015 at 14:16

Daniel

13.1k3 gold badges39 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Echilon Over a year ago

Thanks Daniel, this seems like one solution but I get the impression it adds a lot of visual boilerplate. I found a (fairly) elegant solution below.

Echilon · Accepted Answer · 2015-11-06 15:33:39Z

1

After much tweaking with all combination of single and double quotes, I eventually solved this by putting the <script> tag in a literal. ie:

    <LayoutTemplate> 
        <asp:Literal runat="server" Text='<script type="text/javascript">' />
            var macroConfig = [
                <asp:Placeholder ID="plcItems" runat="server"/>
            ];
            $(document).ready(function () {
                ...
            });
        <asp:Literal runat="server" Text='</script>' />
    </LayoutTemplate>

It seems the parser gets confused with where the script tag ends and the server control tag starts.

answered Nov 6, 2015 at 15:33

Echilon

10.3k33 gold badges138 silver badges225 bronze badges

Collectives™ on Stack Overflow

Server Controls Inside a JavaScript Block

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related