Using Razor within JavaScript

Question

Is it possible or is there a workaround to use Razor syntax within JavaScript that is in a view  cshtml    I am trying to add markers to a Google map    For example  I tried this  but I m getting a ton of compilation errors    lt script type  text javascript  gt          Some JavaScript code here to display map  etc          Now add markers      foreach  var item in Model             var markerlatLng   new google maps LatLng   Model Latitude     Model Longitude            var title      Model Title            var description      Model Description            var contentString     lt h3 gt     title     lt  h3 gt       lt p gt     description     lt  p gt            var infowindow   new google maps InfoWindow               content  contentString                      var marker   new google maps Marker               position  latLng              title  title              map  map              draggable  false                      google maps event addListener marker   click   function                  infowindow open map  marker                      lt  script gt

User · Answer

You re trying to jam a square peg in a round hole   Razor was intended as an HTML-generating template language  You may very well get it to generate JavaScript code  but it wasn t designed for that   For instance  What if Model Title contains an apostrophe  That would break your JavaScript code  and Razor won t escape it correctly by default   It would probably be more appropriate to use a String generator in a helper function  There will likely be fewer unintended consequences of that approach

User · Answer

I just wrote this helper function  Put it in App Code JS cshtml    using System Web Script Serialization  helper Encode object obj          new HtmlString new JavaScriptSerializer   Serialize obj         Then in your example  you can do something like this   var title    JS Encode Model Title     Notice how I don t put quotes around it  If the title already contains quotes  it won t explode  Seems to handle dictionaries and anonymous objects nicely too

User · Answer

I finally found the solution    vbhtml    function razorsyntax            Double          MvcHtmlString Create  var szam     amp  mydoublevariable  amp            alert szam           String        var str     stringvariable       alert str

User · Answer

One thing to add - I found that Razor syntax hilighter  and probably the compiler  interpret the position of the opening bracket differently    lt script type  text javascript  gt      var somevar   new Array          foreach  var item in items             lt ----  placed on a separate line  NOT WORKING  HILIGHTS SYNTAX ERRORS          lt text gt           lt  text gt              foreach  var item in items         lt ----  placed on the same line  WORKING              lt text gt           lt  text gt         lt  script gt

User · Answer

What specific errors are you seeing   Something like this could work better    lt script type  text javascript  gt     now add markers   foreach  var item in Model         lt text gt        var markerlatLng   new google maps LatLng  Model Latitude   Model Longitude         var title      Model Title          var description      Model Description          var contentString     lt h3 gt     title     lt  h3 gt       lt p gt     description     lt  p gt        lt  text gt     lt  script gt    Note that you need the magical  lt text gt  tag after the foreach to indicate that Razor should switch into markup mode

User · Answer

Use the  lt text gt  pseudo-element  as described here  to force the Razor compiler back into content mode    lt script type  text javascript  gt          Some JavaScript code here to display map  etc           Now add markers      foreach  var item in Model             lt text gt              var markerlatLng   new google maps LatLng   Model Latitude     Model Longitude                var title      Model Title                var description      Model Description                var contentString     lt h3 gt     title     lt  h3 gt       lt p gt     description     lt  p gt                var infowindow   new google maps InfoWindow                   content  contentString                              var marker   new google maps Marker                   position  latLng                  title  title                  map  map                  draggable  false                              google maps event addListener marker   click   function                      infowindow open map  marker                            lt  text gt         lt  script gt    Update   Scott Guthrie recently posted about    syntax in Razor  which is slightly less clunky than the  lt text gt  tag if you just have one or two lines of JavaScript code to add  The following approach would probably be preferable  because it reduces the size of the generated HTML   You could even move the addMarker function to a static  cached JavaScript file to further reduce the size     lt script type  text javascript  gt          Some JavaScript code here to display map  etc                 Declare addMarker function     function addMarker latitude  longitude  title  description  map                var latLng   new google maps LatLng latitude  longitude           var contentString     lt h3 gt     title     lt  h3 gt       lt p gt     description     lt  p gt             var infowindow   new google maps InfoWindow               content  contentString                      var marker   new google maps Marker               position  latLng              title  title              map  map              draggable  false                      google maps event addListener marker   click   function                  infowindow open map  marker                             Now add markers      foreach  var item in Model              addMarker  item Latitude   item Longitude    item Title     item Description   map          lt  script gt    Updated the above code to make the call to addMarker more correct   To clarify  the    forces Razor back into text mode  even though addMarker call looks a lot like C  code  Razor then picks up the  item Property syntax to say that it should directly output the contents of those properties   Update 2  It s worth noting that View code really isn t a good place to put JavaScript code  JavaScript code should be placed in a static  js file  and then it should get the data that it needs either from an Ajax call or by scanning data- attributes from the HTML  Besides making it possible to cache your JavaScript code  this also avoids issues with encoding  since Razor is designed to encode for HTML  but not JavaScript   View Code   foreach var item in Model         lt div data-marker   Json Encode item   gt  lt  div gt      JavaScript code      data-marker    each function         var markerData     this  data  marker        addMarker markerData Latitude  markerData Longitude                markerData Description  markerData Title

