Bagaimana untuk Menggabungkan Pisau Cukur dan Kod JavaScript Dengan Lancar Dalam Halaman Web?

Menggabungkan Razor dan JavaScript dalam Halaman Web

Menggabungkan kedua-dua Razor dan kod JavaScript dalam halaman web yang sama boleh menjadi agak rumit. Pertimbangkan contoh kod berikut:

<code class="html"><script type="text/javascript">
        var data = [];

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

Kod ini cuba mencipta tatasusunan JavaScript yang dipanggil data dan mengisinya menggunakan gelung Razor foreach. Walau bagaimanapun, ia tidak mencapai apa yang kami maksudkan.

Penyelesaian Ideal:

Hasil yang kami inginkan ialah dapat menulis kod yang kelihatan seperti ini:

<code class="html"><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#>
</script></code>

Kod ini mencampurkan kod Razor dan JS dengan lancar, membolehkan kami melelang dengan mudah melalui koleksi C# dan mengisi tatasusunan JavaScript kami.

Penyelesaian:

Untuk mencapai matlamat ini, kita boleh menggunakan bahagian teks biasa. Gantikan dan teg dengan dan tag, seperti:

<code class="html"><script type="text/javascript">
        var data = [];

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

Menggunakan bahagian teks biasa membolehkan kami memasukkan kod JS sewenang-wenangnya dalam blok skrip kami, sambil masih menggunakan sintaks Razor untuk mengakses data daripada pelayan. Sekarang, kod kami harus berkelakuan seperti yang dimaksudkan, mengisi tatasusunan data dengan nilai daripada koleksi C# kami.

Atas ialah kandungan terperinci Bagaimana untuk Menggabungkan Pisau Cukur dan Kod JavaScript Dengan Lancar Dalam Halaman Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!