Atribut HTML Bersyarat menggunakan Razor MVC3

Variabel strCSSClass sering kali memiliki nilai tetapi terkadang kosong.

Saya tidak ingin menyertakan class = "" yang kosong dalam HTML elemen masukan ini, yang berarti jika strCSSClass kosong, saya tidak ingin atribut class = sama sekali.

Berikut ini adalah salah satu cara untuk melakukan atribut HTML bersyarat:

<input type="text" id="@strElementID" @(CSSClass.IsEmpty() ? "" : "class=" + strCSSClass) />

Apakah ada cara yang lebih elegan untuk melakukan ini? Khususnya di mana saya bisa mengikuti sintaks yang sama seperti yang digunakan di bagian lain dari elemen: class = "@ strCSSClass"?

Anda tidak mendengarnya dari saya, PM untuk Razor, tetapi di Razor 2 (Halaman Web 2 dan MVC 4) kami akan memiliki atribut bersyarat yang dibangun ke dalam Razor (sejak MVC 4 RC berhasil diuji), jadi Anda bisa mengatakan hal-hal seperti ini ...

<input type="text" id="@strElementID" class="@strCSSClass" />

Jika strCSSClass bernilai null maka atribut class tidak akan dirender sama sekali.

SSSHHH ... jangan bilang. :)

Perhatikan Anda dapat melakukan sesuatu seperti ini (setidaknya di MVC3):

<td align="left" @(isOddRow ? "class=TopBorder" : "style=border:0px") >

Apa yang saya yakini adalah menambahkan tanda kutip pisau cukur sebenarnya adalah browser. Seperti yang ditunjukkan Rism ketika menguji dengan MVC 4 (saya belum menguji dengan MVC 3 tetapi saya menganggap perilaku tidak berubah), ini sebenarnya menghasilkan class=TopBordertetapi browser dapat mengurai ini dengan baik. Pengurai HTML agak memaafkan jika ada kutipan atribut yang hilang, tapi ini dapat rusak jika Anda memiliki spasi atau karakter tertentu .

<td align="left" class="TopBorder" >

ATAU

<td align="left" style="border:0px" >

Apa yang salah dengan memberikan kutipan Anda sendiri

Jika Anda mencoba menggunakan beberapa konvensi C # yang biasa untuk kutipan bertingkat, Anda akan mendapatkan lebih banyak kutipan daripada yang Anda tawar karena Razor mencoba melarikan diri dengan aman. Sebagai contoh:

<button type="button" @(true ? "style=\"border:0px\"" : string.Empty)>

Ini harus bernilai<button type="button" style="border:0px"> tetapi Razor lolos dari semua output dari C # dan dengan demikian menghasilkan:

style="border:0px"

Anda hanya akan melihat ini jika Anda melihat tanggapan melalui jaringan. Jika Anda menggunakan inspektur HTML, seringkali Anda benar-benar melihat DOM, bukan HTML mentah. Browser mengurai HTML ke dalam DOM, dan representasi DOM setelah penguraian sudah menerapkan beberapa hal bagus. Dalam hal ini, Browser melihat tidak ada tanda kutip di sekitar nilai atribut, tambahkan:

style=""border:0px""

Namun dalam pemeriksa DOM kode karakter HTML ditampilkan dengan benar sehingga Anda benar-benar melihat:

style=""border:0px""

Di Chrome, jika Anda mengklik kanan dan memilih Edit HTML, itu akan beralih kembali sehingga Anda dapat melihat kode karakter HTML yang menjijikkan itu, memperjelas bahwa Anda memiliki tanda kutip luar yang sebenarnya, dan tanda kutip dalam yang dikodekan HTML.

Jadi masalah dengan mencoba melakukan kutipan sendiri adalah Razor lolos dari ini.

Jika Anda ingin kontrol penuh atas kutipan

Gunakan Html.Raw untuk mencegah pelolosan kutipan:

<td @Html.Raw( someBoolean ? "rel='tooltip' data-container='.drillDown a'" : "" )>

Ditampilkan sebagai:

<td rel='tooltip' title='Drilldown' data-container='.drillDown a'>

Di atas sangat aman karena saya tidak mengeluarkan HTML apa pun dari variabel. Satu-satunya variabel yang terlibat adalah kondisi terner. Namun, dan sekarang setiap pengguna lain yang melihat halaman ini memiliki kata sandinya langsung berubah menjadi kata sandi yang diketahui oleh pengguna jahat. berhati - hatilah karena teknik terakhir ini dapat membuat Anda terkena masalah keamanan tertentu jika membuat string dari data yang disediakan pengguna. Misalnya, jika Anda membuat atribut dari bidang data yang berasal dari data yang disediakan pengguna, gunakan Html. Raw berarti string dapat berisi akhir yang prematur dari atribut dan tag, kemudian mulai tag skrip yang melakukan sesuatu atas nama yang saat ini masuk pengguna (mungkin berbeda dari pengguna yang masuk). Mungkin Anda memiliki halaman dengan daftar semua gambar pengguna dan Anda menyetel keterangan alat menjadi nama pengguna setiap orang, dan satu pengguna menamai dirinya sendiri'/><script>$.post('changepassword.php?password=123')</script>

Saya kira cara yang sedikit lebih nyaman dan terstruktur adalah dengan menggunakan helper Html. Dalam pandangan Anda, ini bisa terlihat seperti:

@{
 var htmlAttr = new Dictionary<string, object>();
 htmlAttr.Add("id", strElementId);
 if (!CSSClass.IsEmpty())
 {
   htmlAttr.Add("class", strCSSClass);
 }
}

@* ... *@

@Html.TextBox("somename", "", htmlAttr)

Jika cara ini berguna untuk Anda, saya sarankan untuk mendefinisikan kamus htmlAttrdalam model Anda sehingga tampilan Anda tidak memerlukan @{ }blok logika (lebih jelas).