Accès à la propriété du modèle MVC depuis Javascript

Question

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 j'ai obtenu "undefined" (non défini).

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

Answer 1

Vous pouvez prendre l'intégralité de 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 ne voulez que l'objet FloorPlanSettings, passez simplement l'objet Encode cette propriété :

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

Answer 2

Contenu de la réponse

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

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

Comment accéder aux données d'un modèle dans un bloc de code Javascript/Jquery ? .cshtml fichier

Il existe deux types de variables c# ( Model ) aux variables JavaScript.

1. Affectation des biens - Les types de données de base comme int , string , DateTime (ex : Model.Name )
2. Affectation des objets - Classes personnalisées ou intégrées (ex : Model , Model.UserSettingsObj )

Examinons les détails de ces deux missions.

Pour le reste de la réponse, considérons ce qui suit AppUser Modèle à titre d'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>"
};

Affectation des biens

Utilisons une syntaxe différente pour l'affectation et observons les résultats.

1) Sans mettre l'affectation des biens 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, Raj y True sont considérées comme des variables javascript et comme elles n'existent pas, c'est une variable undefined erreur. En ce qui concerne la variable dateTime, l'erreur est la suivante unexpected number Les balises HTML sont converties en noms d'entités afin que le navigateur ne confonde pas vos valeurs et le balisage HTML.

2) Envelopper l'affectation des biens dans les citations.

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'affectation de propriété entre guillemets nous donne une syntaxe valide. Mais notez que le nombre Age est maintenant une chaîne, donc si vous ne voulez pas cela, nous pouvons simplement enlever les guillemets et il sera rendu comme un type de nombre.

3) Utilisation de @Html.Raw mais 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 du cas d'essai 1. Cependant, en utilisant @Html.Raw() sur le HTML La chaîne nous a montré du changement. Le HTML est conservé sans modification de ses noms d'entités.

Extrait 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 encore des erreurs dans d'autres lignes.

4) Utilisation de @Html.Raw et 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 bons avec tous les types. Mais notre HTML est maintenant cassé et cela cassera les scripts. Le problème vient du fait 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 grâce à deux approches.

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

  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 biens

• Utilisez des guillemets pour les types de données non numériques.
• Ne pas utiliser de guillemets pour les données numériquesType.
• Utilice Html.Raw pour interpréter vos données HTML telles quelles.
• Prenez soin de vos données HTML, soit en échappant les guillemets du côté serveur, soit en utilisant un guillemet différent de celui des données lors de l'affectation à la variable javascript.

---

Affectation des objets

Utilisons une syntaxe différente pour l'affectation et observons les résultats.

1) Sans mettre l'affectation d'objet entre guillemets.

  var userObj = @Model; 

Lorsque vous assignez un objet c# à une variable javascript, la valeur de la variable .ToString() de ce projet sera attribué. D'où le résultat ci-dessus.

2 Mise entre guillemets de l'affectation d'un objet

var userObj = '@Model'; 

3) Utilisation de Html.Raw sans guillemets.

   var userObj = @Html.Raw(Model); 

4) Utilisation de Html.Raw ainsi que des citations

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

El Html.Raw n'était pas d'une grande utilité pour nous lors de l'assignation d'un objet à une variable.

5) Utilisation de 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 un certain changement, nous voyons que notre modèle est interprété comme un objet. Mais nous avons changé ces caractères spéciaux en entity names . De même, mettre la syntaxe ci-dessus entre guillemets n'est pas d'une grande utilité. Nous obtenons simplement le même résultat entre guillemets.

D'après les documents de Json.Encode()

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

Comme vous l'avez déjà rencontré entity Name problème avec l'affectation des biens et, si vous vous souvenez, nous l'avons surmonté en recourant à Html.Raw . Essayons donc. Combinons Html.Raw y Json.Encode

6) Utilisation de Html.Raw y Json.Encode sans guillemets.

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

Le résultat est un Objet Javascript

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

7) Utilisation de Html.Raw y Json.Encode entre guillemets.

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

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

Conslusion sur l'affectation des objets

• Utilice Html.Raw y Json.Encode en combinaison pour assigner votre objet à une variable javascript comme Objet JavaScript .
• Utilice Html.Raw y Json.Encode l'envelopper également dans quotes pour obtenir un JSON

Nota: Si vous avez observé que le format des données DataTime n'est pas correct. Cela est dû au fait que, comme nous l'avons dit précédemment Converts a data object to a string that is in the JavaScript Object Notation (JSON) format et JSON ne contient pas de date type. D'autres options pour résoudre ce problème consistent à ajouter une autre ligne de code pour gérer ce type seul en utilisant la fonction javascipt Date() objet

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

---

---

Comment accéder aux données d'un modèle dans un bloc de code Javascript/Jquery ? .js fichier

La syntaxe du rasoir n'a aucun sens dans .js et donc nous ne pouvons pas utiliser directement notre modèle pour insister sur une .js fichier. Il existe toutefois une solution de contournement.

1) La solution consiste à utiliser javascript Variables globales .

Nous devons assigner la valeur à une variable javascipt globale et ensuite utiliser cette variable dans tous les blocs de code de l'application .cshtml y .js des fichiers. 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 userObj y userJsonObj au fur et à mesure des besoins.

Nota: Personnellement, je ne suggère pas d'utiliser des variables globales car cela devient très difficile à maintenir. 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) Utilisation de fonction() o closure Enveloppez tout le code qui dépend des données du modèle dans une fonction. Et ensuite, exécutez cette fonction à partir du .cshtml fichier .

external.js

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

.cshtml fichier

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

Nota: Votre fichier externe doit être référencé avant le script ci-dessus. Sinon, le userDataDependent est indéfinie.

Notez également que la fonction doit être dans la portée globale également. Donc, quelle que soit la solution retenue, nous devons faire face à des joueurs dont la portée est globale.

Answer 3

Essayez ceci : (vous avez oublié les guillemets simples)

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

Answer 4

Le fait d'enrouler la propriété du modèle autour de parenthèses a fonctionné pour moi. Vous avez toujours le même problème avec Visual Studio qui se plaint du point-virgule, mais cela fonctionne.

var closedStatusId = @(Model.ClosedStatusId);

Answer 5

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

@System.Web.HttpUtility.JavaScriptStringEncode()