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

Treść odpowiedzi

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

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

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

Istnieją dwa typy przypisań zmiennej C# (Model) do zmiennej JavaScript.

1. przypisanie własności - podstawowe typy danych jak int, string, DateTime (ex: Model.Name)
2. przypisanie obiektu - klasy niestandardowe lub wbudowane (ex: Model, Model.UserSettingsObj)

Dla reszty odpowiedzi rozważmy poniższy Model AppUser 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 Nieruchomości

Pozwala użyć innej składni do przypisania i obserwować 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ć jest kilka błędów, Raj i True jest uważany za zmienne javascript, a ponieważ nie istnieją, jest to błąd variable undefined. Jeśli chodzi o zmienną dateTime, błąd polega na tym, że unexpected number liczby nie mogą mieć znaków specjalnych, znaczniki HTML są konwertowane na nazwy encji, dzięki czemu przeglądarka nie myli wartości i HTML znaczniki.

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

Wyniki są poprawne, więc owinięcie przypisania właściwości w cudzysłowy daje nam poprawną składnię. Ale zauważ, że liczba Age jest teraz ciągiem znaków, więc jeśli nie chcesz, możemy po prostu usunąć cudzysłowy i będzie renderowana jako typ liczby.

3) używając @Html.Raw, ale bez owijania w cytaty

 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 łańcuchu HTML pokazało nam pewną zmianę. HTML jest zachowywany bez zmiany nazw encji.

Z docs Html.Surowy()

Zawija znaczniki HTML w instancję HtmlString, tak aby były interpretowane jako znaczniki HTML.

Ale nadal mamy błędy w innych liniach.

4) za pomocą @Html.Raw a także zawijanie go w cudzysłowy

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 HTML dane są teraz uszkodzone, a to zepsuje Skrypty. Problem polega na tym, że używamy pojedynczych cudzysłowów ' do zawijania danych, a nawet dane mają pojedyncze cudzysłowy.

Możemy rozwiązać ten problem za pomocą dwóch 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 owinięciu podwójnymi cudzysłowami nie ma " w danych)

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

2) wymyśl znaczenie znaków w kodzie po stronie serwera. Jak

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

Zawarcie cesji nieruchomości

• użyj cudzysłowów dla nieliczbowego typu danych.
• nie używaj cudzysłowów dla numerycznego typu danych.
• użyj Html.Raw, aby zinterpretować dane HTML tak, jak jest.
• zadbaj o swoje dane HTML, aby albo uciec znaczenie cudzysłowów po stronie serwera, lub użyć inny cudzysłów niż w danych podczas przypisywania do zmiennej javascript.

Przypisanie obiektu

Pozwala używać innej składni do przypisywania i obserwować wyniki.

1) bez zawijania przypisania obiektów w cudzysłowy.

  var userObj = @Model; 

Po przypisaniu obiektu c# do zmiennej javascript zostanie przypisana wartość .ToString() tego obiektu. Stąd powyższy wynik.

2 owijanie przypisywanie obiektów w cudzysłowach]}

var userObj = '@Model'; 

3) używanie Html.Raw bez cudzysłowów.

   var userObj = @Html.Raw(Model); 

4) używanie Html.Raw wraz z cudzysłowami

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

{[44] } nie przydał się nam przy przypisywaniu 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 pewne zmiany, widzimy, że nasz Model jest interpretowany jako przedmiot. Ale mamy te znaki specjalne zmienione na entity names. Również zawijanie powyższej składni w cudzysłowy nie jest zbyt użyteczne. Po prostu otrzymujemy ten sam wynik w cytatach.

Z dokumentów Json.Kodowanie()

Konwertuje obiekt danych na ciąg znaków, który jest w formacie JavaScript Object Notation (JSON).

Jak już napotkałeś ten entity Name problem z przypisaniem nieruchomości i jeśli pamiętasz, pokonaliśmy go z użycie Html.Raw. Więc wypróbujmy to. Lets combine Html.Raw and Json.Encode

6) używanie Html.Raw i Json.Encode bez cudzysłowów.

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

Wynik jest poprawny 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życie Html.Raw i Json.Encode w cudzysłowach.

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

Jak widzisz owijanie cudzysłowami daje nam JSON data

Conslusion on Object zadanie

• użyj Html.Raw i Json.Encode W combintaion, aby przypisać obiekt do zmiennej javascript jako JavaScript object.
• użyj Html.Raw i Json.Encode również zawiń go w quotes, aby uzyskać JSON

Uwaga: jeśli zauważyłeś, że format danych DataTime jest nieprawidłowy. Dzieje się tak dlatego, że jak wspomniano wcześniej Converts a data object to a string that is in the JavaScript Object Notation (JSON) format i JSON nie zawiera typu date. Inne opcje, aby to naprawić, to dodanie kolejnej linii kodu do obsługi tego typu samodzielnie za pomocą javascipt Date() obiekt

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 pliku .js

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

1) rozwiązaniem jest użycie zmiennych globalnych javascript .

Musimy przypisać wartość do zmiennej javascipt o globalnym zasięgu, a następnie użyj tej zmiennej we wszystkich blokach kodu w plikach .cshtml i .js. Więc składnia będzie

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

W tym miejscu możemy używać zmiennych userObj i userJsonObj jako i kiedy jest to 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ć z odpowiednią konwencją nazewnictwa .. coś w stylu userAppDetails_global.

2) Using function () lub closure Zawiń cały kod zależny od danych modelu w funkcję. Następnie wykonaj tę funkcję z pliku .cshtml.

external.js

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

.cshtml plik

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

Uwaga: Twój zewnętrzny plik musi być odwołany przed powyższym skryptem. W przeciwnym razie funkcja userDataDependent jest niezdefiniowana.

Zauważ również, że funkcja musi być również w zasięgu globalnym. Więc albo rozwiązanie mamy do czynienia z globalnych graczy scoped.

Try this: (you missed the single quotes)

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

Owijanie własności modelu wokół parens zadziałało dla mnie. Nadal masz ten sam problem z Visual Studio narzekając na średnik, ale to działa.

var closedStatusId = @(Model.ClosedStatusId);

Jeśli "ReferenceError: Model nie jest zdefiniowany" pojawia się błąd, 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 ;
    }
});

Wiem, że jest za późno, ale to rozwiązanie działa idealnie zarówno dla. NET framework i. Net core:

@ System.Www.HttpUtility.JavaScriptStringEncode ()