Saya memiliki .csHtml
file -razor dengan fungsi javascript yang menggunakan fungsi @Url.Content
C # di dalamnya untuk URL ajax.
Saya ingin memindahkan fungsi itu ke .js
file yang direferensikan dari pandangan saya.
Masalahnya adalah bahwa javascript tidak "mengetahui" @
simbol tersebut dan tidak mengurai kode C #.
Apakah ada cara untuk mereferensikan .js
file dari tampilan dengan simbol "@"?
c#
javascript
asp.net-mvc
asp.net-mvc-3
razor
gdoron mendukung Monica
sumber
sumber
Jawaban:
Anda bisa menggunakan
data-*
atribut HTML5 . Misalkan Anda ingin melakukan beberapa tindakan ketika beberapa elemen DOM seperti div diklik. Begitu:<div id="foo" data-url="@Url.Content("~/foobar")">Click me</div>
dan kemudian di file javascript terpisah Anda, Anda dapat bekerja secara diam-diam dengan DOM:
$('#foo').click(function() { var url = $(this).data('url'); // do something with this url });
Dengan cara ini Anda dapat memiliki pemisahan murni antara markup dan skrip tanpa Anda memerlukan tag sisi server apa pun di file javascript Anda.
sumber
Saya baru saja menemukan mesin silet di nuget yang bisa melakukannya! Arti memecahkan
@
sintaks!Namanya adalah RazorJS .
The Nuget paket
Pembaruan 2016:
Paket tidak diperbarui selama 5 tahun, dan tautan situs proyek mati. Saya tidak merekomendasikan orang untuk menggunakan perpustakaan ini lagi.
sumber
Satu arah untuk mengatasi masalah tersebut adalah:
Menambahkan tampilan parsial dengan fungsi javascript ke tampilan.
Dengan cara ini Anda dapat menggunakan
@
simbol dan semuajavascript
fungsi Anda dipisahkan dari tampilan.sumber
Anda memiliki dua pilihan:
Sebagai contoh:
var MyCompany = { MyProject: { MyVariable:"" } };
Dan kemudian dalam tampilan Anda, setel:
MyCompany.MyProject.MyVariable = @....
MEMPERBARUI
Anda mungkin bertanya-tanya tidak ada yang bagus karena penggandengan, memang benar, Anda menggabungkan js dan tampilan. Itulah mengapa skrip harus tidak menyadari lokasi tempat mereka dijalankan sehingga ini adalah gejala organisasi file yang tidak optimal.
Pokoknya ada pilihan ketiga untuk membuat mesin tampilan dan menjalankan file js melawan pisau cukur dan mengirim hasilnya kembali. Ini lebih bersih tapi jauh lebih lambat jadi tidak disarankan juga.
sumber
Untuk memasukkan
@
variabel ke dalam file .js Anda, Anda harus menggunakan variabel global dan menetapkan nilai variabel tersebut dari tampilan mvc yang menggunakan file .js tersebut.File JavaScript:
var myValue; function myFunc() { alert(myValue); }
MVC Lihat file:
<script language="text/javascript"> myValue = @myValueFromModel; </script>
Pastikan saja bahwa setiap panggilan ke fungsi Anda terjadi SETELAH nilainya ditetapkan oleh view.
sumber
Mungkin ini bukan pendekatan yang tepat. Mempertimbangkan pemisahan kekhawatiran. Anda harus memiliki
data injector
diJavaScript
kelas Anda dan yang dalam banyak kasus adalah dataJSON
.Buat file JS di
script
folder Anda dan tambahkan referensi ini keView
<script src="@Url.Content("~/Scripts/yourJsFile.js")" type="text/javascript"></script>
Sekarang, pertimbangkan
JavaScript
kelas literal diyourJsFile.js
:var contentSetter = { allData: {}, loadData: function (data) { contentSetter.allData = eval('(' + data + ')'); }, setContentA: function () { $("#contentA").html(allData.contentAData); }, setContentB: function () { $("#contentB").html(allData.contentAData); } };
Juga nyatakan sebuah kelas
public class ContentData { public string ContentDataA { get; set } public string ContentDataB { get; set } }
Sekarang, dari Anda
Action
lakukan ini:public ActionResult Index() { var contentData = new ContentData(); contentData.ContentDataA = "Hello"; contentData.ContentDataB = "World"; ViewData.Add("contentData", contentData); }
Dan dari pandangan Anda:
<div id="contentA"></div> <div id="contentB"></div> <script type="text/javascript"> contentSetter.loadData('@Json.Encode((ContentData) ViewData["contentData"])'); contentSetter.setContentA(); contentSetter.setContentB(); </script>
sumber
Baru-baru ini saya membuat blog tentang topik ini: Membuat File JavaScript Eksternal Menggunakan Tampilan Pisau Cukur Sebagian .
Solusi saya adalah menggunakan atribut khusus (
ExternalJavaScriptFileAttribute
) yang membuat tampilan Razor parsial sebagaimana adanya dan kemudian mengembalikannya tanpa<script>
tag di sekitarnya . Itu membuatnya menjadi file JavaScript eksternal yang valid.sumber
Saya biasanya membungkus JS yang membutuhkan akses ke properti model, dalam fungsi, lalu meneruskan @something dalam tampilan. Sebagai contoh
<script type="text/javascript"> function MyFunction(somethingPresentInTheView) { alert(somethingPresentInTheView); } </script>
dalam tampilan saya menambahkan pemanggilan fungsi melalui (hanya sebuah contoh):
<input type='button' onclick="MyFunction('@Model.PropertyNeeded')" />
sumber
Saya pikir Anda terjebak dengan harus meletakkan kode JS itu di View. Parser Razor, sejauh yang saya tahu, tidak akan melihat file .js, jadi apa pun yang Anda miliki yang Anda gunakan
@
tidak akan berfungsi. PLus, seperti yang Anda lihat, Javascript sendiri tidak suka@
karakter ini berkeliaran tanpa alasan, selain itu, katakanlah, dalam sebuah string.sumber