Acceder a la propiedad modelo de MVC desde Javascript

Tengo el siguiente modelo que está envuelto en mi modelo de 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; }
}

¿Cómo accedo a una de las propiedades anteriores desde Javascript?

Intenté esto, pero me "indefiní"

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

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 Encodemétodo de 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 el .cshtmlarchivo

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

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

Hay dos tipos de Modelasignaciones de variables de C # a la variable de JavaScript.

1. Asignación de propiedad - los tipos de datos básicos como int, string, DateTime(ex: Model.Name)
2. Asignación de objetos : clases personalizadas o incorporadas (p. Ej. Model, Model.UserSettingsObj)

Veamos los detalles de estas dos tareas.

Para el resto de la respuesta, consideremos el siguiente AppUsermodelo 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 = "<i class='fa fa-users'></i>"
};

Asignación de propiedad

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

1) Sin envolver la asignación de propiedades 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, Rajy Truese consideran variables de JavaScript y, dado que no existen, es un variable undefinederror. Donde en cuanto a la variable dateTime el error esunexpected number números no pueden tener caracteres especiales, las etiquetas HTML se convierten en sus nombres de entidad para que el navegador no mezcle sus valores y el marcado HTML.

2) Ajuste de la asignación de propiedades 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 ajustar la asignación de propiedades entre comillas nos da una sintaxis válida. Pero tenga en cuenta que el número Ageahora es una cadena, por lo que si no lo desea, podemos eliminar las comillas y se representará como un tipo de número.

3) Usar @Html.Rawpero 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, el uso @Html.Raw()en la HTMLcadena nos mostró algún cambio. El HTML se retiene sin cambiar a 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 aún tenemos errores en otras líneas.

4) Usar @Html.Rawy 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 todos los tipos. Pero nuestros HTMLdatos ahora están rotos y esto romperá los scripts. El problema es porque estamos usando comillas simples 'para envolver los datos e incluso los datos tienen comillas simples.

Podemos superar este problema con 2 enfoques.

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

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

2) Escapar del significado del carácter en el código del lado del servidor. Me gusta

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

Conclusión de la asignación de propiedad

• Use comillas para tipos de datos no numéricos.
• No utilice comillas para el tipo de datos numérico.
• Úselo Html.Rawpara interpretar sus datos HTML tal como están.
• Cuide sus datos HTML para escapar de las citas 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 objeto

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, se asignará el valor .ToString()de ese objeto. De ahí el resultado anterior.

2 Asignación de objeto de ajuste entre comillas

var userObj = '@Model'; 

3) Uso Html.Rawsin comillas.

   var userObj = @Html.Raw(Model); 

4) Usar Html.Rawjunto con citas

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

No Html.Rawfue de mucha utilidad para nosotros al asignar un objeto a la variable.

5) Usar 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\"\u003e\u003c/i\u003e"
              };

Vemos algún cambio, vemos que nuestro modelo se está interpretando como un objeto. Pero hemos cambiado esos caracteres especiales entity names. Tampoco es útil utilizar la sintaxis anterior entre comillas. Simplemente obtenemos el mismo resultado entre comillas.

De los documentos de Json.Encode ()

Convierte un objeto de datos en una cadena que está en el formato JSON (JavaScript Object Notation).

Como ya ha encontrado este entity Nameproblema con la asignación de propiedades y si recuerda, lo superamos con el uso de Html.Raw. Así que probemos eso. Vamos a combinar Html.RawyJson.Encode

6) Uso Html.Rawy Json.Encodesin comillas.

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

El resultado es un objeto Javascript válido

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

7) Uso Html.Rawy Json.Encodeentre comillas.

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

Como ve, envolver con comillas nos da datos JSON

Conslusión en la asignación de objetos

• Use Html.Rawy Json.Encodeen combinación para asignar su objeto a la variable javascript como objeto JavaScript .
• Úselo Html.Rawy Json.Encodeenvuélvalo quotespara obtener un JSON

Nota: Si ha observado que 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) formatJSON no contiene un datetipo. Otras opciones para solucionar este problema es añadir 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 el .jsarchivo

La sintaxis de la maquinilla de afeitar no tiene significado en el .jsarchivo y, por lo tanto, no podemos usar directamente nuestro Modelo en un .jsarchivo. Sin embargo, hay una solución.

1) La solución está utilizando variables globales de JavaScript .

Tenemos que asignar el valor a una variable global javascipt restringidos y luego utilizar esta variable dentro de todos bloque de código de sus .cshtmly .jsarchivos. Entonces la sintaxis sería

<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 esto en su lugar, podemos usar las variables userObjy userJsonObjcomo y cuando sea necesario.

Nota: Yo personalmente no sugiero usar variables globales, ya que es muy difícil de mantener. Sin embargo, si no tiene otra opción, puede usarla con una convención de nomenclatura adecuada ... algo así userAppDetails_global.

2) Usando la 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 .cshtmlarchivo.

external.js

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

.cshtml expediente

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

Nota: Su archivo externo debe ser referenciado antes de la secuencia de comandos anterior. De lo contrario, la userDataDependentfunción no está definida.

También tenga en cuenta que la función también debe tener un alcance 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))';

Envolver la propiedad del modelo alrededor de los padres funcionó para mí. Todavía tiene el mismo problema con Visual Studio quejándose del punto y coma, pero funciona.

var closedStatusId = @(Model.ClosedStatusId);

Si se genera el error "ReferenceError: el modelo no está definido" , puede intentar utilizar el siguiente método:

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

Espero que esto ayude...

Sé que es demasiado tarde, pero esta solución funciona perfectamente para .NET Framework y .net core:

@ System.Web.HttpUtility.JavaScriptStringEncode ()