Apakah mungkin atau ada solusi untuk menggunakan sintaks Razor dalam JavaScript yang ada dalam view ( cshtml
)?
Saya mencoba menambahkan spidol ke peta Google ... Misalnya, saya mencoba ini, tetapi saya mendapatkan banyak kesalahan kompilasi:
<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
sumber
sumber
@:
sintaksis.Jawaban:
Gunakan
<text>
elemen pseudo, seperti dijelaskan di sini , untuk memaksa kompiler Razor kembali ke mode konten:Memperbarui:
Scott Guthrie baru-baru ini memposting tentang
@:
sintaks di Razor, yang sedikit kurang kikuk daripada<text>
tag jika Anda hanya memiliki satu atau dua baris kode JavaScript untuk ditambahkan. Pendekatan berikut mungkin lebih disukai, karena mengurangi ukuran HTML yang dihasilkan. (Anda bahkan dapat memindahkan fungsi addMarker ke file JavaScript cache yang statis untuk mengurangi ukurannya):Diperbarui kode di atas untuk membuat panggilan menjadi
addMarker
lebih benar.Untuk memperjelas,
@:
kekuatan Razor kembali ke mode teks, meskipunaddMarker
panggilan sangat mirip dengan kode C #. Razor kemudian mengambil@item.Property
sintaks untuk mengatakan bahwa itu harus langsung mengeluarkan konten dari properti itu.Perbarui 2
Perlu dicatat bahwa kode Tampilan sebenarnya bukan tempat yang baik untuk meletakkan kode JavaScript. Kode JavaScript harus ditempatkan dalam
.js
file statis , dan kemudian harus mendapatkan data yang dibutuhkan baik dari panggilan Ajax atau dengan memindaidata-
atribut dari HTML. Selain memungkinkan untuk me-cache kode JavaScript Anda, ini juga menghindari masalah dengan pengkodean, karena Razor dirancang untuk menyandikan untuk HTML, tetapi bukan JavaScript.Lihat Kode
Kode JavaScript
sumber
@item.Title
berisi satu kutipan, kode ini akan meledak.data-
atribut, dan kemudian menggunakan javascript statis, tidak mencolok untuk mengumpulkan informasi ini dari DOM. Tetapi seluruh diskusi itu agak di luar cakupan pertanyaan.Saya baru saja menulis fungsi pembantu ini. Masukkan
App_Code/JS.cshtml
:Kemudian dalam contoh Anda, Anda dapat melakukan sesuatu seperti ini:
Perhatikan bagaimana saya tidak menaruh tanda kutip di sekitarnya. Jika judul sudah berisi tanda kutip, itu tidak akan meledak. Tampaknya juga menangani kamus dan benda anonim!
sumber
@Html.Raw(Json.Encode(Model))
Anda mencoba membuat pasak persegi dalam lubang bundar.
Razor dimaksudkan sebagai bahasa templat penghasil HTML. Anda mungkin mendapatkannya untuk menghasilkan kode JavaScript, tetapi itu tidak dirancang untuk itu.
Misalnya: Bagaimana jika
Model.Title
mengandung tanda kutip? Itu akan merusak kode JavaScript Anda, dan Razor tidak akan menghindarinya dengan benar.Mungkin akan lebih tepat untuk menggunakan generator String dalam fungsi pembantu. Kemungkinan akan ada lebih sedikit konsekuensi yang tidak diinginkan dari pendekatan itu.
sumber
Apa kesalahan spesifik yang Anda lihat?
Sesuatu seperti ini bisa bekerja lebih baik:
Perhatikan bahwa Anda memerlukan
<text>
tag ajaib setelahforeach
untuk menunjukkan bahwa Razor harus beralih ke mode markup.sumber
Itu akan berfungsi dengan baik, selama itu ada di halaman CSHTML dan bukan file JavaScript eksternal.
Mesin template Razor tidak peduli apa itu keluaran dan tidak membedakan antara
<script>
tag lain.Namun, Anda perlu menyandikan string Anda untuk mencegah serangan XSS .
sumber
HTML.Raw(Server.JavaScriptStringEncode(...))
HTML.Raw(HttpUtility.JavaScriptStringEncode(...))
- Properti server tidak memiliki metode ini sekarang. HttpUtility tidak.The Razor template engine doesn't care what it's outputting and does not differentiate between <script> or other tags.
Apakah Anda yakin itu? stackoverflow.com/questions/33666065/…Saya lebih suka "<! -" "->" seperti "teks>"
sumber
@:
dan<text>
metodeSatu hal yang perlu ditambahkan - saya menemukan bahwa hilor sintaks Razor (dan mungkin kompiler) menginterpretasikan posisi braket pembuka berbeda:
sumber
Contoh sederhana dan mudah:
Ini membuat skrip di halaman Anda di lokasi Anda menempatkan kode di atas yang terlihat seperti berikut:
Sekarang Anda memiliki variabel JavaScript global bernama
razorUserName
yang dapat Anda akses dan gunakan pada klien. Mesin Razor jelas telah mengekstraksi nilai dari@User.Identity.Name
(variabel sisi server) dan memasukkannya ke dalam kode yang ditulisnya ke tag skrip Anda.sumber
Solusi berikut tampaknya lebih akurat bagi saya daripada menggabungkan JavaScript dengan Razor. Lihat ini: https://github.com/brooklynDev/NGon
Anda dapat menambahkan hampir semua data kompleks ke ViewBag.Ngon dan mengaksesnya dalam JavaScript
Di controller:
Dalam JavaScript:
Ini memungkinkan objek CLR tua biasa (POCOs) yang dapat diserialisasi menggunakan default
JavascriptSerializer
.sumber
Ada juga satu opsi lagi dari @: dan
<text></text>
.Menggunakan
<script>
blok itu sendiri.Saat Anda perlu melakukan JavaScript dalam jumlah besar tergantung pada kode Razor, Anda dapat melakukannya seperti ini:
Kelebihan dari cara ini adalah bahwa itu tidak mencampur JavaScript dan Razor terlalu banyak, karena mencampurkan mereka banyak akan menyebabkan masalah keterbacaan pada akhirnya. Blok teks besar juga tidak terlalu mudah dibaca.
sumber
Tidak ada solusi sebelumnya yang berfungsi dengan benar ... Saya telah mencoba semua cara, tetapi tidak memberi saya hasil yang diharapkan ... Akhirnya saya menemukan bahwa ada beberapa kesalahan dalam kode ... Dan kode lengkap diberikan di bawah.
sumber
Saya akhirnya menemukan solusinya (* .vbhtml):
sumber