I have my script.js into the folder script.
I'd like to manage, into that script, some C# variable, from a Web Form (e.g. <%= myString = 3 %>).
I think this is not possible, but maybe can I do it in some way? Thank you
-
1Why not just emit it in the MVC cshtml page, and pass it to the function?leppie– leppie2012-06-12 09:29:42 +00:00Commented Jun 12, 2012 at 9:29
-
As I specified, I use WebForms, not MVC.markzzz– markzzz2012-06-12 09:31:44 +00:00Commented Jun 12, 2012 at 9:31
Add a comment
|
2 Answers
Javascript is client side executed code, and C# is server side executed code. So you can't strictly make a "variable" visible, as they're two completely different code platforms/runtimes, running on two different computers. However you can still marshal the data between them in a few different ways.
- Write a web service and call it via AJAX
- Populate a control or your URL for your page with your data, and query it via the Javascript DOM API (or via some wrapper library like jQuery)
An example of the 2nd (since you asked):
<!-- Somewhere in your page -->
<span style="visibility:hidden" id="myData"><%= myString %></span>
// In Javascript, using jQuery:
var myData = $('#myData').text();
answered Jun 12, 2012 at 9:30
Merlyn Morgan-Graham
59.4k16 gold badges131 silver badges189 bronze badges
3 Comments
Merlyn Morgan-Graham
The third way to "get a variable into your Javascript" would be to do some sort of code-gen for that script, similar to how your HTML pages are rendered/textually substituted before being delivered to the client. I don't know how to do this, so if someone else wants to provide that answer then I'll let them :)
Rawling
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "someuniquekey", "mystring = '3';", true); (Obviously you'd want to put something dynamic in place of '3'.)
markzzz
The Rawling solution is brillant! Thank you, also if I don't understand what type/control/key mean :)
If the variable is directly related to a particular element on the page then you should definitely consider using the HTML5 data-* attributes to store the value. Imagine the variable pertains to the an anchor element, you could output like so:
<a href="something" id="myLink" data-my-var="5">Blah</a>
You can then access the variables with jQuery like so $("#myLink").data("myVar") (note the camel case). jQuery will attempt to convert value to the correct type. If you want the raw value then just use the attr jQuery method like this $("#myLink").attr("data-my-var") (note the attribute name has not changed).
Alternatively you could do the following in your server-side code to output to your page:
<script type="text/javascript">
var myVar = <%= someVariableToOutput %>;
</script>
As long as this code is output above your dependent script it will be accessible as with any other JS variable.
Finally, you could execute an AJAX request when the page is loading and get the variable that way (though this may not be applicable if the data is only available during the main request)
Hope that helps
2 Comments
Merlyn Morgan-Graham
+1 for the script block. That should have occurred to me (note the comments on my answer) :) Also the HTML 5 data stuff is good info I didn't know about.
WickyNilliams
No problem, the script block is kind of the legacy approach, it works but it's far from ideal (more script blocks mean more page load blocking for the browser). For that reason, I tend to favour the
data-* approach. jQuery is even helpful enough that if you stick some JSON in a data-* attribute it will automatically parse it into an object for you. I've used this technique to pass not entire objects to the front-end! Obviously the use of data-* all depends on the data being relevant to a particular element. MS leverage data-* for their unobtrusive validation in MVC