How to set javascript variables using MVC4 with Razor

Question

Can someone format the code below so that I can set srcript variables with c  code using razor   The below does not work  i ve got it that way to make is easy for someone to help     int proID   123  int nonProID   456     lt script type  text javascript  gt                lt text gt         var nonID   nonProID      var proID   proID      window nonID    nonProID      window proID  proID        lt  text gt     lt  script gt    I am getting a design time error

User · Answer

This is how I solved the problem     int proID   123  int nonProID   456     lt script type  text javascript  gt  var nonID   Number  nonProID   var proID   Number  proID    lt  script gt    It is self-documenting and it doesn t involve conversion to and from text     Note  be careful to use the Number   function not create new Number   objects - as the exactly equals operator may behave in a non-obvious way   var y   new Number 123      Note incorrect usage of  new  var x   new Number 123   alert y     123      displays false alert x    y      displays false

User · Answer

You should take a look at the output that your razor page is resulting  Actually  you need to know what is executed by server-side and client-side  Try this          int proID   123       int nonProID   456      lt script gt       var nonID    nonProID      var proID    proID      window nonID    nonProID      window proID    proID    lt  script gt    The output should be like this     Depending what version of Visual Studio you are using  it point some highlights in the design-time for views with razor

User · Answer

I ve been looking into this approach   function getServerObject serverObject      if  typeof serverObject      undefined         return null        return serverObject     var itCameFromDotNet   getServerObject  dotNetObject     To me this seems to make it safer on the JS side    worst case you end up with a null variable

User · Answer

Since razor syntax errors can become problematic while you re working on the view  I totally get why you d want to avoid them   Here s a couple other options    lt script type  text javascript  gt          Model Count is an int     var count     Model Count       var countInt   parseInt   Model ActiveLocsCount     lt  script gt    The quotes act as delimiters  so the razor parser is happy  But of course your C  int becomes a JS string in the first statement   For purists  the second option might be better   If somebody has a better way of doing this without the razor syntax errors  in particular maintaining the type of the var  I d love to see it

User · Answer

It works if you do something like this   var proID    proID   0    Which produces code that is something like   var proID   4   0    A bit odd for sure  but no more fake syntax errors at least  Sadly the errors are still reported in VS2013  so this hasn t been properly addressed  yet

User · Answer

This should cover all major types   public class ViewBagUtils       public static string ToJavascriptValue dynamic val                if  val    null  return  null           if  val is string  return val          if  val is bool  return val ToString   ToLower            if  val is DateTime  return val ToString            if  double TryParse val ToString    out double dval   return dval ToString             throw new ArgumentException  Could not convert value               And in your  cshtml file inside the  lt script gt  tag    using Namespace Of ViewBagUtils const someValue    ViewBagUtils ToJavascriptValue ViewBag SomeValue     Note that for string values  you ll have to use the  ViewBagUtils expression inside single  or double  quotes  like so   const someValue     ViewBagUtils ToJavascriptValue ViewBag SomeValue

User · Answer

I ve seen several approaches to working around the bug  and I ran some timing tests to see what works for speed  http   jsfiddle net 5dwwy    Approaches    Direct assignment  In this approach  the razor syntax is directly assigned to the variable   This is what throws the error   As a baseline  the JavaScript speed test simply does a straight assignment of a number to a variable   Pass through  Number  constructor  In this approach  we wrap the razor syntax in a call to the  Number  constructor  as in  Number  ViewBag Value     ParseInt  In this approach  the razor syntax is put inside quotes and passed to the  parseInt  function   Value-returning function  In this approach  a function is created that simply takes the razor syntax as a parameter and returns it   Type-checking function  In this approach  the function performs some basic type checking  looking for null  basically  and returns the value if it isn t null     Procedure   Using each approach mentioned above  a for-loop repeats each function call 10M times  getting the total time for the entire loop   Then  that for-loop is repeated 30 times to obtain an average time per 10M actions   These times were then compared to each other to determine which actions were faster than others   Note that since it is JavaScript running  the actual numbers other people receive will differ  but the importance is not in the actual number  but how the numbers compare to the other numbers   Results   Using the Direct assignment approach  the average time to process 10M assignments was 98 033ms   Using the Number constructor yielded 1554 93ms per 10M   Similarly  the parseInt method took 1404 27ms   The two function calls took 97 5ms for the simple function and 101 4ms for the more complex function   Conclusions   The cleanest code to understand is the Direct assignment   However  because of the bug in Visual Studio  this reports an error and could cause issues with Intellisense and give a vague sense of being wrong     The fastest code was the simple function call  but only by a slim margin   Since I didn t do further analysis  I do not know if this difference has a statistical significance   The type-checking function was also very fast  only slightly slower than a direct assignment  and includes the possibility that the variable may be null   It s not really practical  though  because even the basic function will return undefined if the parameter is undefined  null in razor syntax    Parsing the razor value as an int and running it through the constructor were extremely slow  on the order of 15x slower than a direct assignment   Most likely the Number constructor is actually internally calling parseInt  which would explain why it takes longer than a simple parseInt   However  they do have the advantage of being more meaningful  without requiring an externally-defined  ie somewhere else in the file or application  function to execute  with the Number constructor actually minimizing the visible casting of an integer to a string   Bottom line  these numbers were generated running through 10M iterations   On a single item  the speed is incalculably small   For most  simply running it through the Number constructor might be the most readable code  despite being the slowest

User · Answer

I found a very clean solution that allows separate logic and GUI   in your razor  cshtml page try this    lt body id  myId  data-my-variable  myValue  gt      your page code here   lt  body gt    in your  js file or  ts  if you use typeScript  to read stored value from your view put some like this  jquery library is required        myId   data  my-variable

User · Answer

This sets a JavaScript var for me directly from a web config defined appSetting    var pv     System Web Configuration WebConfigurationManager AppSettings  pv

User · Answer

int proID   123   int nonProID   456      lt script gt   var nonID     nonProID   var proID     proID   window nonID     nonProID   window proID     proID     lt  script gt

User · Answer

Not so much an answer as a cautionary tale  this was bugging me as well - and I thought I had a solution by pre-pending a zero and using the        syntax  i e your code would have been   var nonID   0  nonProID   var proID   0  proID     Getting output like   var nonId   0123    What I didn t realise was that this is how JavaScript  version 3  represents octal base-8 numbers and is actually altering the value  Additionally  if you are using the  use strict   command then it will break your code entirely as octal numbers have been removed   I m still looking for a proper solution to this

User · Answer

One of the easy way is    lt input type  hidden  id  SaleDateValue  value   ViewBag SaleDate    gt   lt input type  hidden  id  VoidItem  value   Model SecurityControl  VoidItem   ToString      gt    And then get the value in javascript   var SaleDate   document getElementById  SaleDateValue   value  var Item   document getElementById  VoidItem   value

User · Answer

I use a very simple function to solve syntax errors in body of JavaScript codes that mixed with Razor codes     function n num  return num    var nonID   n  nonProID   var proID  n  proID

[javascript] How to set javascript variables using MVC4 with Razor

Examples related to javascript

Examples related to c#

Examples related to asp.net-mvc

Examples related to asp.net-core

Examples related to .net-core