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

Can you post a sample value for htmlFlightDetailsJavaScript? — Mark Costello
– Mark Costello, Commented Apr 27, 2011 at 17:35

user166390 · Accepted Answer · 2011-04-27 17:54:30Z

1

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.

answered Apr 27, 2011 at 17:54

user166390

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

4 Comments

Ktt Over a year ago

I can pass it but I can write it to and div's innerHTML??

user166390 Over a year ago

This code just escapes string literals (it does not add quotes). You can use the string literal anywhere it is valid Javascript. For instance, JsEncoder.Format("theElement.innerHTML = '{0}';", theInnerHtml) or whatever is appropriate.

Ktt Over a year ago

Okay I did it.But you need to use RegisterStartupScript instead of RegisterClientScriptBlock.Thank you very much.

user166390 Over a year ago

@kutlu eren Good to know. All the different ways to register scripts in ASP is so confusing...

Josh M. · Accepted Answer · 2011-04-27 17:35:13Z

1

You can use the ClientScriptManager.RegisterStartupScript method.

answered Apr 27, 2011 at 17:35

Josh M.

28.1k27 gold badges135 silver badges223 bronze badges

1 Comment

Ktt Over a year ago

Still not.I dont think it is about that.When I try it like <div>blabla</div>,it works.but when I try it like <div class="bla"> it doesnt.

Mark Costello · Accepted Answer · 2011-04-27 17:41:08Z

1

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'.

answered Apr 27, 2011 at 17:41

Mark Costello

4,3944 gold badges25 silver badges26 bronze badges

1 Comment

Ktt Over a year ago

okay.here is my string: string htmlFlightDetailsJavaScript = "<div style='background-image:url(images/title_back.png); height:31px; width:666px; margin-left:10px;'><table style='padding-top:7px; width:99%; text-align:center'><tbody><tr class='fligHeader'><td>Flight id</td><td>Departure</td><td>Departure time</td><td>Arrive</td><td>Arrival time</td><td>Promotion</td><td>Economic</td></tr></tbody></table></div>";

John Batdorf · Accepted Answer · 2011-04-27 17:42:49Z

1

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

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

answered Apr 27, 2011 at 17:42

John Batdorf

2,5428 gold badges35 silver badges44 bronze badges

5 Comments

Ktt Over a year ago

still not .Here is my string: string htmlFlightDetailsJavaScript = "<div class=\"baslikDiv\"><table class=\"baslikTable\"><tbody><tr class=\"fligHeader\"><td>Uçuş Kodu</td><td>Kalkış</td><td>Kalkış Saati</td><td>Varış</td><td>Varış Saati</td><td>Promosyon</td><td>Ekonomi</td></tr></tbody></table></div>";

Ktt Over a year ago

It doesnt work properly actually.You can pass the html block but you cant give it to a div's innerHTML.So if your intension is just to alert something ,yes it does work but otherwise it doesnt.I need to append it to a div's innerHTML.But it is still usefull.Thank you very much

John Batdorf Over a year ago

Ummmm yeah..not sure what you mean. The registerClientScriptBlock does just that, register a client script block. If you have JS errors in your code, or don't know how to do something else, that's another question.

Ktt Over a year ago

Well I dont have any JS error in my code besides it is very simple.function fill(data) {var x=document.getElementById("divDepFlights");x.innerHTML=data;}I have tried both RegisterClientScriptBlock and RegisterStartupScript.when I use RegisterClientScriptBlock ,I cant run the function.But when I use RegisterStartupScript,I works.

John Batdorf Over a year ago

ok problem solved. If you do it as registurScriptBlock, just call your function when you want it to be called. I dunno what to say man... gald it's working for you.

Community · Accepted Answer · 2017-05-23 10:33:14Z

0

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.

edited May 23, 2017 at 10:33

CommunityBot

11 silver badge

answered Apr 27, 2011 at 17:55

Tony

6843 silver badges5 bronze badges

1 Comment

Ktt Over a year ago

Yes I need to pass it because I retrieve datas from my database.So I dont know how many rows I ll get.Basically I am trying to fill a table by using javascript.So hiding something wont work because I ll never know how many td s I ll need.

marcoaoteixeira · Accepted Answer · 2011-04-27 18:22:16Z

0

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.

edited Apr 27, 2011 at 18:22

answered Apr 27, 2011 at 17:54

marcoaoteixeira

5052 silver badges14 bronze badges

2 Comments

Ktt Over a year ago

Well I have just tried but I dont actually know how to do so it didnt work.It just alerts the whole page as a string

marcoaoteixeira Over a year ago

Sorry, a little mistake at the Page_Load if. Not Page.IsPostBack. Right is Request.HttpMethod == "POST".

Collectives™ on Stack Overflow

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

6 Answers 6

4 Comments

1 Comment

1 Comment

5 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

1 Comment

1 Comment

5 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related