Javascript, Razor and Escape characters. Like apostrophe

Question

I am using Razor in my MVC3 project. And also I'm using FullCalendar JQuery plugin. So when I'm trying to fill the array it works good. Except one thing. If s.Name contains apostrophe it renders like' that's not what I want. I tried to use different methods like Encode and Decode and even MvcHtmlString.Create and result is always the same.

Here is the code snippet:

<head>
    <script type='text/javascript'>
       $(document).ready(function () {        
        $('#calendar').fullCalendar({
            header: {
                left: '',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            month: 5,
            year: 2011,
            editable: false,
            events: [
            @foreach (var s in ViewBag.Sessions)
            {
                @:{
                @: title: '@s.Name',
                @: start: new Date(@s.Starts.Year, @s.Starts.Month-1, @s.Starts.Day),
                @: end: new Date(@s.Ends.Year, @s.Ends.Month-1, @s.Ends.Day)
                @:},
            }
                   ]
        });
    });
</script>

GvS · Accepted Answer · 2020-06-16T15:23:40.053

116

I would write your foreach like this:

            @foreach (var s in ViewBag.Sessions)
            { 
                <text>
                {
                 title: '@HttpUtility.JavaScriptStringEncode(s.Name)',
                 start: new Date(@s.Starts.Year, @s.Starts.Month-1, @s.Starts.Day),
                 end: new Date(@s.Ends.Year, @s.Ends.Month-1, @s.Ends.Day)
                },
                </text>
            }

HttpUtility.JavaScriptStringEncode to escape quotes and html markup.
<text> is nicer for multiline output.

edited Jun 16 '20 at 15:23

answered Mar 08 '11 at 14:28

GvS

52,015
16
101
139

that actually worked! except that I need to take title into double quotes and prohibit using them in Sessions' names – iLemming Mar 08 '11 at 16:19
3

This doesn't escape apostrophes? – Danny Tuppeny Apr 23 '13 at 07:38
4

Danny, see my answer for escaping/encoding. – Fabrice Sep 18 '13 at 21:12
1

@Fabrice Yeah, I saw it; I was just mad that the accepted answer is open to abuse ;O( – Danny Tuppeny Oct 06 '14 at 14:15
@Fabrice I've edited this answer to encode the JS, so at least people copy/pasting won't be creating poor vulnerable code :( – Danny Tuppeny Oct 06 '14 at 14:17
2

This will also fail if the string contains '' :( – Danny Tuppeny Jun 02 '15 at 14:09
2

This seems to work without html.raw, so in my case, Razor: string msg = "test's" then, onclick="confirmRun('@HttpUtility.JavaScriptStringEncode(msg)')" worked fine. What is the reason for adding html.raw? – eaglei22 Oct 11 '17 at 00:03
This answer shouldn't be accepted. It JavaScript-encodes but doesn't HTML-encode. `Html.Raw` should only be used with safe HTML strings. – Sam Jun 09 '20 at 06:33

score 86 · Answer 2 · answered Jul 25 '12 at 12:47

86

Here is how to do it:

title: '@Html.Raw(HttpUtility.JavaScriptStringEncode(s.Name))'

answered Jul 25 '12 at 12:47

Fabrice

3,094
3
28
31

very nice. this is the way to go. – Papa Burgundy Sep 23 '13 at 16:00
This is useful when using `'@Html.Raw(HttpUtility.JavaScriptStringEncode(Resources.MyFile.ResourceName))'` with text containing HTML as the translations may contain apostrophes etc. – lko Oct 25 '13 at 07:05
Doesn't this work in the incorrect order? We want decode html first and then encode the javascript string. – Max Strater Aug 05 '14 at 02:39
1

If you want to decode HTML, then you should use HttpUtility.HtmlDecode – Fabrice Aug 05 '14 at 16:12
This will fail if the string contains '' :( – Danny Tuppeny Jun 02 '15 at 14:09
Full namespace? – Sasino Nov 04 '19 at 16:00

Darin Dimitrov · Answer 3 · 2011-03-08T16:23:12.317

5

Try like this:

$(function () {        
    $('#calendar').fullCalendar({
        header: {
            left: '',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        month: 5,
        year: 2011,
        editable: false,
        events: @Html.Raw(new JavaScriptSerializer().Serialize(ViewBag.Sessions))
    });
});

ViewBag.Sessions might require some modifications to achieve the desired result (in terms of property names), which brings me to the usual remark I make about ViewBag when I see someone using it: using ViewBag is bad practice and I would recommend you using a strongly typed view with a view model.

edited Mar 08 '11 at 16:23

answered Mar 07 '11 at 22:36

Darin Dimitrov

1,023,142
271
3,287
2,928

Wow...wow... wow... that's interesting... could you please tell me how the structure (ViewBag.Session) should look? I'm no so good with javascript yet and I'm not sure how the similar structure would be look like in c# . Sorry – iLemming Mar 07 '11 at 23:03
@Agzam, I strongly suggested you not to use `ViewBag` in your controller action. But if you insist `ViewBag.Sessions` should be an `IEnumerable` where `T` is a class with properties: `Title`, `Start` and `End`. For example: `ViewBag.Sessions = new[] { new { Title: 'foo', Start: DateTime.Now, End: DateTime.Now.AddHours(5) } };` – Darin Dimitrov Mar 07 '11 at 23:08
This will fail if the string contains '' :( – Danny Tuppeny Jun 02 '15 at 14:09
@DannyTuppeny, how to reproduce your issue? The following works fine: "; } alert('@Html.Raw(HttpUtility.JavaScriptStringEncode(text))'); – Fabrice Aug 06 '15 at 15:32
@Fabrice It didn't when I tried it; as the browser interpreted the tag in the string as the end of the script tag (eg. [see here](http://stackoverflow.com/q/12331531/25124)). What browser did you test it in? – Danny Tuppeny Aug 06 '15 at 16:22
I don't remember. This is too bad. I would have thought this bug had been fixed since 2012. – Fabrice Aug 08 '15 at 13:24

Vijai Sebastian · Answer 4 · 2019-07-22T11:56:47.877

4

HttpUtility.JavaScriptStringEncode is not really required here. Simply

 '@Html.Raw(s.Name)'

is worked for me.

edited Jul 22 '19 at 11:56

answered Jul 22 '19 at 11:29

Vijai Sebastian

109
1
4

Meligy · Answer 5 · 2011-03-07T22:17:55.447

1

You said you already tried MvcHtmlString.Create, but for me, this seems to work correctly for me:

'Trying @MvcHtmlString.Create("Testing'`")'

.

Update:

I took your code ', put it in browser, copied what showed in there, put it back in Visual Studio, like:

@MvcHtmlString.Create("'")

And it did work, I only got ' back, not '.

.

Update 2:

This also works:

@{ViewBag.Symbol = "'";}
@MvcHtmlString.Create(ViewBag.Symbol)

edited Mar 07 '11 at 22:17

answered Mar 07 '11 at 22:10

Meligy

35,654
11
85
109

changed this: @: title: '@s.Name', into this: @: title: '@MvcHtmlString.Create(@s.Name)', ..... Didn't work. Renders nothing to the screen – iLemming Mar 07 '11 at 22:19
but if I put something '@MvcHtmlString.Create("some string with a quote ' ")' - it works. – iLemming Mar 07 '11 at 22:21
What is the encoding of the page and of the actual string in 1s.Name`? Maybe this is the problem? Try to make sure in your browser you view the page in UTF-8 or so maybe? – Meligy Mar 07 '11 at 22:22
so, somehow Razor doesn't wanna get this: @MvcHtmlString.Create(@s.Name). Why? – iLemming Mar 07 '11 at 22:22
I think it is specific to your s.Name string and some culture or so you may have or the name might be encoded in. – Meligy Mar 07 '11 at 22:23
Try with @MvcHtmlString.Create(s.Name) i.e. without the '@' – willvv Mar 07 '11 at 22:23
BTW, `@MvcHtmlString.Create(@s.Name)` is wrong, it should be `@MvcHtmlString.Create(s.Name)` – Meligy Mar 07 '11 at 22:24
LOL, you said it the same time, @willvv :D – Meligy Mar 07 '11 at 22:25
My biggest bet is on the extra `@` now. willvv seems to agree, and it actually makes sense, @Agzam, please try and tell us if it works :) – Meligy Mar 07 '11 at 22:27

Javascript, Razor and Escape characters. Like apostrophe

5 Answers5

Linked

Related