Razor MVC3 kullanan Koşullu HTML Nitelikleri

StrCSSClass değişkeni genellikle bir değere sahiptir, ancak bazen boştur.

Bu girdi öğesinin HTML'sine boş bir class = "" eklemek istemiyorum, yani strCSSClass boşsa, class = özniteliğini hiç istemiyorum.

Aşağıdakiler, koşullu bir HTML niteliği oluşturmanın bir yoludur:

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

Bunu yapmanın daha zarif bir yolu var mı? Özellikle öğenin diğer bölümlerinde kullanılan aynı sözdizimini izleyebileceğim bir yer: class = "@ strCSSClass"?

Bunu benden duymadınız, Razor için Başbakan, ancak Razor 2'de (Web Sayfaları 2 ve MVC 4) Razor'da yerleşik koşullu özniteliklere sahip olacağız (MVC 4 RC başarıyla test edildiğinden beri), bu nedenle şunu söyleyebilirsiniz: böyle şeyler...

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

StrCSSClass null ise, sınıf özniteliği hiç işlenmez.

SSSHHH ... söyleme. :)

Bunun gibi bir şey yapabileceğinizi unutmayın (en azından MVC3'te):

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

Jilet eklemeye inandığım şey aslında tarayıcıydı. Rism'in MVC 4 ile test ederken belirttiği gibi (MVC 3 ile test etmedim, ancak davranışın değişmediğini varsayıyorum), bu aslında üretiyor class=TopBorderancak tarayıcılar bu sorunu çözebiliyor . HTML ayrıştırıcıları, eksik öznitelik tırnaklarını biraz affederler, ancak boşluklarınız veya belirli karakterleriniz varsa bu durum bozulabilir .

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

VEYA

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

Kendi alıntılarınızı vermenin nesi yanlış?

İç içe alıntılar için olağan C # kurallarından bazılarını kullanmaya çalışırsanız, pazarlık ettiğinizden daha fazla alıntı elde edersiniz çünkü Razor onlardan güvenli bir şekilde kaçmaya çalışıyor. Örneğin:

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

Bu gerektiğini değerlendirmek <button type="button" style="border:0px">ancak Razor C # tüm çıkışlarını kaçar ve böylece üretir:

style="border:0px"

Bunu yalnızca yanıtı ağ üzerinden görüntülerseniz göreceksiniz. Bir HTML denetçisi kullanıyorsanız, genellikle ham HTML'yi değil, aslında DOM'u görürsünüz. Tarayıcılar HTML'yi DOM'a ayrıştırır ve ayrıştırma sonrası DOM gösteriminin bazı özellikleri zaten uygulanmıştır. Bu durumda Tarayıcı, öznitelik değerinin etrafında alıntı olmadığını görür ve bunları ekler:

style=""border:0px""

Ancak DOM denetçisinde HTML karakter kodları doğru şekilde görüntülendiğinden şunları gerçekten görürsünüz:

style=""border:0px""

Chrome'da, sağ tıklayıp HTML'yi Düzenle'yi seçerseniz, bu iğrenç HTML karakter kodlarını görebilmeniz için geri dönerek gerçek dış tırnaklara ve HTML kodlu iç tırnaklara sahip olduğunuzu açıkça gösterir.

Yani alıntı yapmayı kendiniz yapmaya çalışmanın sorunu Razor'un bunlardan kaçmasıdır.

Tekliflerin tam kontrolünü istiyorsanız

Alıntı kaçışını önlemek için Html.Raw kullanın:

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

Oluşturma şekli:

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

Yukarıdakiler tamamen güvenlidir çünkü bir değişkenden herhangi bir HTML çıktısı almıyorum. İlgili tek değişken üçlü koşuldur. Ancak, bu son tekniğin, kullanıcı tarafından sağlanan verilerden dizeler oluşturuyorsanız sizi belirli güvenlik sorunlarına maruz bırakabileceğine dikkat edin . Örneğin, kullanıcı tarafından sağlanan verilerden kaynaklanan veri alanlarından bir öznitelik oluşturduysanız, Html.Raw kullanımı, dizenin öznitelik ve etiketin erken bir sonunu içerebileceği anlamına gelir, ardından o anda oturum açmış olan adına bir şeyler yapan bir komut dosyası etiketi başlatır. kullanıcı (muhtemelen oturum açmış kullanıcıdan farklı). Belki de tüm kullanıcıların resimlerinin bir listesini içeren bir sayfanız vardır ve her bir kişinin kullanıcı adı olacak bir araç ipucu ayarlıyorsunuz ve bir kullanıcı kendi adını verdi'/><script>$.post('changepassword.php?password=123')</script> ve şimdi bu sayfayı görüntüleyen herhangi bir kullanıcının şifresi anında kötü niyetli kullanıcının bildiği bir şifreye dönüştü.

Sanırım biraz daha uygun ve yapılandırılmış bir yol Html yardımcısını kullanmaktır. Size göre şöyle görünebilir:

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

@* ... *@

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

Bu yol sizin için yararlı olacaksa htmlAttr, modelinizde sözlük tanımlamanızı öneririm, böylece görünümünüzün herhangi bir @{ }mantık bloğuna ihtiyaç duymaz (daha net olun).