Accéder à une propriété Model dans un fichier javascript?

Est-il possible d'accéder à un Modèle de propriété dans un fichier Javascript externe?

par exemple, Dans "somescript.js" fichier

var currency = '@Model.Currency';
alert(currency);

Sur mon point de Vue

<script src="../../Scripts/somescript.js" type="text/javascript">

Ce qui ne fonctionne pas, mais si j'ai mis le javascript directement dans la vue à l'intérieur des balises de script, puis il ne travail? Cela signifie avoir à mettre le code dans la page tout le temps au lieu de charger le fichier de script externe comme ceci:

@model MyModel;

<script lang=, type=>
var currency = '@Model.Currency';
alert(currency);
</script>

Est-il un moyen de contourner cela?

source d'informationauteur BlueChippy

  1. 9

    Il n'y a aucun moyen de mettre en œuvre MVC /Rasoir code en JS fichiers.

    Vous devez définir la variable de données dans votre code HTML (dans le .cshtml fichiers), et de ce point de vue conceptuel OK et ne pas violer la séparation des préoccupations (générée par le Serveur HTML ou code de script client) parce que si vous pensez à ce sujet, ces valeurs de la variable sont d'un serveur de préoccupation.

    Prendre un coup d'oeil à cette (partielle mais agréable) solution de contournement: À l'aide de C# en ligne à l'intérieur de Fichier Javascript dans Framework MVC

  2. 11

    Je me suis attaquée à ce problème en utilisant des attributs de données, avec jQuery. Il est très lisible le code, et sans la nécessité d'une vue partielle ou d'exécution statique javascript par l'intermédiaire d'un ViewEngine. Le fichier JavaScript est entièrement statique et sera mis en cache normalement.

    Index.cshtml:

    @model Namespace.ViewModels.HomeIndexViewModel
<h2>
    Index
</h2>

@section scripts
{
    <script id="Index.js" src="~/Path/To/Index.js"
        data-action-url="@Url.Action("GridData")"
        data-relative-url="@Url.Content("~/Content/Images/background.png")"
        data-sort-by="@Model.SortBy
        data-sort-order="@Model.SortOrder
        data-page="@ViewData["Page"]"
        data-rows="@ViewData["Rows"]"></script>
}

    Index.js:

    jQuery(document).ready(function ($) {
    //import all the variables from the model
    var $vars = $('#Index\\.js').data();

    alert($vars.page);
    alert($vars.actionUrl); //Note: hyphenated names become camelCased
});

    _Layout.cshtml (facultatif, mais une bonne habitude):

    <body>
    <!-- html content here. scripts go to bottom of body -->

    @Scripts.Render("~/bundles/js")
    @RenderSection("scripts", required: false)
</body>
  3. 2

    Ce que vous pourriez faire est de passer le rasoir balises en tant que variable.

    Dans le Fichier de rasoir>

    var currency = '@Model.Currency';
doAlert(currency);

    dans le fichier JS >

    function doAlert(curr){
   alert(curr);
}
  4. 1

    Essayer JavaScriptModel ( http://jsm.codeplex.com ):

    Il suffit d'ajouter le code suivant à votre contrôleur de l'action:

    this.AddJavaScriptVariable("Currency", Currency);

    Maintenant, vous pouvez accéder à la variable "Monnaie" en JavaScript.

    Si cette variable devrait être disponible sur le trou du site, le mettre dans un filtre. Un exemple sur la façon d'utiliser JavaScriptModel à partir d'un filtre peut être trouvée dans la documentation.

  5. 0

    Vous pouvez toujours essayer RazorJs. C'est à peu près résout pas être en mesure d'utiliser un modèle dans vos fichiers js RazorJs

  6. 0

    Ce que j'ai fait était de créer un js objet à l'aide de l'Invocation de la Méthode de motif, vous pouvez ensuite appeler à partir du fichier js externe. Comme js utilise des variables globales, je l'encapsuler afin de garantir l'absence de conflits à partir d'autres bibliothèques js.
    Exemple:
    Dans la vue 

    @section scripts{
    <script>
        var thisPage = {
            variableOne: function () { return '@Model.One'; },
            variableTwo: function () { return '@ViewBag.Two'; }            
        };
    </script>
    @Scripts.Render("~/Scripts/PathToExternalScriptFile.js")   
}

    Maintenant à l'intérieur de la page externe vous pouvez ensuite récupérer les données avec un protégé de la portée afin de s'assurer qu'il n'entre pas en conflit avec d'autres variables globales en js.

    console.log('VariableOne = ' + thisPage.variableOne());
console.log('VariableTwo = ' + thisPage.variableTwo());