Accès à la propriété du modèle MVC depuis Javascript

Question

J'ai le modèle suivant qui est enveloppé dans mon modèle de vue

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

Comment accéder à l'une des propriétés ci-dessus à partir de Javascript ?

J'ai essayé ceci, mais j'ai obtenu "undefined" (non défini).

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

Answer 1

Pour MVC 4

@model Inventory.Models.PurchaseVModel
@{
    ViewData["Title"] = "Add";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var jsonItems = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model.Items);
}

@section scripts{
    <script>
        $(document).ready(function () {
            var allItem =  @Html.Raw(jsonItems);
        console.log(allItem);
    });
    </script>
}

.Net Core 3.1

@model Inventory.Models.PurchaseVModel
@{
    ViewData["Title"] = "Add";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var jsonItems = Newtonsoft.Json.JsonConvert.SerializeObject(Model.Items);
}

@section scripts{
    <script>
        $(document).ready(function () {
            var allItem =  @Html.Raw(jsonItems);
        console.log(allItem);
    });
    </script>
}

Answer 2

J'ai utilisé ce qui suit pour convertir un objet Model transmis par le contrôleur dans la vue Razor en objet JSON en JavaScript. Cela a parfaitement fonctionné pour moi en ASP.Net Core.

<script>
    let jsonData = @Html.Raw(Json.Serialize(Model))
    console.log(jsonData)
</script>

Answer 3

Si "ReferenceError : Le modèle n'est pas défini" est soulevée, alors vous pouvez essayer d'utiliser la méthode suivante :

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

J'espère que cela vous aidera...

Answer 4

En plus de l'analyse approfondie de @Rajshekar. réponse je préfère une méthode d'aide qui renvoie un fichier IHtmlString que Razor reconnaît comme du HTML déjà encodé. Ensuite, le Html.Raw() n'est pas nécessaire, ce qui améliore la lisibilité.

public static class JSHelper
{
    /// <summary>
    /// Encode a value as a JSON value or object for use in JavaScript code.
    /// </summary>
    /// <param name="value">Value to encode.</param>
    /// <returns>HTML string containing the JavaScript value or object.</returns>
    public static IHtmlString JsonEncode(object value)
    {
        return MvcHtmlString.Create(Json.Encode(value));
    }
}

Alors je peux juste utiliser, obj = @JSHelper.JsonEncode(myObject); dans ma section JavaScript.

Inclure un using dans votre vue ou mettez à jour view/web.config pour résoudre l'espace de nom dans la vue.

Answer 5

Voici donc comment faire dans les pages razor de .net core.

@section scripts
{
    <script>
        $(document).ready(function () {
            leaveStatusDictionary = @Html.Raw(Json.Serialize(Model.LeaveStatusDictionary));
        });

        function GetStatusName(status) {
            return window.leaveStatusDictionary[status];
        }
    </script>
}

Notez ce qui suit.

1. Je n'ai pas utilisé le mot-clé var avant leaveStatusDictionary. C'est donc maintenant une propriété de l'objet window. J'ai donc pu y accéder dans une autre fonction js - GetStatusName que vous voyez ici.

2. LeaveStatusDictionary est une propriété de la classe modèle de type Dictionary<int, string>.