Calling Javascript from HTML Helper

Question

I've written a custom HTMLHelper that outputs some javascript. The javascript is being added to the page but it's not being run when the page loads. If I copy / paste the generated JS into the console window of Chrome, the script works perfectly. Is what I am wanting to do possible?

public static HtmlString CreatePieChart(this HtmlHelper helper, string divId, int width, Collection<PieChartSeriesItem> series)
    {            
        if (width < 1)
        {
            throw new System.ArgumentException("Width of pie chart must be greater than zero");
        }

        StringBuilder htmlString = new StringBuilder();
        htmlString.Append("<script type=\"type/javascript\">");
        htmlString.Append("$(window).load(\"#");
        htmlString.Append(divId);
        htmlString.Append("\").kendoChart({");
        htmlString.Append("title: { visible: false },");
        htmlString.Append("chartArea: { background: \"transparent\", width: ");
        htmlString.Append(width.ToString(CultureInfo.InvariantCulture));
        htmlString.Append(" },");
        htmlString.Append("legend: { visible: false },");
        htmlString.Append("seriesDefaults: { labels: { visible: false } },");
        htmlString.Append("series: [{");
        htmlString.Append("type: \"pie\",");
        htmlString.Append("padding: 0,");
        htmlString.Append("overlay: { gradient: \"none\"},");
        htmlString.Append("data: [");

        htmlString.Append(CreatePieChartDataSeriesString(series));

        htmlString.Append("]");
        htmlString.Append("}],");
        htmlString.Append("tooltip: { visible: true, template: \"#= category # (#= value #%)\"}");
        htmlString.Append("});");
        htmlString.Append("</script>");

        return new HtmlString(htmlString.ToString());
    }

and here's the call in the page

<div id="piechart">
    @Html.Partial("_PieChart", Model.BalancePieChartData)
</div>

try to add for example console.log("Test #n") and look if thats being executed — EaterOfCode
– EaterOfCode, Commented Mar 22, 2013 at 12:42
Also, doing this sort of templating can be really hard to read/change. I came across the RazorEngine project recently, which may be quite nice for this sort of thing: github.com/Antaris/RazorEngine - That being said I do agree with @tereško that importing JS in this manner isn't ideal. Would be great to move your JS on the "client" side and then transform your Collection<PieChartSeriesItem> series into JSON that you could use. — ctrlplusb
– ctrlplusb, Commented Mar 22, 2013 at 12:45
@Sean He's already inside ASP.NET MVC, it already has a rendering engine. — Roman
– Roman, Commented Mar 22, 2013 at 12:46

Jarvan · Accepted Answer · 2013-05-08 03:20:28Z

4

I have tried this and it works fine.

public static MvcHtmlString Test(this HtmlHelper htmlHelper)
    {
        StringBuilder htmlString = new StringBuilder();
        htmlString.Append("<script type=\"text/javascript\">");
        htmlString.Append("alert(1)");
        htmlString.Append("</script>");
        return new MvcHtmlString(htmlString.ToString());
    }

I put it on my view in body just like this:

@Html.Test()

and my browser works fine alert 1.

So i guess maybe you just write this line wrong

htmlString.Append("<script type=\"type/javascript\">");

It should be "text/javascript"

answered May 8, 2013 at 3:20

Jarvan

1,2609 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Calling Javascript from HTML Helper

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related