Dostęp do właściwości modelu MVC z poziomu JavaScript

Mam następujący model, który jest zawinięty w moim modelu widoku

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

Jak uzyskać dostęp do jednej z powyższych właściwości z poziomu JavaScript?

Próbowałem tego, ale otrzymałem „nieokreślony”

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

Możesz wziąć cały model po stronie serwera i przekształcić go w obiekt JavaScript, wykonując następujące czynności:

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

W twoim przypadku, jeśli chcesz tylko obiekt FloorPlanSettings, po prostu przekaż Encodemetodę tę właściwość:

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

Treść odpowiedzi

1) Jak uzyskać dostęp do danych modelu w bloku kodu Javascript / Jquery w .cshtmlpliku

2) Jak uzyskać dostęp do danych modelu w bloku kodu Javascript / Jquery w .jspliku

Jak uzyskać dostęp do danych modelu w bloku kodu Javascript / Jquery w .cshtmlpliku

Istnieją dwa typy Modelprzypisań zmiennej języka C # ( ) do zmiennej JavaScript.

1. Przypisanie nieruchomość - Podstawowe typy danych podoba int, string, DateTime(np Model.Name)
2. Przypisanie obiektu - klasy niestandardowe lub wbudowane (np .: Model, Model.UserSettingsObj)

Przyjrzyjmy się szczegółom tych dwóch zadań.

W pozostałej części odpowiedzi rozważmy poniższy AppUserModel jako przykład.

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

A wartości, które przypisujemy temu Modelowi, to

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

Cesja własności

Użyjmy innej składni do przypisania i obserwujmy wyniki.

1) Bez zawijania przypisania właściwości w cudzysłowie.

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

Jak widać, istnieje kilka błędów Raji Truesą uważane za zmienne javascript, a ponieważ nie istnieją, jest to variable undefinedbłąd. Tam, gdzie w przypadku zmiennej dateTime błąd jest taki, że unexpected numberliczby nie mogą mieć znaków specjalnych, tagi HTML są konwertowane na nazwy jednostek, aby przeglądarka nie myliła twoich wartości i znaczników HTML.

2) Zawijanie przypisania właściwości w cudzysłowach.

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

Wyniki są prawidłowe, więc zawijanie przypisania właściwości w cudzysłów daje nam prawidłową składnię. Ale pamiętaj, że liczba Agejest teraz ciągiem, więc jeśli nie chcesz, możemy po prostu usunąć cudzysłowy, a zostanie on wyrenderowany jako typ liczbowy.

3) Używanie, @Html.Rawale bez zawijania go w cudzysłów

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

Wyniki są podobne do naszego przypadku testowego 1. Jednak użycie @Html.Raw()na HTMLłańcuchu dało nam pewne zmiany. Kod HTML jest zachowywany bez zmiany nazw jednostek.

Z dokumentacji Html.Raw ()

Otacza znaczniki HTML w wystąpieniu HtmlString, aby były interpretowane jako znaczniki HTML.

Ale nadal mamy błędy w innych wierszach.

4) Używanie @Html.Rawi zawijanie go w cudzysłów

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

Wyniki są dobre dla wszystkich typów. Ale nasze HTMLdane są teraz uszkodzone, a to zepsuje skrypty. Problem polega na tym, że 'do zawijania danych używamy pojedynczych cudzysłowów, a nawet dane mają pojedyncze cudzysłowy.

Możemy rozwiązać ten problem za pomocą 2 podejść.

1) użyj podwójnych cudzysłowów, " "aby zawinąć część HTML. Ponieważ dane wewnętrzne mają tylko pojedyncze cudzysłowy. (Upewnij się, że po zawinięciu w cudzysłów nie ma "również danych)

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

2) Usuń znaczenie znaku w kodzie po stronie serwera. Lubić

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

Zawarcie cesji własności

• Użyj cudzysłowów dla nienumerycznych typów danych.
• Nie używaj cudzysłowów dla liczbowego typu danych.
• Służy Html.Rawdo interpretowania danych HTML bez zmian.
• Zadbaj o swoje dane HTML, aby albo uniknąć cudzysłowów, co oznacza po stronie serwera, albo użyć innego cytatu niż w danych podczas przypisywania do zmiennej javascript.

Przypisanie obiektu

Użyjmy innej składni do przypisania i obserwujmy wyniki.

1) Bez zawijania przypisania obiektu w cudzysłów.

  var userObj = @Model; 

