Czy jest to możliwe, czy istnieje obejście polegające na korzystaniu ze składni Razor w JavaScript, który jest w view ( cshtml
)?
Próbuję dodać znaczniki do mapy Google ... Na przykład próbowałem tego, ale otrzymuję mnóstwo błędów kompilacji:
<script type="text/javascript">
// Some JavaScript code here to display map, etc.
// Now add markers
@foreach (var item in Model) {
var markerlatLng = new google.maps.LatLng(@(Model.Latitude), @(Model.Longitude));
var title = '@(Model.Title)';
var description = '@(Model.Description)';
var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>'
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: latLng,
title: title,
map: map,
draggable: false
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
</script>
javascript
asp.net-mvc
razor
raklos
źródło
źródło
@:
składni.Odpowiedzi:
Użyj
<text>
pseudoelementu, jak opisano tutaj , aby zmusić kompilator Razor z powrotem do trybu zawartości:Aktualizacja:
Scott Guthrie niedawno napisał o
@:
składni w Razor, która jest nieco mniej niezręczna niż<text>
tag, jeśli masz tylko jeden lub dwa wiersze kodu JavaScript do dodania. Preferowane byłoby prawdopodobnie następujące podejście, ponieważ zmniejsza ono rozmiar generowanego HTML. (Możesz nawet przenieść funkcję addMarker do statycznego, buforowanego pliku JavaScript, aby dodatkowo zmniejszyć rozmiar):Zaktualizowałem powyższy kod, aby poprawić
addMarker
poprawność połączenia.Aby to wyjaśnić,
@:
zmusza Razor z powrotem do trybu tekstowego, mimo żeaddMarker
wywołanie przypomina kod C #. Razor pobiera następnie@item.Property
składnię, aby powiedzieć, że powinna bezpośrednio wypisywać zawartość tych właściwości.Aktualizacja 2
Warto zauważyć, że kod View naprawdę nie jest dobrym miejscem do umieszczenia kodu JavaScript. Kod JavaScript powinien zostać umieszczony w
.js
pliku statycznym , a następnie powinien uzyskać potrzebne dane albo z wywołania Ajax, albo poprzez skanowaniedata-
atrybutów z HTML. Oprócz umożliwienia buforowania kodu JavaScript, pozwala to również uniknąć problemów z kodowaniem, ponieważ Razor został zaprojektowany do kodowania HTML, ale nie JavaScript.Wyświetl kod
Kod JavaScript
źródło
@item.Title
zawiera pojedynczy cytat, ten kod eksploduje.data-
atrybutów, a następnie za pomocą statycznego, dyskretny javascript, aby zebrać te informacje z DOM. Ale cała ta dyskusja wykraczała poza zakres pytania.Właśnie napisałem tę funkcję pomocnika. Wstaw to
App_Code/JS.cshtml
:Następnie w swoim przykładzie możesz zrobić coś takiego:
Zauważ, że nie umieszczam wokół niego cudzysłowów. Jeśli tytuł zawiera już cytaty, nie wybuchnie. Wydaje się też ładnie obsługiwać słowniki i anonimowe obiekty!
źródło
@Html.Raw(Json.Encode(Model))
Próbujesz wbić kwadratowy kołek w okrągły otwór.
Razor został zaprojektowany jako język szablonów do generowania HTML. Możesz bardzo dobrze wygenerować kod JavaScript, ale nie został do tego przeznaczony.
Na przykład: co jeśli
Model.Title
zawiera apostrof? Spowodowałoby to uszkodzenie twojego kodu JavaScript, a Razor domyślnie nie uniknie go poprawnie.Prawdopodobnie bardziej odpowiednie byłoby użycie generatora String w funkcji pomocniczej. Prawdopodobnie będzie mniej niezamierzonych konsekwencji takiego podejścia.
źródło
Jakie konkretne błędy widzisz?
Coś takiego może działać lepiej:
Zauważ, że potrzebujesz magicznego
<text>
znacznika po,foreach
aby wskazać, że Razor powinien przełączyć się w tryb znaczników.źródło
Będzie to działać dobrze, o ile znajduje się na stronie CSHTML, a nie w zewnętrznym pliku JavaScript.
Silnik szablonów Razor nie dba o to, co wyprowadza i nie rozróżnia między
<script>
innymi tagami.Musisz jednak zakodować swoje łańcuchy, aby zapobiec atakom XSS .
źródło
HTML.Raw(Server.JavaScriptStringEncode(...))
HTML.Raw(HttpUtility.JavaScriptStringEncode(...))
- Właściwość serwera nie ma teraz tej metody. HttpUtility robi.The Razor template engine doesn't care what it's outputting and does not differentiate between <script> or other tags.
Jesteś tego pewien? stackoverflow.com/questions/33666065/…Wolę „<! -” ”->” jak „tekst>”
źródło
@:
i<text>
Jedną rzecz do dodania - odkryłem, że hilighter składni Razor (i prawdopodobnie kompilator) interpretuje położenie nawiasu otwierającego inaczej:
źródło
Prosty i dobry prosty przykład:
Spowoduje to utworzenie skryptu na stronie w miejscu, w którym umieścisz kod, który wygląda następująco:
Teraz masz globalną zmienną JavaScript o nazwie, do
razorUserName
której możesz uzyskać dostęp i używać na kliencie. Silnik Razor oczywiście wyodrębnił wartość@User.Identity.Name
(zmienna po stronie serwera) i umieścił ją w kodzie, który zapisuje w skrypcie.źródło
Poniższe rozwiązanie wydaje mi się bardziej dokładne niż połączenie JavaScript z Razor. Sprawdź to: https://github.com/brooklynDev/NGon
Możesz dodać prawie wszystkie złożone dane do ViewBag.Ngon i uzyskać do nich dostęp w JavaScript
W kontrolerze:
W JavaScript:
Umożliwia dowolne stare zwykłe obiekty CLR (POCO), które mogą być serializowane przy użyciu domyślnych
JavascriptSerializer
.źródło
Jest też jeszcze jedna opcja niż @: i
<text></text>
.Używanie
<script>
samego bloku.Jeśli potrzebujesz zrobić dużą część kodu JavaScript w zależności od kodu Razor, możesz to zrobić w następujący sposób:
Zaletą tego sposobu jest to, że nie miesza zbyt mocno JavaScript i Razor, ponieważ ich mieszanie spowoduje problemy z czytelnością. Również duże bloki tekstowe nie są zbyt czytelne.
źródło
Żadne z poprzednich rozwiązań nie działa poprawnie ... Próbowałem wszystkich sposobów, ale nie dało to oczekiwanego rezultatu ... W końcu odkryłem, że są pewne błędy w kodzie ... I podano pełny kod poniżej.
źródło
W końcu znalazłem rozwiązanie (* .vbhtml):
źródło