CODEWITHSUNDEEP
javascriptasp.netwebforms
Echilon
Echilon

Reputation: 10254

Server Controls Inside a JavaScript Block

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?

Upvotes: 1

Views: 450

Answers (2)

Echilon
Echilon

Reputation: 10254

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.

Upvotes: 1

Daniel
Daniel

Reputation: 13122

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"})%>;

Upvotes: 3

Related Questions