Adding an img HTML tag combined with a call to C# function to an ASP.NET page inside JavaScript script

Question

Yeah, i know the title is a bit confusing but that's what it is...

Here is the piece of JavaScript code i have inside my ASP.NET Web app, the line that troubles me is the 7th line from the bottom, after chat.server.send .

<script type="text/javascript">
    $(function () {
        // Declare a proxy to reference the hub.
        var chat = $.connection.chatHub;
        // Create a function that the hub can call to broadcast messages.
        chat.client.broadcastMessage = function (name, message) {
            // Html encode display name and message.
            var encodedName = $('<div />').text(name).html();
            var encodedMsg = $('<div /> ').text(message).html();
            var tremp_id = $('<div /> ').text("<%=Request.QueryString["tid"]%>").html();

            var chatMessage = document.getElementById('<%= chatMessage.ClientID %>');
            chatMessage.value = 'value from javascript';

            // Add the message to the page.
            $('#discussion').append('<li><strong>' + encodedName
                + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
        };
        // Get the user name and store it to prepend to messages.
        $('#displayname').val('<%=returnName()%>');
        // Set initial focus to message input box.
        $('#message').focus();
        // Start the connection.
        $.connection.hub.start().done(function () {
            $('#sendmessage').click(function () {
                // Call the Send method on the hub.
                chat.server.send($('<div /> ').text('<img src="<%=getUserImage(Convert.ToInt32(Request.QueryString["uid"]))%>" height="50" width="50" border="1" bordercolor=black />').html() + $('#displayname').val(), $('#message').val() + $('<div /> ').text(" | Tremp: <%=Request.QueryString["tid"]%>").html());
                // Clear text box and reset focus for next comment.
                $('#message').val('').focus();
            });
        });
    });
</script>

As you can see I'm trying to add an image that gets the URL from a function within my C# code behind.

It gets some number from the URL and sends it to the function, that returns an image URL.

It seems alright except it shows the following instead:

What am i doing wrong and how can i fix it? I'm sure it should be pretty simple.. but i can' find the right way..

Thanks.

Answer 1

You're using jquery Text function which escape the string (intended for text). What you're looking for it the jquery append function.

chat.server.send($('<div /> ').append(...

In fact, you have the same problem when you broadcast your message ( chat.client.broadcastMessage ). You're using text instead of append

var encodedMsg = $('<div /> ').append(message).html();

Also make sure that your message variable is not already encoded from the server.