Convert Razor String Variable to Javascript String Variable in MVC

Question

I am trying to pass my string variable (even boolean) on my cshtml view to my javascript section. I can successfully pass the value from razor section to javascript if its integer. But what I want to accomplish is to pass the string value. Here is my sample code from my .cshtml:

string strAnnouncement = "My announcement";
int intCounterValue = 1200;

To receive the value on Javascript, here is my code:

//Cannot get the value, always error on Developer Tool console
var SessAnnouncement = @strAnnouncement;

//Can get the value successfully
var SessInitTimer = @intCounterValue;

As you can see, I can get the value via javascript on SessInitTimer which is 1200. But on SessAnnouncement, I get a Uncaught ReferenceError: My announcement is not defined.

How can I get the strAnnouncement value on my razor section and pass it on script section?

You have to enclose your C# variable into single or double quote if you want to access it in javascript. ex: var SessAnnouncement = '@strAnnouncement'; — Jaimin Dave
– Jaimin Dave, Commented Oct 19, 2016 at 8:40

Satpal · Accepted Answer · 2019-09-05 06:01:44Z

25

They are treated as variable and since you have not defined them you get the said error.

You need to wrap in quotes to be treated as string.

var SessAnnouncement = "@strAnnouncement";

A better approach would be to use JSON.Encode() method

var SessAnnouncement = @Html.Raw(Json.Encode(strAnnouncement));

edited Sep 5, 2019 at 6:01

answered Oct 19, 2016 at 8:34

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

4 Comments

Suncat2000 Over a year ago

That works for single values. If there are newlines in the string, JavaScript throws a syntax error exception.

Satpal Over a year ago

@Suncat2000, for multiple line use backtick i.e. `@strAnnouncement`. However, I would recommend the second approch

Suncat2000 Over a year ago

Thanks for the tip, but that works only if all your browsers support template literals. Internet Explorer does not. I ended up using @(new HtmlString(HttpUtility.JavaScriptStringEncode(Model.XmlProcessedText, true))) to encode the string and escape quotes. It worked perfectly.

Philip Stratford Over a year ago

Your suggestion was the only one that worked for me, @Suncat2000, although I still had to wrap it in upticks so that Javascript recognised it as a string and not a variable name.

Collectives™ on Stack Overflow

Convert Razor String Variable to Javascript String Variable in MVC

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related