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

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 simplement l'objet FloorPlanSettings, passez simplement la méthode Encode cette propriété:

 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 fichier .cshtml

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

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

Il existe deux types d'affectations de variable c # ( Model ) à la variable JavaScript.

1. Affectation de propriété – Types de données de base comme int , string , DateTime (ex: Model.Name )
2. Affectation d'objet – 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 le modèle AppUser ci-dessous comme 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 assignons 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

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

1) Sans envelopper l'affectation 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, Raj et True sont considérés comme des variables javascript et, comme ils n'existent pas, c'est une erreur variable undefined . Où, pour la date, le temps varialble, l'erreur est unexpected number numériques ne peuvent pas avoir de caractères spéciaux. Les balises HTML sont converties en noms d'entité afin que le navigateur ne mélange pas vos valeurs et le balisage HTML.

2) Emballage de l'affectation des propriétés 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, l'emballage de l'affectation des propriétés entre guillemets nous donne une syntaxe valide. Mais notez que Number Age est maintenant une chaîne, alors, si vous ne voulez pas que nous puissions simplement supprimer les guillemets et qu'il soit rendu comme un type de numéro.

3) Utilisation de @Html.Raw mais sans 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 semblables à ceux de notre cas de test 1. Cependant, l'utilisation de @Html.Raw() sur la chaîne HTML nous a montré un certain changement. Le HTML est conservé sans changer son nom d'entité.

Du docs Html.Raw ()

Wraps HTML markup dans une instance HtmlString de sorte 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 également l'enrouler 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 données HTML sont maintenant interrompues et cela va rompre les scripts. Le problème est dû au fait que nous utilisons des guillemets simples pour envelopper les données et que même les données contiennent des guillemets simples.

Nous pouvons résoudre ce problème avec 2 approches.

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

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

2) Échappez le sens du caractère dans votre code côté serveur. Comme

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

Conclusion de l'affectation des biens

• Utilisez des guillemets pour le type de données non numérique.
• Ne pas utiliser de guillemets pour le type de données numériques.
• Utilisez Html.Raw pour interpréter vos données HTML tel Html.Raw .
• Prenez soin de vos données HTML pour échapper à la signification des citations dans le côté du serveur, ou utilisez une citation différente que dans les données pendant l'affectation à la variable javascript.

---

Affectation d'objet

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

1) Sans envelopper l'affectation d'objets entre guillemets.

  var userObj = @Model; 

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

2 Emballage de l'assignation d'objet entre guillemets

 var userObj = '@Model'; 

3) Utilisation de Html.Raw sans guillemets.

  var userObj = @Html.Raw(Model); 

4) Utilisation de Html.Raw avec des citations

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

Le Html.Raw n'a guère d'utilité pour nous en assignant 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 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 . En outre, l'emballage de la syntaxe ci-dessus entre guillemets est sans utilité. Nous obtenons simplement le même résultat entre guillemets.

Des documents de Json.Encode ()

Convertit un objet de données en une chaîne qui se trouve dans le format de notation d'objet JavaScript (JSON).

Comme vous avez déjà rencontré ce problème de entity Name avec affectation de propriété et si vous vous souvenez, nous l'avons surmonté avec l'utilisation de Html.Raw . Alors, essayons cela. Html.Raw et Json.Encode

6) Utilisation de Html.Raw et Json.Encode . Json.Encode sans 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 de Html.Raw et Json.Encode sous les citations.

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

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

Conslusion sur l'affectation d'objet

• Utilisez Html.Raw et Json.Encode en combintaion pour assigner votre objet à la variable javascript en tant qu'objet JavaScript .
• Utilisez Html.Raw et Json.Encode également l'envelopper dans les quotes pour obtenir un JSON

Remarque: Si vous avez observé le format de données DataTime n'est pas correct. C'est parce que, comme 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 type de date . D'autres options pour résoudre ce problème sont d'ajouter une autre ligne de code pour gérer ce type seul en utilisant javascipt Date () 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 fichier .js

La syntaxe Razor n'a aucun sens dans le fichier .js et, par conséquent, nous ne pouvons pas utiliser directement notre modèle Insisde a .js . Cependant, il existe une solution de contournement.

1) Solution utilise javascript Global variables .

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

 <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> 

Dans ce cas, nous utilisons les variables userObj et userJsonObj au besoin.

Remarque: Personnellement, je ne suggère pas d'utiliser des variables globales car elles sont très difficiles à 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 la fonction () ou de la closure enveloppez tout le code qui dépend des données du modèle dans une fonction. Ensuite, exécutez cette fonction à partir du fichier .cshtml .

external.js

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

Fichier .cshtml

  <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 fonction userDataDependent est indéfinie.

Notez également que la fonction doit également être dans la portée mondiale. Donc, soit une solution, nous devons faire face à des acteurs globaux.

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

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

L'emballage de la propriété modèle autour de parens a fonctionné pour moi. Vous rencontrez toujours le même problème avec Visual Studio en se plaignant du point-virgule, mais cela fonctionne.

 var closedStatusId = @(Model.ClosedStatusId); 

Si "ReferenceError: Modèle n'est pas défini", une erreur est générée, alors 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…