Campurkan Razor dan kode Javascript

172

Saya cukup bingung dengan cara mencampur pisau cukur dan js. Ini adalah fungsi saat ini saya terjebak dengan:

<script type="text/javascript">

        var data = [];

        @foreach (var r in Model.rows)
        {
                data.push([ @r.UnixTime * 1000, @r.Value ]);
        }

Jika saya bisa mendeklarasikan kode c # dengan <c#></c#>dan yang lainnya adalah kode JS - inilah yang saya cari:

<script type="text/javascript">

        var data = [];

        <c#>@foreach (var r in Model.rows) {</c#>
                data.push([ <c#>@r.UnixTime</c#> * 1000, <c#>@r.Value</c#> ]);
        <c#>}</c#>

Apa metode terbaik untuk mencapai ini?

c# javascript razor

— Kyle Brandt
sumber

2

Rupanya penyorotan sintaks bagus dan bingung dengan <c#>tag saya juga :-P

— Kyle Brandt

1

Apakah Anda memeriksa output HTML dari tampilan ini? Bagaimana tampilannya, dan bagaimana Anda menginginkannya berbeda?

— sukru

Melontar kesalahan tentang Conditional Compilation jadi saya tidak bisa melihat HTML - jadi saya yakin ini bagian dari kode C #.

— Kyle Brandt

1

Sepertinya kesalahan JavaScript: webdeveloper.com/forum/showthread.php?t=99780 . Apa pesan kesalahan sebenarnya, dan di mana Anda mendapatkannya?

— sukru

2

Saya pikir ini adalah kasus di mana mencoba untuk mencampur JS dan C # dengan sangat dekat akan menyusahkan untuk membaca / memelihara. Saya senang kompiler melarang Anda dari kode ini. :)

— Jim Bolla

333

Gunakan <text>:

<script type="text/javascript">

   var data = [];

   @foreach (var r in Model.rows)
   {
      <text>
            data.push([ @r.UnixTime * 1000, @r.Value ]);
      </text>
   }
</script>

— Max Toro
sumber

27

Razor berfungsi dengan baik di blok Javascript ketika dieksekusi tetapi saya benci bagaimana penyorotan sintaksis membuat semua jenis bingung. Itu menyoroti semua kode Razor sebagai Sintaks tidak valid karena saya terjebak dalam mode Javascript saya percaya.

— Chev

2

bagaimana kalau kode ini ada dalam satu bundel ?? dapatkah saya menulis kode di dalam file javascript ??

— ncubica

2

Berfungsi dengan sempurna sampai Anda ingin memeriksa apakah satu variabel lebih kecil dari yang lain dan pisau cukur menjadi psiko!

— cbp

1

@ncubica jika Anda ingin pisau cukur dalam bundel, daripada sesuatu yang salah dalam konsep Anda. Razor untuk tampilan, bukan javascript.

— 100r

1

@ncubica Posting ini sudah tua, tetapi solusi untuk pertanyaan Anda adalah: Tulis fungsi dalam file JS, render dengan itu Scripts.Render, lalu panggil fungsi dalam <script>tag. Tidak sepenuhnya anggun, tetapi berfungsi untuk sebagian besar (baca: sederhana) kasus penggunaan.

— Sinjai

81

Di dalam blok kode (misalnya, @foreach), Anda harus menandai markup (atau, dalam hal ini, Javascript) dengan @:atau <text>tag .

Di dalam konteks markup, Anda perlu mengelilingi kode dengan blok kode ( @{ ... }atau @if, ...)

— Slaks
sumber

Mengapa Anda mengatakan "tandai markup", ini tidak akan menjadi masalah jika konten itu, pada kenyataannya, markup.

— Max Toro

1

@ Max: Meskipun tidak terlihat seperti markup, itu markup. (Berbeda dengan kode sisi server)

— SLaks

@:adalah apa yang saya cari, bagus!

— Muflix

54

Anda juga bisa menggunakan

<script type="text/javascript">

   var data = [];

   @foreach (var r in Model.rows)
   {
       @:data.push([ @r.UnixTime * 1000, @r.Value ]);
   }
</script>

note @:

— Medet Tleukabiluly
sumber

12

Jangan pernah mencampur lebih banyak bahasa.

<script type="text/javascript">
    var data = @Json.Encode(Model); // !!!! export data !!!!

    for(var prop in data){
      console.log( prop + " "+ data[prop]);
    }

Jika ada masalah, Anda juga dapat mencoba

@Html.Raw(Json.Encode(Model));

— Mertuarez
sumber

Ini bagus, tetapi juga, ada contoh yang sah di mana kita perlu mencampur. Tapi ini solusi yang saya gunakan karena sangat pas.

— frostymarvelous

3

Perhatikan bahwa ini adalah bahasa campuran. Anda memiliki pernyataan yang setengah JavaScript ("var data =") dan setengah Razor / C # ("@ Json.Encode (Model)"). Ini hanya pencampuran yang kurang invasif, tetapi tidak kurang dari pencampuran daripada memiliki "foreach" Razor / C # yang tubuhnya memancarkan JavaScript. :-)

— Jonathan Gilbert

3

Ia kembali Uncaught SyntaxError: Unexpected token &karena modelnya menjadi seperti ini[{"Id":1,"Name":"Name}]

— Weihui Guo

1

Metode non konvensional untuk memisahkan javascript dari tampilan, tetapi tetap menggunakan pisau cukur di dalamnya adalah untuk membuat Scripts.cshtmlfile dan menempatkan javascript / pisau cukur campuran Anda di sana.

Index.cshtml

<div id="Result">
</div>

<button id="btnLoad">Click me</button>

@section scripts
{
    @Html.Partial("Scripts")
}

Scripts.cshtml

<script type="text/javascript">
    var url = "@Url.Action("Index", "Home")";

    $(document).ready(function() {
        $("#btnLoad").click(function() {
            $.ajax({
                type: "POST",
                url: url ,
                data: {someParameter: "some value"},
                contentType: "application/json; charset=utf-8",
                dataType: "json",

                success: function(msg) {
                    $("#Result").text(msg.d);
                }
            });
        });
    });
</script>

— Joel Wiklund
sumber

0

Anda dapat menggunakan <text>tag untuk kedua kode cshtml dengan javascript

— Surendra Kumar Laggisetty
sumber

Tag "<text>" tidak memiliki jawaban di atas

— Surendra Kumar Laggisetty

gunakan backticks atau ctrl + k setelah memilih kode untuk memformatnya

— Suraj Rao

-1

Bungkus kode Razor Anda di @ {} ketika di dalam skrip JS dan berhati-hatilah dengan hanya menggunakan @ Kadang-kadang itu tidak berhasil:

function hideSurveyReminder() {
       @Session["_isSurveyPassed"] = true;
    }

Ini akan menghasilkan

function hideSurveyReminder() {
       False = true;
    }

di browser = (

— spine4iller
sumber