Ho il seguente modello che è incluso nel mio modello di vista
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; } }
Come posso accedere a una delle proprietà di cui sopra da Javascript?
Ho provato questo, ma ho ottenuto “indefinito”
var floorplanSettings = "@Model.FloorPlanSettings"; alert(floorplanSettings.IconsDirectory);
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
.cshtml
Esistono due tipi di assegnazioni della variabile c # ( Model
) alla variabile JavaScript.
Model.Name
dati di base come int
, string
, DateTime
(es: Model.Name
) 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 = "" };
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à
Html.Raw
per interpretare i tuoi dati HTML così come sono. 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
Html.Raw
e Json.Encode
nella combinazione per assegnare il tuo object alla variabile javascript come object JavaScript . 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
.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…