แอตทริบิวต์ HTML แบบมีเงื่อนไขโดยใช้ Razor MVC3

ตัวแปร strCSSClass มักมีค่า แต่บางครั้งก็ว่างเปล่า

ฉันไม่ต้องการรวม class = "" ที่ว่างเปล่าไว้ใน HTML ขององค์ประกอบอินพุตนี้ซึ่งหมายความว่าถ้า strCSSClass ว่างเปล่าฉันไม่ต้องการแอตทริบิวต์ class = เลย

ต่อไปนี้เป็นวิธีหนึ่งในการสร้างแอตทริบิวต์ HTML แบบมีเงื่อนไข:

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

มีวิธีที่หรูหรากว่านี้หรือไม่? โดยเฉพาะอย่างยิ่งที่ฉันสามารถทำตามไวยากรณ์เดียวกันกับที่ใช้ในส่วนอื่น ๆ ขององค์ประกอบ: class = "@ strCSSClass"?

คุณไม่ได้ยินจากฉัน PM สำหรับ Razor แต่ใน Razor 2 (หน้าเว็บ 2 และ MVC 4) เราจะมีแอตทริบิวต์ที่มีเงื่อนไขใน Razor (เมื่อทดสอบ MVC 4 RC เรียบร้อยแล้ว) ดังนั้นคุณสามารถพูดได้ว่า ของแบบนี้ ...

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

ถ้า strCSSClass เป็นโมฆะแอตทริบิวต์คลาสจะไม่แสดงผลเลย

SSSHHH ... ไม่บอก. :)

โปรดทราบว่าคุณสามารถทำสิ่งนี้ได้ (อย่างน้อยใน MVC3):

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

สิ่งที่ฉันเชื่อคือการเพิ่มเครื่องหมายคำพูดคือเบราว์เซอร์จริงๆ ดังที่ Rism ชี้ให้เห็นเมื่อทดสอบกับ MVC 4 (ฉันยังไม่ได้ทดสอบกับ MVC 3 แต่ฉันคิดว่าพฤติกรรมไม่เปลี่ยนแปลง) สิ่งนี้เกิดขึ้นจริงclass=TopBorderแต่เบราว์เซอร์สามารถแยกวิเคราะห์ได้ดี parsers HTML จะค่อนข้างให้อภัยในคำพูดที่ขาดหายไปแอตทริบิวต์ แต่นี้สามารถทำลายถ้าคุณมีช่องว่างหรือตัวอักษรบางอย่าง

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

หรือ

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

เกิดอะไรขึ้นกับการเสนอราคาของคุณเอง

หากคุณพยายามใช้รูปแบบ C # ทั่วไปสำหรับคำพูดที่ซ้อนกันคุณจะได้ราคามากกว่าที่คุณต่อรองเพราะ Razor พยายามที่จะหลบหนีอย่างปลอดภัย ตัวอย่างเช่น:

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

สิ่งนี้ควรประเมิน<button type="button" style="border:0px">แต่ Razor หลบหนีเอาต์พุตทั้งหมดจาก C # และทำให้เกิด:

style="border:0px"

คุณจะเห็นสิ่งนี้ก็ต่อเมื่อคุณดูการตอบกลับผ่านเครือข่าย หากคุณใช้ตัวตรวจสอบ HTML คุณมักจะเห็น DOM ไม่ใช่ HTML ดิบ เบราว์เซอร์แยกวิเคราะห์ HTML ลงใน DOM และการแสดง DOM หลังการแยกวิเคราะห์ก็มีการใช้เฉพาะบางอย่างแล้ว ในกรณีนี้เบราว์เซอร์จะเห็นว่าไม่มีเครื่องหมายคำพูดรอบค่าแอตทริบิวต์ให้เพิ่ม:

style=""border:0px""

แต่ในโค้ดอักขระ HTML ของตัวตรวจสอบ DOM จะแสดงอย่างถูกต้องดังนั้นคุณจึงเห็น:

style=""border:0px""

ใน Chrome หากคุณคลิกขวาและเลือกแก้ไข HTML ระบบจะเปลี่ยนกลับเพื่อให้คุณเห็นรหัสอักขระ HTML ที่น่ารังเกียจเหล่านั้นทำให้ชัดเจนว่าคุณมีเครื่องหมายคำพูดภายนอกจริงและเครื่องหมายคำพูดภายในที่เข้ารหัส HTML

ดังนั้นปัญหาในการพยายามยกคำพูดด้วยตัวเองคือ Razor หนีสิ่งเหล่านี้

หากคุณต้องการควบคุมคำพูดที่สมบูรณ์

ใช้ Html.Raw เพื่อป้องกันการหลุดของใบเสนอราคา:

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

แสดงผลเป็น:

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

ข้างต้นปลอดภัยอย่างสมบูรณ์เพราะฉันไม่ได้ส่งออก HTML ใด ๆ จากตัวแปร ตัวแปรเดียวที่เกี่ยวข้องคือเงื่อนไขที่สาม อย่างไรก็ตามโปรดระวังว่าเทคนิคสุดท้ายนี้อาจทำให้คุณพบปัญหาด้านความปลอดภัยหากสร้างสตริงจากข้อมูลที่ผู้ใช้ให้มา เช่นหากคุณสร้างแอตทริบิวต์จากช่องข้อมูลที่มาจากข้อมูลที่ผู้ใช้ให้มาการใช้ Html.Raw หมายความว่าสตริงอาจมีการสิ้นสุดก่อนกำหนดของแอตทริบิวต์และแท็กจากนั้นเริ่มแท็กสคริปต์ที่ทำอะไรบางอย่างในนามของผู้ที่ล็อกอินอยู่ ผู้ใช้ (อาจแตกต่างจากผู้ใช้ที่เข้าสู่ระบบ) บางทีคุณอาจมีหน้าที่มีรายชื่อรูปภาพของผู้ใช้ทั้งหมดและคุณกำลังตั้งคำแนะนำเครื่องมือให้เป็นชื่อผู้ใช้ของแต่ละคนและผู้ใช้หนึ่งคนตั้งชื่อตัวเองว่า'/><script>$.post('changepassword.php?password=123')</script> และตอนนี้ผู้ใช้รายอื่นที่ดูหน้านี้ได้เปลี่ยนรหัสผ่านเป็นรหัสผ่านที่ผู้ใช้ประสงค์ร้ายทราบทันที

ฉันเดาว่าวิธีที่สะดวกและมีแบบแผนกว่าเล็กน้อยคือการใช้ตัวช่วย Html ในมุมมองของคุณอาจมีลักษณะดังนี้:

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

@* ... *@

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

หากวิธีนี้เป็นประโยชน์สำหรับคุณฉันขอแนะนำให้กำหนดพจนานุกรมhtmlAttrในแบบจำลองของคุณเพื่อให้มุมมองของคุณไม่ต้องการ@{ }บล็อกตรรกะใด ๆ(ชัดเจนยิ่งขึ้น)