Accesso alla proprietà del modello MVC da Javascript

Puoi prendere l’intero modello lato server e trasformarlo in un object Javascript procedendo come segue:

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

Nel tuo caso se vuoi solo l’object FloorPlanSettings, passa semplicemente al metodo Encode quella proprietà:

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

Contenuto della risposta

1) Come accedere ai dati del modello nel blocco di codice Javascript / Jquery nel file .cshtml

2) Come accedere ai dati del modello nel blocco di codice Javascript / Jquery nel file .js

Come accedere ai dati del modello nel blocco di codice Javascript / Jquery nel file .cshtml

Esistono due tipi di assegnazioni della variabile c # ( Model ) alla variabile JavaScript.

1. Assegnazione di proprietà – Model.Name dati di base come int , string , DateTime (es: Model.Name )
2. Assegnazione di oggetti – Classi personalizzate o integrate (ad esempio Model , Model.UserSettingsObj )

Consente di esaminare i dettagli di questi due compiti.

Per il resto della risposta, prendere in considerazione il seguente Modello di AppUser come esempio.

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

E i valori che assegniamo a questo modello sono

 AppUser appUser = new AppUser { Name = "Raj", IsAuthenticated = true, LoginDateTime = DateTime.Now, Age = 26, UserIconHTML = "" }; 

Assegnazione di proprietà

Consente di utilizzare una syntax diversa per l’assegnazione e osservare i risultati.

1) Senza includere l’assegnazione della proprietà tra virgolette.

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

Come puoi vedere ci sono un paio di errori, Raj e True sono considerati variabili javascript e dal momento che non esistono sono errori variable undefined . Dove per quanto riguarda la data Time varialble l’errore è unexpected number numeri non possono avere caratteri speciali, i tag HTML vengono convertiti nei suoi nomi di entity framework in modo che il browser non misuri i tuoi valori e il markup HTML.

2) Disporre l’assegnazione di proprietà in Quotes.

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

I risultati sono validi, quindi il wrapping dell’assegnazione delle proprietà tra virgolette ci fornisce una syntax valida. Ma nota che Number Age ora è una stringa, quindi se non vuoi che possiamo solo rimuovere le virgolette e sarà reso come un tipo di numero.

3) Usando @Html.Raw ma senza avvolgerlo tra virgolette

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

I risultati sono simili al nostro caso di test 1. Tuttavia, l’uso di @Html.Raw() sulla stringa HTML ci ha mostrato alcune modifiche. L’HTML viene mantenuto senza modificare i nomi delle quadro.

Dai documenti Html.Raw ()

Avvolge il markup HTML in un’istanza HtmlString in modo che venga interpretato come markup HTML.

Ma abbiamo ancora errori in altre righe.

4) Usando @Html.Raw e anche avvolgendolo tra virgolette

 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)'; 

I risultati sono buoni con tutti i tipi. Ma i nostri dati HTML sono ora infranti e questo interromperà gli script. Il problema è che stiamo usando le virgolette singole per avvolgere i dati e anche i dati hanno virgolette singole.

Possiamo superare questo problema con 2 approcci.

1) usa le doppie virgolette " " per avvolgere la parte HTML. Poiché i dati interni hanno solo virgolette singole. (Assicurati che dopo il wrapping con virgolette non ci sia " all’interno dei dati troppo)

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

2) Sfuggi al significato del personaggio nel tuo codice lato server. Piace

  UserIconHTML = "" 

Conclusione dell’assegnazione di proprietà

• Utilizza le virgolette per dati non numerici.
• Non utilizzare le virgolette per dati numerici.
• Usa Html.Raw per interpretare i tuoi dati HTML così come sono.
• Prenditi cura dei tuoi dati HTML per evitare le virgolette significato nel lato server, o utilizzare una citazione diversa rispetto ai dati durante l’assegnazione alla variabile javascript.

---

Assegnazione dell’object

Consente di utilizzare una syntax diversa per l’assegnazione e osservare i risultati.

1) Senza incapsulare l’assegnazione dell’object tra virgolette.

  var userObj = @Model; 

