Razor declarative helper used as javascript string

Question

Assuming i have a helper such as:

@helper AddErrorSpan(string error)
{
    <span class="error">@error</span>
}

I run in to issues attempting to call the helper in javascript. For example:

if ($('#YearTextBox').val() == "") 
{
        $('#ErrorDiv').append('@AddErrorSpan("Year field is required.")');
}

This fails and causes a javascript syntax error because the helper returns a newline at the end. This causes the trailing '); to be pushed to the next line causing the syntax error. Is there anything I can do to remedy this easily? Currently the easy solution is to make the helper like this.

@helper AddErrorSpan(string error)
{<span class="error">@error</span>}

Since there's no break before the closing } the new line isn't returned from the helper and there is no javascript syntax error. This is kind of annoying and just ugly to look at. Is there a way to keep the helper from returning the newline when called in my javascript method?

SLaks · Accepted Answer · 2011-07-29 16:16:33Z

4

You need to Javascript-encode the string by calling HttpUtility.JavaScriptStringEncode when calling the helper.

This will escape the newline as \r\n, which will in turn be harmlessly swallowed by the HTML parser.

$('#ErrorDiv').append('@HttpUtility.JavaScriptStringEncode(AddErrorSpan("Year field is required.").ToString())');

edited Jul 29, 2011 at 16:16

answered Jul 29, 2011 at 16:10

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

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

2 Comments

Raynos Over a year ago

Verbose :(. Why does it have to be so verbose.

SLaks Over a year ago

@Raynos: If you want to, you can make a helper with a shorter name that calls this method.

Chris Fulstow · Accepted Answer · 2011-09-20 00:20:49Z

1

You can also use AjaxHelper.JavaScriptStringEncode:

@Ajax.JavaScriptStringEncode(value)

Or declare a helper to make it more succinct:

@helper JsEncode(string value) {
    @(HttpUtility.JavaScriptStringEncode(value))
}

answered Sep 20, 2011 at 0:20

Chris Fulstow

42k10 gold badges91 silver badges114 bronze badges

Collectives™ on Stack Overflow

Razor declarative helper used as javascript string

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related