J'ai un .csHtmlfichier -razor avec une fonction javascript qui utilise la @Url.Contentfonction C # à l'intérieur pour l'URL ajax.
Je souhaite déplacer cette fonction vers un .jsfichier référencé de ma vue.

Le problème est que javascript ne "connaît" pas le @symbole et n'analyse pas le code C #.
Existe-t-il un moyen de référencer des .jsfichiers depuis une vue avec le symbole "@"?

Vous pouvez utiliser des data-*attributs HTML5 . Supposons que vous souhaitiez effectuer une action lorsqu'un élément DOM tel qu'un div est cliqué. Alors:

<div id="foo" data-url="@Url.Content("~/foobar")">Click me</div>

puis dans votre fichier javascript séparé, vous pouvez travailler discrètement avec le DOM:

$('#foo').click(function() {
    var url = $(this).data('url');
    // do something with this url
});

De cette façon, vous pourriez avoir une séparation pure entre le balisage et le script sans jamais avoir besoin de balises côté serveur dans vos fichiers javascript.

Eh bien, je viens de trouver un moteur de rasoir sur nuget qui le fait! Le sens résout la @syntaxe!
Son nom est RazorJS .

Le paquet Nuget

Mise à jour 2016:
le package n'a pas été mis à jour pendant 5 ans et le lien du site du projet est mort. Je ne recommande plus aux gens d'utiliser cette bibliothèque.

Une façon d'aborder le problème est:

Ajout d'une vue partielle avec les fonctions javascript à la vue.
De cette façon, vous pouvez utiliser le @symbole et toutes vos javascriptfonctions sont séparées de la vue.

Vous avez deux options:

• Utiliser la valeur comme paramètre dans la fonction et câbler dans la vue
• Créez un espace de noms (au lieu d'une variable de niveau public qui est considérée comme une mauvaise pratique dans JS) et définissez cette valeur en haut de la page, puis utilisez-la dans votre js

Par exemple:

 var MyCompany = 
 {
   MyProject: {
                  MyVariable:""
               }
  };

Et puis à votre avis, définissez-le:

MyCompany.MyProject.MyVariable = @....

METTRE À JOUR

Vous pourriez vous demander qu'aucun n'est bon à cause du couplage, eh bien c'est vrai, vous couplez js et view. C'est pourquoi les scripts doivent ignorer l'emplacement dans lequel ils s'exécutent, c'est donc le symptôme d'une organisation non optimale des fichiers.

Quoi qu'il en soit, il existe une troisième option pour créer un moteur de visualisation et exécuter les fichiers js contre le rasoir et renvoyer les résultats. C'est plus propre mais beaucoup plus lent donc pas recommandé non plus.

Afin d'obtenir la @variable dans votre fichier .js, vous devrez utiliser une variable globale et définir la valeur de cette variable à partir de la vue mvc qui utilise ce fichier .js.

Fichier JavaScript:

var myValue;

function myFunc() {
  alert(myValue);
}

Fichier MVC View:

<script language="text/javascript">
    myValue = @myValueFromModel;
</script>

Assurez-vous simplement que tous les appels à votre fonction se produisent APRÈS que la valeur ait été définie par la vue.

Ce n'est probablement pas la bonne approche. Considérant la séparation des préoccupations. Vous devriez avoir un data injectorsur votre JavaScriptclasse et qui est dans la plupart des cas des données JSON.

Créez un fichier JS dans votre scriptdossier et ajoutez cette référence à votreView

<script src="@Url.Content("~/Scripts/yourJsFile.js")" type="text/javascript"></script>

Maintenant, considérez une JavaScriptclasse littérale dans votre yourJsFile.js:

var contentSetter = {
    allData: {},
    loadData: function (data) {
        contentSetter.allData = eval('(' + data + ')');
    },
    setContentA: function () {
        $("#contentA").html(allData.contentAData);
    },
    setContentB: function () {
        $("#contentB").html(allData.contentAData);
    }
};

Déclarez également une classe

public class ContentData
{
    public string ContentDataA { get; set }
    public string ContentDataB { get; set }
}

Maintenant, Actionfaites ceci:

public ActionResult Index() {
    var contentData = new ContentData();
    contentData.ContentDataA = "Hello";
    contentData.ContentDataB = "World";
    ViewData.Add("contentData", contentData);
}

Et de votre point de vue:

<div id="contentA"></div>
<div id="contentB"></div>

<script type="text/javascript">
    contentSetter.loadData('@Json.Encode((ContentData) ViewData["contentData"])');
    contentSetter.setContentA();
    contentSetter.setContentB();
</script>

J'ai récemment publié un blog sur ce sujet: Générer des fichiers JavaScript externes à l'aide de vues Razor partielles .

Ma solution consiste à utiliser un attribut personnalisé ( ExternalJavaScriptFileAttribute) qui restitue une vue partielle de Razor telle quelle, puis la renvoie sans les <script>balises environnantes . Cela en fait un fichier JavaScript externe valide.

J'enveloppe généralement JS ayant besoin d'accéder aux propriétés du modèle, dans les fonctions, puis je passe le @ quelque chose dans la vue. Par exemple

<script type="text/javascript">
function MyFunction(somethingPresentInTheView) {
  alert(somethingPresentInTheView);
}
</script>

dans la vue, j'ajoute l'invocation de fonction via (juste un exemple):

<input type='button' onclick="MyFunction('@Model.PropertyNeeded')" />

Je pense que vous êtes obligé de mettre ce code JS dans la vue. L'analyseur Razor, pour autant que je sache, ne regardera pas les fichiers .js, donc tout ce que vous avez qui utilise @ne fonctionnera pas. PLus, comme vous l'avez remarqué, Javascript lui-même n'aime pas ce @caractère traîner sans raison, à part, disons, dans une chaîne.