Accesso alla proprietà del modello MVC da Javascript

Ho il seguente modello che è racchiuso nel mio modello di visualizzazione

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à sopra indicate da Javascript?

Ho provato questo, ma mi sono "indefinito"

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

È possibile prendere l'intero modello lato server e trasformarlo in un oggetto Javascript nel modo seguente:

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

Nel tuo caso se vuoi solo l'oggetto FloorPlanSettings, passa semplicemente il Encodemetodo che 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 .cshtmlfile

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

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

Esistono due tipi di Modelassegnazioni di variabili c # ( ) alla variabile JavaScript.

1. Assegnazione di proprietà - tipi di dati di base come int, string, DateTime(es: Model.Name)
2. Assegnazione Object - personalizzato o classi incorporati (es: Model, Model.UserSettingsObj)

Vediamo nei dettagli di questi due incarichi.

Per il resto della risposta consideriamo il AppUsermodello seguente 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 questo modello sono

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

Assegnazione della proprietà

Consente di utilizzare una sintassi diversa per l'assegnazione e osservare i risultati.

1) Senza racchiudere 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, Rajed Trueè considerato come variabili javascript e poiché non esistono è un variable undefinederrore. Laddove per quanto riguarda la variabile dateTime, l'errore è che i unexpected numbernumeri non possono avere caratteri speciali, i tag HTML vengono convertiti nei nomi delle entità in modo che il browser non mischi i valori e il markup HTML.

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

I risultati sono validi, quindi racchiudendo l'assegnazione della proprietà tra virgolette si ottiene una sintassi valida. Ma nota che il numero Ageora è una stringa, quindi se non vuoi che possiamo semplicemente rimuovere le virgolette e verrà visualizzato come un tipo di numero.

3) Usando @Html.Rawma senza racchiuderlo 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'utilizzo @Html.Raw()sulla HTMLstringa ci ha mostrato alcune modifiche. L'HTML viene mantenuto senza cambiare i nomi delle sue entità.

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.Rawe 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 HTMLdati ora sono rotti e questo romperà gli script. Il problema è perché stiamo usando virgolette singole 'per racchiudere i dati e anche i dati hanno virgolette singole.

Possiamo superare questo problema con 2 approcci.

1) usa le virgolette doppie " "per avvolgere la parte HTML. Poiché i dati interni hanno solo virgolette singole. (Assicurati che dopo aver inserito le virgolette doppie non ci siano anche "dei dati)

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

2) Sfuggire al significato del carattere nel codice lato server. Piace

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

Conclusione dell'assegnazione della proprietà

• Utilizzare le virgolette per tipo di dati non numerico.
• Non utilizzare le virgolette per dataType numerico.
• Utilizzare Html.Rawper interpretare i dati HTML così come sono.
• Prenditi cura dei tuoi dati HTML per sfuggire alle virgolette che significano sul lato server, oppure usa una citazione diversa rispetto ai dati durante l'assegnazione alla variabile javascript.

Assegnazione dell'oggetto

Consente di utilizzare una sintassi diversa per l'assegnazione e osservare i risultati.

1) Senza avvolgere l'assegnazione degli oggetti tra virgolette.

  var userObj = @Model; 

Quando si assegna un oggetto ac # alla variabile javascript, .ToString()verrà assegnato il valore di quell'espulsione. Da qui il risultato sopra.

2 Avvolgimento dell'assegnazione degli oggetti tra virgolette

var userObj = '@Model'; 

3) Utilizzo Html.Rawsenza virgolette.

   var userObj = @Html.Raw(Model); 

4) Utilizzo Html.Rawcon virgolette

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

Non ci è Html.Rawstato di grande utilità durante l'assegnazione di un oggetto alla variabile.

5) Utilizzo 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 qualche cambiamento, vediamo che il nostro Modello viene interpretato come un oggetto. Ma abbiamo quei personaggi speciali cambiati in entity names. Anche racchiudere la suddetta sintassi tra virgolette non è di alcuna utilità. Otteniamo semplicemente lo stesso risultato tra virgolette.

Dai documenti di Json.Encode ()

Converte un oggetto dati in una stringa nel formato JSON (JavaScript Object Notation).

Poiché hai già riscontrato questo entity Nameproblema con l'assegnazione della proprietà e se ricordi che lo abbiamo superato con l'uso di Html.Raw. Quindi proviamolo. Consente di combinare Html.RaweJson.Encode

6) Utilizzo Html.Rawe Json.Encodesenza virgolette.

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

Il risultato è un oggetto 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 Html.Rawe Json.Encodetra virgolette.

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

Come vedi, il wrapping tra virgolette ci fornisce dati JSON

Conslusione sull'assegnazione degli oggetti

• Utilizzare Html.Rawe Json.Encodein combinazione per assegnare l'oggetto alla variabile javascript come oggetto JavaScript .
• Usa Html.Rawe Json.Encodeavvolgilo anche all'interno quotesper ottenere un JSON

Nota: se hai osservato che il formato dei dati DataTime non è corretto. Questo perché, come detto in precedenza, Converts a data object to a string that is in the JavaScript Object Notation (JSON) formatJSON non contiene un datetipo. Altre opzioni per risolvere questo problema sono l'aggiunta di un'altra riga di codice per gestire questo tipo da solo utilizzando l' oggetto Date () javascipt

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

La sintassi del rasoio non ha alcun significato nel .jsfile e quindi non possiamo usare direttamente il nostro modello insisde un .jsfile. Tuttavia, esiste una soluzione alternativa.

1) La soluzione utilizza variabili globali javascript .

Dobbiamo assegnare il valore a una variabile javascipt con ambito globale e quindi utilizzare questa variabile all'interno di tutti i blocchi di codice del tuo .cshtmle dei tuoi .jsfile. Quindi la sintassi sarebbe

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

Con questo in atto possiamo usare le variabili userObje userJsonObjcome 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 una convenzione di denominazione adeguata ... qualcosa del genere userAppDetails_global.

2) Utilizzando la funzione () o closure avvolgere tutto il codice che dipende dai dati del modello in una funzione. E quindi eseguire questa funzione dal .cshtmlfile.

external.js

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

.cshtml file

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

Nota: è necessario fare riferimento al file esterno prima dello script precedente. Altrimenti la userDataDependentfunzione non è definita.

Si noti inoltre che la funzione deve essere anche nell'ambito globale. Pertanto, entrambe le soluzioni devono essere gestite da attori globali.

prova questo: (hai 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 l'errore "RiferimentoErrore: modello non definito" , è possibile 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...

So che è troppo tardi, ma questa soluzione funziona perfettamente sia per il framework .net che per il core .net:

@ System.Web.HttpUtility.JavaScriptStringEncode ()