Kiedy przypiszesz obiekt ac # do zmiennej javascript .ToString(), zostanie przypisana wartość tego obiektu. Stąd powyższy wynik.

2 Zawijanie przypisania obiektu w cudzysłowie

var userObj = '@Model'; 

3) Używanie Html.Rawbez cudzysłowów.

   var userObj = @Html.Raw(Model); 

4) Używając Html.Rawrazem z cudzysłowami

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

Html.RawByło żadnego większego wykorzystania dla nas podczas przypisywania obiektu do zmiennej.

5) Używanie Json.Encode()bez cudzysłowów

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

Widzimy jakąś zmianę, widzimy, że nasz Model jest interpretowany jako obiekt. Ale mamy te znaki specjalne zamienione na entity names. Również zawijanie powyższej składni w cudzysłów nie ma większego sensu. Po prostu otrzymujemy ten sam wynik w cudzysłowie.

Z dokumentacji Json.Encode ()

Konwertuje obiekt danych na ciąg w formacie JavaScript Object Notation (JSON).

Ponieważ napotkałeś już ten entity Nameproblem przy przypisywaniu własności i jeśli pamiętasz, rozwiązaliśmy go za pomocą Html.Raw. Więc spróbujmy tego. Połączmy Html.RawiJson.Encode

6) Używając Html.Rawi Json.Encodebez cudzysłowów.

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

Rezultatem jest prawidłowy obiekt JavaScript

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

7) Używanie Html.Rawiw Json.Encodecudzysłowach.

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

Jak widać, owijanie cudzysłowami daje nam dane JSON

Uwagi dotyczące przypisania obiektu

• Użyj Html.Rawi Json.Encodew połączeniu, aby przypisać swój obiekt do zmiennej javascript jako obiekt JavaScript .
• Użyj, Html.Rawa Json.Encodetakże zawiń go, quotesaby uzyskać JSON

Uwaga: jeśli zauważyłeś, że format danych DataTime jest nieprawidłowy. Dzieje się tak, ponieważ, jak wspomniano wcześniej, Converts a data object to a string that is in the JavaScript Object Notation (JSON) formatJSON nie zawiera datetypu. Inne opcje, aby naprawić to, aby dodać kolejną linię kodu do obsługi tego typu sam używając JavaScipt Date () obiektu

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

Jak uzyskać dostęp do danych modelu w bloku kodu Javascript / Jquery w .jspliku

Składnia Razor nie ma znaczenia w .jspliku i dlatego nie możemy bezpośrednio użyć naszego modelu w .jspliku. Istnieje jednak obejście.

1) Rozwiązanie wykorzystuje zmienne globalne javascript .

Musimy przypisać wartość do zmiennej javascipt o zasięgu globalnym, a następnie użyć tej zmiennej we wszystkich blokach kodu .cshtmli .jsplikach. Więc składnia byłaby taka

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

Mając to na miejscu, możemy użyć zmiennych userObji userJsonObjjak i kiedy potrzebne.

Uwaga: Osobiście nie sugeruję używania zmiennych globalnych, ponieważ jest to bardzo trudne do utrzymania. Jeśli jednak nie masz innej opcji, możesz jej użyć mając odpowiednią konwencję nazewnictwa… coś w rodzaju userAppDetails_global.

2) Użycie function () lub closure Wrap cały kod zależny od danych modelu w funkcji. Następnie wykonaj tę funkcję z .cshtmlpliku.

external.js

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

.cshtml plik

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

Uwaga: przed powyższym skryptem należy odwołać się do zewnętrznego pliku. W przeciwnym razie userDataDependentfunkcja jest niezdefiniowana.

Należy również zauważyć, że funkcja musi mieć również zasięg globalny. Tak więc w przypadku każdego rozwiązania mamy do czynienia z graczami o zasięgu globalnym.

spróbuj tego: (przegapiłeś pojedyncze cudzysłowy)

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

U mnie okazało się, że owinięcie modelu własności wokół parenów. Nadal występuje ten sam problem z programem Visual Studio narzekającym na średnik, ale to działa.

var closedStatusId = @(Model.ClosedStatusId);

Jeśli zostanie zgłoszony błąd „ReferenceError: Model is not defined” , możesz spróbować użyć następującej metody:

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

Mam nadzieję że to pomoże...

Wiem, że jest już za późno, ale to rozwiązanie działa idealnie zarówno dla .NET Framework, jak i .NET Core:

@ System.Web.HttpUtility.JavaScriptStringEncode ()