passing server side mvc variables to javascript [closed]

Question

I am looking at feedback as to the best and easiest way to pass server side variables from a controller action to the sites html markup and for them to be used then by javascript on the site.

I am working with asp.net mvc4 and trying to find the recommended method of doing such.

@emrenevayeshirazi: <sarcasm>Oh, what a useful comment on Stack Overflow!</sarcasm> — Sk8erPeter
– Sk8erPeter, Commented Oct 14, 2014 at 13:53

Declan Cook · Accepted Answer · 2013-02-11 22:27:01Z

20

You have a couple of options.

One is attach data-attributes or id's to elements and fetch them using javascript.

Using razor views:

<div id="someid" data-name="@item.attribute"></div>

JS:

$('#someid').data('name')

Or you can render the data directly into a script tag.

Using razor:

 var somevar = "@item"

You can also Json.Encode more complex objects.

 var somevar = @Html.Raw(Json.Encode(object))

answered Feb 11, 2013 at 22:27

Declan Cook

6,1362 gold badges37 silver badges53 bronze badges

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

4 Comments

Nick Albrecht Over a year ago

Also to emphasize Declan's answer, if you use the var somevar = "@item"; method you MUST wrap it in the quotes as he has, failing to do so could yield a statement that reads as var somevar = ;. This may seem straight forward for strings and such, but is less obvious when dealing with nullable booleans, nullable integers, etc.

Nilzor Over a year ago

I'd recommend the first approach (in a div- or hidden input-tag) for better separation of content and code. The minute you need to introduce a <script>-tag in a .cshtml file, you're doing something wrong.

Royi Namir Over a year ago

Off - For those who use webform : use var somevar = "<%=item%>";

jwize Over a year ago

I would say that the best way is data-attr because you don't have any dependencies to have script in your UI code. function Service() { this.data = $("...").data('info'); }; var service = new Service(); Service.prototype = { doSomething: function() { alert(this.data()); } }

Collectives™ on Stack Overflow

passing server side mvc variables to javascript [closed]

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related