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);
c#
javascript
jquery
asp.net-mvc
model
Null Reference
źródło
źródło
Odpowiedzi:
Możesz wziąć cały model po stronie serwera i przekształcić go w obiekt JavaScript, wykonując następujące czynności:
W twoim przypadku, jeśli chcesz tylko obiekt FloorPlanSettings, po prostu przekaż
Encode
metodę tę właściwość:źródło
Jak uzyskać dostęp do danych modelu w bloku kodu Javascript / Jquery w
.cshtml
plikuIstnieją dwa typy
Model
przypisań zmiennej języka C # ( ) do zmiennej JavaScript.int
,string
,DateTime
(npModel.Name
)Model
,Model.UserSettingsObj
)Przyjrzyjmy się szczegółom tych dwóch zadań.
W pozostałej części odpowiedzi rozważmy poniższy
AppUser
Model jako przykład.A wartości, które przypisujemy temu Modelowi, to
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.
Jak widać, istnieje kilka błędów
Raj
iTrue
są uważane za zmienne javascript, a ponieważ nie istnieją, jest tovariable undefined
błąd. Tam, gdzie w przypadku zmiennej dateTime błąd jest taki, żeunexpected number
liczby 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.
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
Age
jest 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.Raw
ale bez zawijania go w cudzysłówWyniki są podobne do naszego przypadku testowego 1. Jednak użycie
@Html.Raw()
naHTML
łańcuchu dało nam pewne zmiany. Kod HTML jest zachowywany bez zmiany nazw jednostek.Z dokumentacji Html.Raw ()
Ale nadal mamy błędy w innych wierszach.
4) Używanie
@Html.Raw
i zawijanie go w cudzysłówWyniki są dobre dla wszystkich typów. Ale nasze
HTML
dane 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)2) Usuń znaczenie znaku w kodzie po stronie serwera. Lubić
Zawarcie cesji własności
Html.Raw
do interpretowania danych HTML bez zmian.Przypisanie obiektu
Użyjmy innej składni do przypisania i obserwujmy wyniki.
1) Bez zawijania przypisania obiektu w cudzysłów.
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
3) Używanie
Html.Raw
bez cudzysłowów.4) Używając
Html.Raw
razem z cudzysłowamiHtml.Raw
Było żadnego większego wykorzystania dla nas podczas przypisywania obiektu do zmiennej.5) Używanie
Json.Encode()
bez cudzysłowówWidzimy 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 ()
Ponieważ napotkałeś już ten
entity Name
problem przy przypisywaniu własności i jeśli pamiętasz, rozwiązaliśmy go za pomocąHtml.Raw
. Więc spróbujmy tego. PołączmyHtml.Raw
iJson.Encode
6) Używając
Html.Raw
iJson.Encode
bez cudzysłowów.Rezultatem jest prawidłowy obiekt JavaScript
7) Używanie
Html.Raw
iwJson.Encode
cudzysłowach.Jak widać, owijanie cudzysłowami daje nam dane JSON
Uwagi dotyczące przypisania obiektu
Html.Raw
iJson.Encode
w połączeniu, aby przypisać swój obiekt do zmiennej javascript jako obiekt JavaScript .Html.Raw
aJson.Encode
także zawiń go,quotes
aby uzyskać JSONUwaga: 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) format
JSON nie zawieradate
typu. Inne opcje, aby naprawić to, aby dodać kolejną linię kodu do obsługi tego typu sam używając JavaScipt Date () obiektuJak uzyskać dostęp do danych modelu w bloku kodu Javascript / Jquery w
.js
plikuSkładnia Razor nie ma znaczenia w
.js
pliku i dlatego nie możemy bezpośrednio użyć naszego modelu w.js
pliku. 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
.cshtml
i.js
plikach. Więc składnia byłaby takaMając to na miejscu, możemy użyć zmiennych
userObj
iuserJsonObj
jak 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.cshtml
pliku.external.js
.cshtml
plikUwaga: przed powyższym skryptem należy odwołać się do zewnętrznego pliku. W przeciwnym razie
userDataDependent
funkcja 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.
źródło
var model = @Html.Raw(Json.Encode(Model));
to utworzy obiekt javascript,model
który nie ma połączenia z modelem C #, który przekazujesz do widoku. W rzeczywistościModel
po wyrenderowaniu widoku nie będzie. Więc formularz w interfejsie użytkownika nie będzie miał pojęcia o zmianach danych obiektu javascript. Musisz teraz przekazać cały zmodyfikowany model do kontrolera za pośrednictwem AJAX lub musisz zaktualizować wartość swoich kontrolek wejściowych w formularzu za pomocą JavaScript.Although I did the same thing using hidden Html control and bound it to EventCommand and updated it's value in javascript. But wondering if could do same directly to model?
dla tej instrukcji ... nie maEventCommand
w MVC, jego dla formularzy internetowych, gdzie istnieje połączenie między interfejsem użytkownika a akcjami serwera, w MVC wszystko jest oddzielone. Jedynym sposobem interakcji z kontrolerem jestspróbuj tego: (przegapiłeś pojedyncze cudzysłowy)
źródło
JSON
cudzysłowów plikjavascript Object
. Sprawdź moją odpowiedź w tym samym wątku, aby uzyskać więcej informacji. stackoverflow.com/a/41312348/2592042U 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.
źródło
Jeśli zostanie zgłoszony błąd „ReferenceError: Model is not defined” , możesz spróbować użyć następującej metody:
Mam nadzieję że to pomoże...
źródło
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 ()
źródło