User · Answer

I prefer   lt  --   --   like a  text     lt script type  text javascript  gt    some javascript here        foreach  var item in itens                      lt  --      var title     item name          -- gt    lt  script gt

User · Answer

The following solution seems more accurate to me than combine JavaScript with Razor  Check this out  https   github com brooklynDev NGon  You can add almost any complex data to ViewBag Ngon and access it in JavaScript  In the controller   public class HomeController   Controller       public ActionResult Index                 var person   new Person   FirstName    John   LastName    Doe   Age   30            ViewBag NGon Person   person          return View              In JavaScript    lt script type  text javascript  gt        function                  button   click function                  var person   ngon Person              var div       output                div html                  div append  FirstName      person FirstName               div append    LastName      person LastName               div append    Age      person Age                        lt  script gt    It s allows any plain old CLR objects  POCOs  that can be serialized using the default JavascriptSerializer

User · Answer

None of the previous solutions work correctly    I have tried all the ways  but it did not give me the expected result    At last I found that there are some errors in the code    And the full code is given below    lt script type  text javascript  gt       var map   new google maps Map document getElementById  map              zoom  10          center  new google maps LatLng 23 00  90 00           mapTypeId  google maps MapTypeId ROADMAP               foreach  var item in Model                 lt text gt              var markerlatLng   new google maps LatLng   item LATITUDE     item LONGITUDE                var title      item EMP ID                var description      item TIME                var contentString     lt h3 gt      Employee    title    was here at   description    lt  h3 gt       lt p gt          lt  p gt                var infowindow   new google maps InfoWindow                      content  contentString                              var marker   new google maps Marker                   position  markerlatLng                  title  title                  map  map                  draggable  false                  content  contentString                              google maps event addListener marker   click    function  marker                    return function                          infowindow setContent marker content                       infowindow open map  marker                                    marker             lt  text gt         lt  script gt

User · Answer

A simple and a good straight-forward example    lt script gt         This gets the username from the Razor engine and puts it        in JavaScript to create a variable I can access from the        client side                It s an odd workaraound  but it works                 var outScript    var razorUserName               User Identity Name                    MvcHtmlString Create outScript    lt  script gt    This creates a script in your page at the location you place the code above which looks like the following    lt script gt         This gets the username from the Razor engine and puts it        in JavaScript to create a variable I can access from        client side                It s an odd workaraound  but it works       var razorUserName    daylight    lt  script gt    Now you have a global JavaScript variable named razorUserName which you can access and use on the client  The Razor engine has obviously extracted the value from  User Identity Name  server-side variable  and put it in the code it writes to your script tag

User · Answer

There is also one more option than    and  lt text gt  lt  text gt    Using  lt script gt  block itself   When you need to do large chunks of JavaScript depending on Razor code  you can do it like this    if Utils FeatureEnabled  Feature           lt script gt             If this feature is enabled      lt  script gt      lt script gt         Other JavaScript code  lt  script gt    Pros of this manner is that it doesn t mix JavaScript and Razor too much  because mixing them a lot will cause readability issues eventually  Also large text blocks are not very readable either

User · Answer

That will work fine  as long as it s in a CSHTML page and not an external JavaScript file   The Razor template engine doesn t care what it s outputting and does not differentiate between  lt script gt  or other tags   However  you need to encode your strings to prevent XSS attacks

[javascript] Using Razor within JavaScript

Examples related to javascript

Examples related to asp.net-mvc

Examples related to razor