How to pass a html block from code behind(C#) to a javascript function

Question

I am currently working on my final thesis.I have a small problem.I need to pass a HTML block which is a string block to a javascript function.I have to do this from code behind.I have tried it so much I doesnt seem as it is going to work.Here is the code in code-behind:

string htmlFlightDetailsJavaScript ;

In the string there are few div and tables which have class propeties. something like div class="bla"

ClientScriptManager cs = Page.ClientScript;
StringBuilder csText = new StringBuilder();
csText.Append("fill("+htmlFlightDetailsJavaScript+");");
cs.RegisterStartupScript(this.GetType(), "alert", csText.ToString(), true);

Here is my javascript function:

function fill(b) 
{
   alert(b);
}

Note that my javascript function is on the ~.aspx.

I have tried to pass the string without classes which are in the div and the table in string and it is working.But when I try to pass it with the classes,it does not work.Can anyone help me?

Thank you very much

Answer 1

You can use the ClientScriptManager.RegisterStartupScript method.

Answer 2

If the classes in htmlFlightDetailsJavaScript are in the form div class="bla" you likely have to escape the quotes in the string or use single quotes, e.g. div class='bla'.

Answer 3

Use the RegisterClientScriptBlock() method and make sure to escape your quotes in your HTML.

"<div class=\"blah\">"

Answer 4

This sounds like invalid Javascript is being generated.

This hypothesis can be verified with inspecting the actual Javascript transmitted and verifying the entire result, in context, for correctness.

That is, imagine that this invalid Javascript was generated:

alert("<div class="I just broke JS" ...>")

To fix this, ensure the strings literals inserted into the Javascript are valid.

For instance, the above might be written (using the following code) as:

RegisterClientScriptBlock(JsEncoder.Format(@"alert(""{0}"");", theInput))

...and it won't break because the string is escaped before. (Take a look at this output and compare: the inserted literal will be still valid Javascript, even with quotes or other characters in the theInput. As an added bonus, </script> to break the code either ;-)

This code is "free to use, modify, sell, whatever". YMMV.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Text.RegularExpressions;

namespace sbcjc.sei
{
        public class JsEncoder
        {
            static Regex EncodeLiteralRegex;

            // Format a bunch of literals.
            public static string Format (string format, params object[] items)
            {
                return string.Format(format,
                    items.Select(item => EncodeString("" + item)).ToArray());
            }

            // Given a string, return a string suitable for safe
            // use within a Javascript literal inside a <script> block.
            // This approach errs on the side of "ugly" escaping.
            public static string EncodeString (string value)
            {
                if (EncodeLiteralRegex == null) {
                    // initial accept "space to ~" in ASCII then reject quotes 
                    // and some XML chars (this avoids `</script>`, `<![CDATA[..]]>>`, and XML vs HTML issues)
                    // "/" is not allowed because it requires an escape in JSON
                    var accepted = Enumerable.Range(32, 127 - 32)
                        .Except(new int[] { '"', '\'', '\\', '&', '<', '>', '/' });
                    // pattern matches everything but accepted
                    EncodeLiteralRegex = new Regex("[^" +
                        string.Join("", accepted.Select(c => @"\x" + c.ToString("x2")).ToArray())
                        + "]");
                }
                return EncodeLiteralRegex.Replace(value ?? "", (match) =>
                {
                    var ch = (int)match.Value[0]; // only matches a character at a time
                    return ch <= 127
                        ? @"\x" + ch.ToString("x2") // not JSON
                        : @"\u" + ch.ToString("x4");
                });
            }
        }
}

Happy coding.

Answer 5

I guess you can accomplish much faster if you use an ajax call and a partial control (user control) or write the content yourself.

1) The user control will render your html data. 2) The page code behind will receive the ajax call and call the method thal will render the partial control or write. 3) The method will write on Response.Output stream and end the Response (Response.End()) 4) The javascript will handle the response and show the result.

(using jQuery)

// main.js

jQuery.ajax({
    type: 'POST',
    data: { isajax: true, ajaxcall: 'MyMethod' },
    dataType: 'html',
    success: function (data, textStatus, jqXHR) {
        alert(data);
    }
});

// CodeBehind
protected void Page_Load(object sender, EventArgs e)
{
    if (Request.HttpMethod == "POST" && Request["isajax"] == "true")
    {
        this.AjaxCall(Request);
    }
}

private void AjaxCall(HttpRequest request)
{
    switch (request["ajaxcall"])
    {
        case "MyMethod": this.MyMethod(request); break;
        default: break;
    }
}

private void MyMethod(HttpRequest request)
{
    Response.ContentType = "text/html";

    Response.Write("YOUR CONTENT GOES HERE.");
    // Or, render a User Control

    Response.End();
}

P.S.: You can use a Generic Handler if you wish to. Just add the url option to jQuery ajax method.

Let me know if it helps.

Answer 6

I'd take a step back and examine whether the entire HTML block is really so dynamic that it needs to be passed into the function as a parameter.

The easier way would be to have the HTML element emitted as part of the page, then augment that from your function. ie. show or hide it.

If your scenario still requires you to pass the HTML as a parameter, you'll need to HTML encode the entire string on the server side, and then Unencode in JS.