Accéder à la propriété de modèle de MVC à partir de Javascript

J'ai le modèle suivant qui est enveloppé dans mon modèle de vue

public class FloorPlanSettingsModel
{
    public int Id { get; set; }
    public int? MainFloorPlanId { get; set; }
    public string ImageDirectory { get; set; }
    public string ThumbnailDirectory { get; set; }
    public string IconsDirectory { get; set; }
}

Comment accéder à l'une des propriétés ci-dessus à partir de Javascript?

J'ai essayé ceci, mais je suis devenu "indéfini"

var floorplanSettings = "@Model.FloorPlanSettings";
alert(floorplanSettings.IconsDirectory);

Vous pouvez prendre tout votre modèle côté serveur et le transformer en un objet Javascript en procédant comme suit:

var model = @Html.Raw(Json.Encode(Model));

Dans votre cas, si vous voulez juste l'objet FloorPlanSettings, passez simplement la Encodeméthode that property:

var floorplanSettings = @Html.Raw(Json.Encode(Model.FloorPlanSettings));

Contenu de la réponse

1) Comment accéder aux données du modèle dans le bloc de code Javascript / Jquery dans le .cshtmlfichier

2) Comment accéder aux données du modèle dans le bloc de code Javascript / Jquery dans le .jsfichier

Comment accéder aux données du modèle dans le bloc de code Javascript / Jquery dans le .cshtmlfichier

Il existe deux types d' Modelaffectations de variable c # ( ) à une variable JavaScript.

1. Cession de propriété - types de données de base comme int, string, DateTime(ex: Model.Name)
2. Affectation d'objets - personnalisés ou des cours encastrables (ex: Model, Model.UserSettingsObj)

Regardons dans les détails de ces deux affectations.

Pour le reste de la réponse, considérons le AppUsermodèle ci-dessous comme un exemple.

public class AppUser
{
    public string Name { get; set; }
    public bool IsAuthenticated { get; set; }
    public DateTime LoginDateTime { get; set; }
    public int Age { get; set; }
    public string UserIconHTML { get; set; }
}

Et les valeurs que nous attribuons à ce modèle sont

AppUser appUser = new AppUser
{
    Name = "Raj",
    IsAuthenticated = true,
    LoginDateTime = DateTime.Now,
    Age = 26,
    UserIconHTML = "<i class='fa fa-users'></i>"
};

Attribution de propriété

Permet d'utiliser une syntaxe différente pour l'affectation et d'observer les résultats.

1) Sans placer l'attribution de propriété entre guillemets

var Name = @Model.Name;  
var Age = @Model.Age;
var LoginTime = @Model.LoginDateTime; 
var IsAuthenticated = @Model.IsAuthenticated;   
var IconHtml = @Model.UserIconHTML;  

Comme vous pouvez le voir, il y a quelques erreurs, Rajet Trueest considéré comme des variables javascript et comme elles n'existent pas, c'est une variable undefinederreur. Là où, comme pour la variable dateTime, l'erreur est que les unexpected numbernombres ne peuvent pas avoir de caractères spéciaux, les balises HTML sont converties en ses noms d'entité afin que le navigateur ne mélange pas vos valeurs et le balisage HTML.

2) Affectation de propriété enveloppante dans les devis.

var Name = '@Model.Name';
var Age = '@Model.Age';
var LoginTime = '@Model.LoginDateTime';
var IsAuthenticated = '@Model.IsAuthenticated';
var IconHtml = '@Model.UserIconHTML'; 

Les résultats sont valides, donc mettre l'attribution de propriété entre guillemets nous donne une syntaxe valide. Mais notez que le nombre Ageest maintenant une chaîne, donc si vous ne voulez pas que nous puissions simplement supprimer les guillemets et il sera rendu comme un type de nombre.

3) En utilisant @Html.Rawmais sans le mettre entre guillemets

 var Name = @Html.Raw(Model.Name);
 var Age = @Html.Raw(Model.Age);
 var LoginTime = @Html.Raw(Model.LoginDateTime);
 var IsAuthenticated = @Html.Raw(Model.IsAuthenticated);
 var IconHtml = @Html.Raw(Model.UserIconHTML);

