Comment intégrer le code Razor C# dans un fichier .js?

Question

devez intégrer javascript bloc de code avec

<script type='text/javascript'> 
    ... 
</script> 

Mais le code Razor ne compilera pas dans un fichier .js, inclus dans un fichier .cshtml.

Comment faire pour que cela fonctionne? Ou y a-t-il une autre manière élégante d'avoir un effet similaire?

Merci.

Answer 1

Quand je fais face à ce problème, parfois, je fournirai une fonction dans le fichier .js qui est accessible dans le fichier .cshtml ...

// someFile.js 
var myFunction = function(options){ 
    // do stuff with options 
}; 

// razorFile.cshtml 
<script> 
    window.myFunction = new myFunction(@model.Stuff); 
    // If you need a whole model serialized then use... 
    window.myFunction = new myFunction(@Html.Raw(Json.Encode(model))); 
</script> 

Pas nécessairement la meilleure option, mais il fera si vous devez le faire ...

L'autre chose que vous pourriez peut-être essayer utilise les attributs des données sur vos éléments HTML comme la façon dont jQuery.validate.unobtrusive fait ...

//someFile.js 
var options = $("#stuff").data('stuff'); 

// razorFile.cshtml 
<input type="hidden" id="stuff" data-stuff="@model.Stuff" /> 

Answer 2

Vous ne pouvez pas. Vous ne devriez même pas essayer. Gardez-les séparés. Cela vaut pour l'inverse, mais vous devriez regarder dans Unobtrusive JavaScript. Ce modèle de conception appliqué tout au long du projet est une excellente idée.

Answer 3

Même si je suis d'accord que vous devriez réfléchir à deux fois sur l'utilisation de Razor dans vos fichiers Javascript, il y a un paquet Nuget qui peut vous aider. Ça s'appelle RazorJS. L'auteur du paquet a un blog post à ce sujet, qui explique comment l'utiliser.

Answer 4

Peut-être que je peux fournir une solution de rechange utile, en fonction de ce que vous souhaitez accomplir.

J'ai été tenté de trouver un moyen d'évaluer les expressions de rasoir dans un fichier de script java. Je voulais associer un gestionnaire d'événements jQuery click à des soumissions avec une classe spécifique que l'on trouve sur plusieurs pages. Cela devrait être fait dans un gestionnaire d'événement prêt pour le document jQuery. Cet événement de clic effectuerait un appel ajax. L'adresse URL de ceux-ci devrait être l'application relative, et non absolue, dans le cas où l'application vit au-dessous du niveau de la racine. Donc, je voulais utiliser quelque chose comme

$(document).ready(function() { 
    $('input[type="submit"].checkit)').click(function (e) { 
     $.ajax({ 
      type: 'POST', 
      url: '@Url.Content("~/checkit")', //Razor expression here 
      dataType: 'json', 
      success: function (data) { 
       if (!data) { 
        e.preventDefault(); 
        handleResponse(data); 
       } 
      }, 
      data: null, 
      async: false 
     }); 
    }); 
}); 

Je résolu ce problème en enveloppant le code dans une fonction Checkit et déplacer l'appel à la vue de la mise en page:

 $(document).ready(function() { 
      Checkit('@Url.Content("~/checkit")'); 
     }); 

La plupart du code javascript est encore en un fichier javascript.

Answer 5

Voici un exemple de page Web Razor (pas une vue MVC, bien que similaire) qui va servir de Javascript. Bien sûr, il est atypique d'écrire dynamiquement des fichiers Javascript, mais voici néanmoins un exemple. Je l'ai utilisé une fois dans le cas où je voulais fournir des données JSON et d'autres choses qui étaient chères à calculer et à modifier rarement - donc le navigateur pouvait l'inclure et le mettre en cache comme un fichier JS normal. L'astuce ici est juste pour définir le Response.ContentType et ensuite utiliser quelque chose comme les balises Razor <text> pour votre javascript.

@{ 
Response.ContentType = "text/javascript"; 
Response.Cache.SetLastModified(System.Diagnostics.Process.GetCurrentProcess().StartTime); 
Response.Cache.SetExpires(System.DateTime.Now.Date.AddHours(28)); 
Response.Cache.SetCacheability(System.Web.HttpCacheability.Public); 
<text> 
var someJavaScriptData = @someSortOfObjectConvertedToJSON; 
function something(whatever){ 
} 
</text> 
} 

Vous pouvez ensuite l'inclure comme si dans l'autre fichier Razor:

<script src="MyRazorJavascriptFile.cshtml"></script> 

Answer 6

Et qu'en incluant un .cshtml qui ne contient que js?

parent .csthml

@RenderPage("_scripts.cshtml") 

_scripts.cshtml qui contient js

<script type="text/javascript"> 
alert('@Datetime.ToString()'); 
</script>