Javascript var with a newline using MVC Model property

Question

I have to set a Javascript variable to equal a property in my MVC model.

I am doing this to detect if any changes were made to a textbox, this is setting the "original" value.

My Javascript code looks like this:

var initVal = '@Model.ReferralHistoryDetail[1].ReferralComments';

I am getting an error, which I assume is due to this containing carriage returns in the comments.

Uncaught SyntaxError: Unexpected token ILLEGAL

The HTML being rendered in this case is putting the closing quote on a newline, and that is the error being shown in the developer console.

For example, the rendered HTML is:

        var initVal = 'blah blah blah
';

What is the proper way to handle this?

Yes I need it. I need to check if whatever was originally in the database was altered in any way (client side). This is a textarea so they can have newlines. — Patrick, Nov 12 '15 at 14:49

score 8 · Accepted Answer · answered Nov 12 '15 at 15:31

8

You want to use the JavaScriptStringEncode command to encode the string in a javascript compatible way.

var initVal = '@HttpUtility.JavaScriptStringEncode(Model.ReferralHistoryDetail[1].ReferralComments)';

answered Nov 12 '15 at 15:31

Grax32

That's the one I was looking for. Thanks. – Patrick Nov 12 '15 at 17:27
Any idea why this test would return false in this case now? $(this).val() != initVal". I am writing the actual values to the developer console and they are not equal ... one contains the newline with some new text and the other doesn't, but Javascript is saying they are equal. – Patrick Nov 12 '15 at 17:34
For example, this is dropping into the else block ("Values Match") ... he's what the dev console shows: Original:blah blah Current: blah blah test Values Match – Patrick Nov 12 '15 at 17:38
I don't see anything in your comment that would explain why that would be happening. Only things I can suggest are to look at using the "!==" and "===" operators, as they give more exact answers, watch for assignments when you meant for comparisons, check your parentheses, and, if you are using an else, consider putting the true block first, i.e. `if (x === y)` as it usually easier to wrap your head around that logic. – Grax32 Nov 12 '15 at 18:09
I worked it out, in was in a rather complex block and was bypassing the check, just an error on my part. Thank you for the help, your answer was exactly what I was looking for. – Patrick Nov 12 '15 at 18:58

Saransh Kataria · Answer 2 · 2015-11-12T15:28:31.293

0

You need to create an extension method that replaces the new line character with
tags.

Or use the method HtmlEncode like this:

var initVal = @Html.Raw(HttpUtility.HtmlEncode(@Model.ReferralHistoryDetail[1].ReferralComments).Replace("\n", "<br />"))

edited Nov 12 '15 at 15:28

answered Nov 12 '15 at 14:45

Saransh Kataria

This results in: var initVal = 'blah blah <br />'; with the same error. – Patrick Nov 12 '15 at 14:48
"initVal" is the Javascript variable. The Razor code can't see this and can't pass this to HtmlEncode. – Patrick Nov 12 '15 at 15:27
I was just testing by putting the value inside initVal since I didn't have the model with me, you have to use the Model.ReferalHistoryDetail syntax, re edited. – Saransh Kataria Nov 12 '15 at 15:29
You were close ... HttpUtility.JavaScriptStringEncode() was what I needed. – Patrick Nov 12 '15 at 19:01
This encodes äöå which is not desired in my case (sending to google calendar event creation messes up then) – Rickard Liljeberg Apr 01 '19 at 19:19

score 0 · Answer 3 · edited May 23 '17 at 12:00

0

If you replace \n character by \, you will have a valid syntax for multiple lines string.

So that should work
var initVal = '@Model.ReferralHistoryDetail[1].ReferralComments.Replace("\n","\\")';

I found other ways to allow multiple line string in javascript, in this answer.

edited May 23 '17 at 12:00

Community

answered Nov 12 '15 at 14:59

Ygalbel

score -1 · Answer 4 · answered Nov 12 '15 at 15:16

-1

You cannot access Model properties from JavaScript like that, JavaScript cannot do anything with your model.

Create a variable up the page

@{ var value = @Model.ReferralHistoryDetail[1].ReferralComments;

Then access value in javascript, though not sure why you don't just render directly on page why do you need javascript unless I am missing something

answered Nov 12 '15 at 15:16

Mark Homer

I posted in the original question this was working fine before I had to handle newlines. And I posted the reason for needing this also. – Patrick Nov 12 '15 at 15:17
@Patrick working? you said you have: Uncaught SyntaxError: Unexpected token ILLEGAL I am not sure how that is working? – Mark Homer Nov 12 '15 at 15:20
Did you read the question? That error is occurring because of the CRLF in the textarea. If there is no CRLF, everything works fine. The HTML is rendering the code perfectly fine, but with a line break in there it throws the Javascript off. I have to encode this. – Patrick Nov 12 '15 at 15:22
Why don't you use a binding then something like Angular or Knockout – Mark Homer Nov 12 '15 at 15:24
Not an option at my company. – Patrick Nov 12 '15 at 15:24

4 Answers4