Les résultats sont similaires à ceux de notre cas de test 1. Cependant, l'utilisation @Html.Raw()de la HTMLchaîne nous a montré des changements. Le HTML est conservé sans changer ses noms d'entité.

À partir de la documentation Html.Raw ()

Enveloppe le balisage HTML dans une instance HtmlString afin qu'il soit interprété comme un balisage HTML.

Mais nous avons toujours des erreurs dans d'autres lignes.

4) Utiliser @Html.Rawet également l'envelopper entre guillemets

var Name ='@Html.Raw(Model.Name)';
var Age = '@Html.Raw(Model.Age)';
var LoginTime = '@Html.Raw(Model.LoginDateTime)';
var IsAuthenticated = '@Html.Raw(Model.IsAuthenticated)';
var IconHtml = '@Html.Raw(Model.UserIconHTML)';

Les résultats sont bons avec tous les types. Mais nos HTMLdonnées sont maintenant cassées et cela cassera les scripts. Le problème est que nous utilisons des guillemets simples 'pour envelopper les données et même les données ont des guillemets simples.

Nous pouvons surmonter ce problème avec 2 approches.

1) utilisez des guillemets doubles " "pour envelopper la partie HTML. Comme les données internes n'ont que des guillemets simples. (Assurez-vous qu'après l'encapsulation avec des guillemets doubles, il n'y en a pas non plus "dans les données)

  var IconHtml = "@Html.Raw(Model.UserIconHTML)";

2) Échappez à la signification du caractère dans votre code côté serveur. Comme

  UserIconHTML = "<i class=\"fa fa-users\"></i>"

Conclusion de la cession de propriété

• Utilisez des guillemets pour les types de données non numériques.
• N'utilisez pas de guillemets pour les types de données numériques.
• Utilisez Html.Rawpour interpréter vos données HTML telles quelles.
• Prenez soin de vos données HTML pour soit échapper à la signification des guillemets côté serveur, soit utiliser une citation différente de celle des données lors de l'affectation à la variable javascript.

Affectation d'objets

Permet d'utiliser une syntaxe différente pour l'affectation et d'observer les résultats.

1) Sans placer l'attribution d'objets entre guillemets.

  var userObj = @Model; 

Lorsque vous affectez un objet ac # à une variable javascript, la valeur .ToString()de cet objet sera attribuée. D'où le résultat ci-dessus.

2 Mise en place de l'attribution d'objets entre guillemets

var userObj = '@Model'; 

3) Utilisation Html.Rawsans guillemets.

   var userObj = @Html.Raw(Model); 

4) Utilisation Html.Rawavec des guillemets

   var userObj = '@Html.Raw(Model)'; 

Cela Html.Rawne nous a guère servi lors de l'affectation d'un objet à une variable.

5) Utilisation Json.Encode()sans guillemets

var userObj = @Json.Encode(Model); 

//result is like
var userObj = {"Name":"Raj",
               "IsAuthenticated":true,
               "LoginDateTime":"\/Date(1482572875150)\/",
               "Age":26,
               "UserIconHTML":"\u003ci class=\"fa fa-users\"\u003e\u003c/i\u003e"
              };

Nous voyons des changements, nous voyons que notre modèle est interprété comme un objet. Mais nous avons changé ces caractères spéciaux en entity names. Mettre également la syntaxe ci-dessus entre guillemets n'est pas d'une grande utilité. Nous obtenons simplement le même résultat entre guillemets.

À partir de la documentation de Json.Encode ()

Convertit un objet de données en une chaîne au format JavaScript Object Notation (JSON).

Comme vous avez déjà rencontré ce entity Nameproblème avec l'attribution de propriété et si vous vous en souvenez, nous l'avons surmonté avec l'utilisation de Html.Raw. Alors essayons ça. Permet de combiner Html.RawetJson.Encode

6) En utilisant Html.Rawet Json.Encodesans guillemets.

var userObj = @Html.Raw(Json.Encode(Model));

