Accediendo a la propiedad del modelo de MVC desde Javascript

Te damos la bienvenida a nuestra web, aquí vas a encontrar la resolución que buscas.

Solución:

Puede tomar todo su modelo del lado del servidor y convertirlo en un objeto Javascript haciendo lo siguiente:

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

En su caso, si solo desea el objeto FloorPlanSettings, simplemente pase el Encode método esa propiedad:

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

Contenido de la respuesta

1) Cómo acceder a los datos del modelo en el bloque de código Javascript / Jquery en .cshtml expediente

2) Cómo acceder a los datos del modelo en el bloque de código Javascript / Jquery en .js expediente

Cómo acceder a los datos del modelo en el bloque de código Javascript / Jquery en .cshtml expediente

Hay dos tipos de variable c # (Model) asignaciones a la variable JavaScript.

1. Asignación de propiedad – Tipos de datos básicos como int, string, DateTime (ex: Model.Name)
2. Asignación de objetos – Clases personalizadas o incorporadas (por ejemplo: Model, Model.UserSettingsObj)

Veamos los detalles de estas dos asignaciones.

Para el resto de la respuesta, consideremos lo siguiente AppUser Modelo como ejemplo.

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; 

Y los valores que asignamos a este modelo son

AppUser appUser = new AppUser

    Name = "Raj",
    IsAuthenticated = true,
    LoginDateTime = DateTime.Now,
    Age = 26,
    UserIconHTML = ""
;

Asignación de propiedad

Usemos una sintaxis diferente para la asignación y observemos los resultados.

1) Sin envolver la asignación de propiedad entre comillas.

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

Como puede ver, hay un par de errores, Raj y True se considera que son variables de JavaScript y, dado que no existen, es un variable undefined error. Donde en cuanto a la variable dateTime el error es unexpected number los números no pueden tener caracteres especiales. Las etiquetas HTML se convierten en sus nombres de entidad para que el navegador no confunda sus valores y el marcado HTML.

2) Envolviendo la asignación de propiedad en Cotizaciones.

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

Los resultados son válidos, por lo que envolver la asignación de propiedad entre comillas nos da una sintaxis válida. Pero tenga en cuenta que el Número Age ahora es un stringEntonces, si no lo desea, podemos eliminar las comillas y se representará como un tipo de número.

3) Utilizando @Html.Raw pero sin envolverlo entre comillas

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

Los resultados son similares a nuestro caso de prueba 1. Sin embargo, al usar @Html.Raw()sobre el HTML string nos mostró algún cambio. El HTML se conserva sin cambiar sus nombres de entidad.

De los documentos Html.Raw ()

Envuelve el marcado HTML en una instancia de HtmlString para que se interprete como marcado HTML.

Pero todavía tenemos errores en otras líneas.

4) Utilizando @Html.Raw y también envolverlo entre comillas

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

Los resultados son buenos con todo tipo. Pero nuestra HTML los datos ahora están dañados y esto romperá los scripts. El problema es que usamos comillas simples ' para envolver los datos e incluso los datos tienen comillas simples.

Podemos superar este problema con 2 enfoques.

1) usa comillas dobles " " para envolver la parte HTML. Como los datos internos solo tienen comillas simples. (Asegúrese de que después de envolver con comillas dobles no haya " dentro de los datos también)

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

2) Escapa del significado de los caracteres en el código del lado del servidor. Igual que

  UserIconHTML = ""

Conclusión de la cesión de propiedad

• Utilice comillas para dataType no numérico.
• No utilice comillas para dataType numérico.
• Usar Html.Raw para interpretar sus datos HTML como están.
• Cuide sus datos HTML para escapar de las comillas que significan en el lado del servidor, o use una cita diferente a la de los datos durante la asignación a la variable javascript.

---

Asignación de objetos

Usemos una sintaxis diferente para la asignación y observemos los resultados.

1) Sin envolver la asignación de objetos entre comillas.

  var userObj = @Model; 

Cuando asigna un objeto ac # a la variable javascript, el valor del .ToString() de ese oject será asignado. De ahí el resultado anterior.

2 Envolver la asignación de objetos entre comillas

var userObj = '@Model'; 

3) Utilizando Html.Raw sin comillas.

   var userObj = @Html.Raw(Model); 

4) Utilizando Html.Raw junto con citas

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

los Html.Raw no nos sirvió de mucho al asignar un objeto a una variable.

5) Utilizando Json.Encode() sin comillas

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"u003eu003c/iu003e"
              ;

Vemos algunos cambios, vemos que nuestro modelo está siendo interpretado como un objeto. Pero tenemos esos caracteres especiales cambiados a entity names. Además, incluir la sintaxis anterior entre comillas no sirve de mucho. Simplemente obtenemos el mismo resultado entre comillas.

De los documentos de Json.Encode ()

Convierte un objeto de datos en un string que está en el formato de notación de objetos JavaScript (JSON).

Como ya te has encontrado con esto entity Name problema con la asignación de propiedad y, si recuerda, lo superamos con el uso de Html.Raw. Así que probemos eso. Vamos a combinar Html.Raw y Json.Encode

6) Utilizando Html.Raw y Json.Encode sin comillas.

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

El resultado es válido Objeto Javascript

 var userObj = "Name":"Raj",
     "IsAuthenticated":true,
     "LoginDateTime":"/Date(1482573224421)/",
     "Age":26,
     "UserIconHTML":"u003ci class="fa fa-users"u003eu003c/iu003e"
 ;

7) Utilizando Html.Raw y Json.Encode entre comillas.

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

Como ves, envolver con comillas nos da una Datos JSON

Conslusión en la asignación de objetos

• Usar Html.Raw y Json.Encode en combinación para asignar su objeto a la variable de JavaScript como Objeto JavaScript.
• Usar Html.Raw y Json.Encode también envuélvelo dentro quotes conseguir un JSON

Nota: Si ha observado, el formato de datos DataTime no es correcto. Esto se debe a que, como se dijo anteriormente Converts a data object to a string that is in the JavaScript Object Notation (JSON) format y JSON no contiene un date escribe. Otras opciones para solucionar esto es agregar otra línea de código para manejar este tipo solo usando javascipt Fecha () objeto

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

---

---

Cómo acceder a los datos del modelo en el bloque de código Javascript / Jquery en .js expediente

La sintaxis de Razor no tiene sentido en .js archivo y, por lo tanto, no podemos utilizar directamente nuestro modelo en un .js expediente. Sin embargo, hay una solución.

1) La solución está usando Variables globales de javascript.

Tenemos que asignar el valor a una variable javascipt de ámbito global y luego usar esta variable dentro de todos los bloques de código de su .cshtml y .js archivos. Entonces la sintaxis sería

Con esto en su lugar, podemos usar las variables userObj y userJsonObj como y cuando sea necesario.

Nota: Personalmente, no sugiero el uso de variables globales, ya que se vuelve muy difícil de mantener. Sin embargo, si no tiene otra opción, puede usarla con una convención de nomenclatura adecuada … algo como userAppDetails_global.

2) Utilizando función() o closure
Envuelva todo el código que depende de los datos del modelo en una función. Y luego ejecute esta función desde el .cshtml expediente .

external.js

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

.cshtml expediente

Nota: Se debe hacer referencia a su archivo externo antes de la secuencia de comandos anterior. De lo contrario el userDataDependent la función no está definida.

También tenga en cuenta que la función también debe estar en el ámbito global. Entonces, cualquiera de las soluciones, tenemos que lidiar con jugadores de alcance global.

prueba esto: (te perdiste las comillas simples)

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

---

---

Utiliza Nuestro Buscador