Quando assegni l’object ac # alla variabile javascript, verrà assegnato il valore di .ToString() di quell’object. Da qui il risultato sopra.

2 Assegnare l’assegnazione dell’object tra virgolette

 var userObj = '@Model'; 

3) Utilizzo di Html.Raw senza virgolette.

  var userObj = @Html.Raw(Model); 

4) Utilizzo di Html.Raw insieme alle virgolette

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

Html.Raw stato molto utile per noi durante l’assegnazione di un object alla variabile.

5) Utilizzo di Json.Encode() senza virgolette

 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" }; 

Vediamo alcuni cambiamenti, vediamo che il nostro modello viene interpretato come un object. Ma abbiamo quei caratteri speciali cambiati in entity names . Anche il wrapping della syntax sopra riportata tra virgolette non è molto utile. Otteniamo semplicemente lo stesso risultato tra virgolette.

Dai documenti di Json.Encode ()

Converte un object dati in una stringa che si trova nel formato JSON (JavaScript Object Notation).

Come hai già riscontrato questo problema di entity Name con assegnazione di proprietà e se ricordi di averlo superato con l’uso di Html.Raw . Quindi proviamoci. Consente di combinare Html.Raw e Json.Encode

6) Utilizzo di Html.Raw e Json.Encode senza virgolette.

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

Il risultato è un object Javascript valido

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

7) Utilizzo di Html.Raw e Json.Encode tra virgolette.

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

Come vedi, il wrapping con le virgolette ci fornisce dati JSON

Conslusione sull’assegnazione degli oggetti

• Usa Html.Raw e Json.Encode nella combinazione per assegnare il tuo object alla variabile javascript come object JavaScript .
• Usa Html.Raw e Json.Encode anche racchiuderlo tra quotes per ottenere un JSON

Nota: se si è osservato che il formato dati DataTime non è corretto. Questo perché, come già detto, Converts a data object to a string that is in the JavaScript Object Notation (JSON) format e JSON non contiene un tipo di date . Altre opzioni per risolvere questo problema è aggiungere un’altra riga di codice per gestire questo tipo da solo usando l’object javascipt Date ()

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

---

---

Come accedere ai dati del modello nel blocco di codice Javascript / Jquery nel file .js

La syntax del razor non ha significato nel file .js e quindi non possiamo usare direttamente il nostro modello insisde un file .js . Tuttavia c’è una soluzione alternativa.

1) La soluzione sta usando le variabili globali javascript .

Dobbiamo assegnare il valore a una variabile javascipt con scope globale e quindi utilizzare questa variabile all’interno di tutto il blocco di codice dei file .cshtml e .js . Quindi la syntax sarebbe

Con questo posto possiamo usare le variabili userObj e userJsonObj come e quando necessario.

Nota: personalmente non suggerisco di utilizzare le variabili globali in quanto diventa molto difficile per la manutenzione. Tuttavia, se non hai altra opzione, puoi usarla con userAppDetails_global convenzione di denominazione .. qualcosa come userAppDetails_global .

2) Uso della funzione () o closure Avvolgere tutto il codice che dipende dai dati del modello in una funzione. E quindi eseguire questa funzione dal file .cshtml .

external.js

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

file .cshtml

Nota: il file esterno deve essere referenziato prima dello script precedente. Altrimenti la funzione userDataDependent non è definita.

Si noti inoltre che la funzione deve essere anch’essa in ambito globale. Quindi, entrambe le soluzioni devono essere affrontate con giocatori con obiettivi globali.

prova questo: (ti sei perso le virgolette singole)

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

Avvolgere la proprietà del modello attorno a Parens ha funzionato per me. Hai ancora lo stesso problema con Visual Studio che si lamenta del punto e virgola, ma funziona.

 var closedStatusId = @(Model.ClosedStatusId); 

Se viene generato un errore “ReferenceError: Model is not defined” , potresti provare a utilizzare il seguente metodo:

 $(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 ; } }); 

Spero che questo ti aiuti…