Le résultat est un objet Javascript valide

 var userObj = {"Name":"Raj",
     "IsAuthenticated":true,
     "LoginDateTime":"\/Date(1482573224421)\/",
     "Age":26,
     "UserIconHTML":"\u003ci class=\"fa fa-users\"\u003e\u003c/i\u003e"
 };

7) Utilisation Html.Rawet Json.Encodeentre guillemets.

var userObj = '@Html.Raw(Json.Encode(Model))';

Comme vous le voyez, l'emballage avec des guillemets nous donne des données JSON

Conslusion sur l'attribution d'objets

• Utilisez Html.Rawet Json.Encodeen combinaison pour affecter votre objet à une variable javascript en tant qu'objet JavaScript .
• Utilisez Html.Rawet Json.Encodeenveloppez-le également quotespour obtenir un JSON

Remarque: si vous avez observé que le format de données DataTime n'est pas correct. En effet, comme indiqué précédemment, Converts a data object to a string that is in the JavaScript Object Notation (JSON) formatet JSON ne contient pas de datetype. D' autres options pour résoudre ce problème est d'ajouter une autre ligne de code pour gérer ce type seul , en date javascipt () objet

var userObj.LoginDateTime = new Date('@Html.Raw(Model.LoginDateTime)'); 
//without Json.Encode

Comment accéder aux données du modèle dans le bloc de code Javascript / Jquery dans le .jsfichier

La syntaxe de Razor n'a aucune signification dans le .jsfichier et nous ne pouvons donc pas utiliser directement notre modèle dans un .jsfichier. Cependant, il existe une solution de contournement.

1) La solution utilise des variables globales javascript .

Nous devons attribuer la valeur à une variable javascipt à portée globale, puis utiliser cette variable dans tous les blocs de code de vos fichiers .cshtmlet .js. La syntaxe serait donc

<script type="text/javascript">
  var userObj = @Html.Raw(Json.Encode(Model)); //For javascript object
  var userJsonObj = '@Html.Raw(Json.Encode(Model))'; //For json data
</script>

Avec cela en place, nous pouvons utiliser les variables userObjet au userJsonObjfur et à mesure des besoins.

Remarque: Personnellement, je ne suggère pas d'utiliser des variables globales car cela devient très difficile pour la maintenance. Cependant, si vous n'avez pas d'autre option, vous pouvez l'utiliser avec une convention de dénomination appropriée .. quelque chose comme userAppDetails_global.

2) En utilisant la fonction () ou closure Envelopper tout le code qui dépend des données du modèle dans une fonction. Et puis exécutez cette fonction à partir du .cshtmlfichier.

external.js

 function userDataDependent(userObj){
  //.... related code
 }

.cshtml fichier

 <script type="text/javascript">
  userDataDependent(@Html.Raw(Json.Encode(Model))); //execute the function     
</script>

Remarque: votre fichier externe doit être référencé avant le script ci-dessus. Sinon, la userDataDependentfonction n'est pas définie.

Notez également que la fonction doit également avoir une portée globale. Donc, quelle que soit la solution, nous devons traiter avec des acteurs mondiaux.

essayez ceci: (vous avez manqué les guillemets simples)

var floorplanSettings = '@Html.Raw(Json.Encode(Model.FloorPlanSettings))';

Emballer la propriété du modèle autour des parens a fonctionné pour moi. Vous obtenez toujours le même problème avec Visual Studio se plaignant du point-virgule, mais cela fonctionne.

var closedStatusId = @(Model.ClosedStatusId);

Si l' erreur «ReferenceError: Model is not defined» est déclenchée, vous pouvez essayer d'utiliser la méthode suivante:

$(document).ready(function () {

    @{  var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
         var json = serializer.Serialize(Model);
    }

    var model = @Html.Raw(json);
    if(model != null && @Html.Raw(json) != "undefined")
    {
        var id= model.Id;
        var mainFloorPlanId = model.MainFloorPlanId ;
        var imageDirectory = model.ImageDirectory ;
        var iconsDirectory = model.IconsDirectory ;
    }
});

J'espère que cela t'aides...

Je sais qu'il est trop tard mais cette solution fonctionne parfaitement pour le framework .net et le noyau .net:

@ System.Web.HttpUtility.JavaScriptStringEncode ()