Utilisation de Razor dans JavaScript

je viens d'écrire cette fonction d'assistance. Mettez-le dans App_Code/JS.cshtml :

@using System.Web.Script.Serialization
@helper Encode(object obj)
{
    @(new HtmlString(new JavaScriptSerializer().Serialize(obj)));
}

alors dans votre exemple, vous pouvez faire quelque chose comme ceci:

var title = @JS.Encode(Model.Title);

remarquez que je ne mets pas de guillemets autour. Si le titre contient déjà des citations, il n'explosera pas. Semble traiter les dictionnaires et les objets anonymes aussi bien!

vous essayez de coincer une cheville carrée dans un trou rond.

Razor a été conçu comme un langage de modèle générant HTML. Vous pouvez très bien l'obtenir pour générer du code JavaScript, mais il n'a pas été conçu pour cela.

par exemple: et si Model.Title contient une apostrophe? Cela briserait votre code JavaScript, et Razor ne s'en échappera pas correctement par défaut.

Il serait probablement plus approprié d'utiliser une Chaîne générateur dans une fonction d'assistance. Cette approche aura probablement moins de conséquences involontaires.

quelles erreurs spécifiques voyez-vous?

quelque chose comme ça pourrait mieux fonctionner:

<script type="text/javascript">

//now add markers
 @foreach (var item in Model) {
    <text>
      var markerlatLng = new google.maps.LatLng(@Model.Latitude, @Model.Longitude);
      var title = '@(Model.Title)';
      var description = '@(Model.Description)';
      var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>'
    </text>
}
</script>

notez que vous avez besoin de l'étiquette magique <text> après le foreach pour indiquer que le rasoir devrait passer en mode markup.

qui fonctionnera très bien, tant qu'il est dans une page CSHTML et pas un fichier JavaScript externe.

le moteur de modèle de rasoir ne se soucie pas de ce qu'il produit et ne fait pas de différence entre <script> ou d'autres étiquettes.

cependant, vous devez encoder vos chaînes pour éviter les attaques XSS .

je préfère "" comme un "texte>"

<script type="text/javascript">
//some javascript here     

@foreach (var item in itens)
{                 
<!--  
   var title = @(item.name)
    ...
-->

</script>

une chose à ajouter - j'ai trouvé que la syntaxe de Razor hilighter (et probablement le compilateur) interprète la position du crochet d'ouverture différemment:

<script type="text/javascript">
    var somevar = new Array();

    @foreach (var item in items)
    {  // <----  placed on a separate line, NOT WORKING, HILIGHTS SYNTAX ERRORS
        <text>
        </text>
    }

    @foreach (var item in items) {  // <----  placed on the same line, WORKING !!!
        <text>
        </text>
    }
</script>

Un simple et un bon straight-forward exemple:

<script>
    // 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);
</script>

cela crée un script dans votre page à l'endroit où vous placez le code au-dessus qui ressemble à ce qui suit:

<script>
    // 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";
</script>

Maintenant vous avez une variable globale JavaScript nommée razorUserName que vous pouvez accéder et utiliser sur le client. Le moteur Razor a évidemment extrait la valeur de @User.Identity.Name (variable côté serveur) et l'a mise dans le code qu'il écrit à votre script balise.

la solution suivante me semble plus précise que de combiner JavaScript avec Razor. Check this out: https://github.com/brooklynDev/NGon

vous pouvez ajouter presque toutes les données complexes à ViewBag.Ngon et y accéder en JavaScript

dans le contrôleur:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var person = new Person { FirstName = "John", LastName = "Doe", Age = 30 };
        ViewBag.NGon.Person = person;
        return View();
    }
}

En JavaScript:

<script type="text/javascript">
    $(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);
        });
    });
</script>

Il est permet à toute plain old CLR objets (Poco) qui peut être sérialisée en utilisant la valeur par défaut JavascriptSerializer .

il y a aussi une option de plus que @: et <text></text> .

utilisant <script> se bloque.

quand vous avez besoin de faire de grands morceaux de JavaScript selon le code de rasoir, vous pouvez le faire comme ceci:

@if(Utils.FeatureEnabled("Feature")) {
    <script>
        // If this feature is enabled
    </script>
}

<script>
    // Other JavaScript code
</script>

les avantages de cette manière est qu'il ne mélange Pas JavaScript et rasoir trop, parce que les mélanger beaucoup va causer des problèmes de lisibilité éventuellement. Aussi de gros blocs de texte ne sont pas très lisibles.

aucune des solutions précédentes ne fonctionne correctement... J'ai essayé toutes les façons, mais il ne me donne pas le résultat attendu... J'ai enfin trouvé qu'il y avait des erreurs dans le code... Et le code complet est donné ci-dessous.

<script type="text/javascript">

    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)
    {
        <text>
            var markerlatLng = new google.maps.LatLng(@(item.LATITUDE), @(item.LONGITUDE));
            var title = '@(item.EMP_ID)';
            var description = '@(item.TIME)';
            var contentString = '<h3>' + "Employee " +title+ " was here at "+description+ '</h3>' + '<p>'+" "+ '</p>'

            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));
        </text>
    }
</script>

j'ai finalement trouvé la solution (*.vbhtml):

function razorsyntax() {
    /* Double */
    @(MvcHtmlString.Create("var szam =" & mydoublevariable & ";"))
    alert(szam);

    /* String */
    var str = '@stringvariable';
    alert(str);
}