Warunkowe atrybuty HTML przy użyciu Razor MVC3

Zmienna strCSSClass często ma wartość, ale czasami jest pusta.

Nie chcę umieszczać pustej class = "" w kodzie HTML tego elementu wejściowego, co oznacza, że ​​jeśli strCSSClass jest pusty, w ogóle nie chcę atrybutu class =.

Oto jeden ze sposobów wykonania warunkowego atrybutu HTML:

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

Czy jest na to bardziej elegancki sposób? W szczególności taki, w którym mógłbym zastosować tę samą składnię, jaka jest używana w innych częściach elementu: class = "@ strCSSClass"?

Nie słyszałeś tego ode mnie, kierownika projektu Razor, ale w Razor 2 (strony internetowe 2 i MVC 4) będziemy mieć atrybuty warunkowe wbudowane w Razor (od pomyślnego przetestowania MVC 4 RC), więc możesz po prostu powiedzieć takie rzeczy ...

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

Jeśli strCSSClass ma wartość null, atrybut klasy w ogóle nie będzie renderowany.

SSSHHH ... nie mów. :)

Zauważ, że możesz zrobić coś takiego (przynajmniej w MVC3):

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

Uważałem, że dodawanie cytatów za pomocą brzytwy było w rzeczywistości przeglądarką. Jak zauważył Rism podczas testowania z MVC 4 (nie testowałem z MVC 3, ale zakładam, że zachowanie się nie zmieniło), to faktycznie daje, class=TopBorderale przeglądarki są w stanie przeanalizować to dobrze. Parsery HTML nieco wybaczają brakujące cudzysłowy atrybutów, ale może się to zepsuć, jeśli masz spacje lub określone znaki .

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

LUB

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

Co idzie nie tak z podawaniem własnych ofert

Jeśli spróbujesz użyć niektórych zwykłych konwencji C # dla zagnieżdżonych cudzysłowów, otrzymasz więcej cudzysłowów niż się spodziewasz, ponieważ Razor próbuje bezpiecznie uciec od nich. Na przykład:

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

To powinno oceniać się <button type="button" style="border:0px">jednak Razor ucieka wszystkie wyjścia z C # i tym samym produkuje:

style="border:0px"

Zobaczysz to tylko wtedy, gdy przeglądasz odpowiedź przez sieć. Jeśli używasz inspektora HTML, często faktycznie widzisz DOM, a nie surowy HTML. Przeglądarki parsują HTML do DOM, a reprezentacja DOM po przeanalizowaniu ma już zastosowane pewne elementy. W tym przypadku przeglądarka widzi, że nie ma cudzysłowów wokół wartości atrybutu, dodaje je:

style=""border:0px""

Ale w Inspektorze DOM kody znaków HTML są wyświetlane poprawnie, więc faktycznie widzisz:

style=""border:0px""

W przeglądarce Chrome, jeśli klikniesz prawym przyciskiem myszy i wybierzesz Edytuj HTML, przełączy się z powrotem, abyś mógł zobaczyć te paskudne kody znaków HTML, wyjaśniając, że masz prawdziwe cudzysłowy zewnętrzne i wewnętrzne cudzysłowy zakodowane w HTML.

Więc problem z próbą wykonania cytowania jest taki, że Razor wymyka się tym.

Jeśli chcesz mieć pełną kontrolę nad ofertami

Użyj Html.Raw, aby zapobiec ucieczce cytatów:

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

Renderuje jako:

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

Powyższe jest całkowicie bezpieczne, ponieważ nie wyświetlam kodu HTML ze zmiennej. Jedyną zaangażowaną zmienną jest warunek trójskładnikowy. Uważaj jednak, ponieważ ta ostatnia technika może narazić Cię na pewne problemy z bezpieczeństwem, jeśli budujesz ciągi znaków z danych dostarczonych przez użytkownika. Np. Jeśli zbudowałeś atrybut z pól danych, które pochodzą z danych dostarczonych przez użytkownika, użycie Html.Raw oznacza, że ​​ciąg może zawierać przedwczesne zakończenie atrybutu i tagu, a następnie rozpocznij tag skryptu, który robi coś w imieniu aktualnie zalogowanego użytkownik (prawdopodobnie inny niż zalogowany użytkownik). Może masz stronę z listą wszystkich zdjęć użytkowników i ustawiasz podpowiedź tak, aby była nazwą użytkownika każdej osoby, a jeden użytkownik nazwał siebie'/><script>$.post('changepassword.php?password=123')</script> a teraz każdy inny użytkownik przeglądający tę stronę ma natychmiastowo zmienione hasło na hasło znane złośliwemu użytkownikowi.

Wydaje mi się, że trochę wygodniejszym i bardziej uporządkowanym sposobem jest użycie helpera HTML. Twoim zdaniem może to wyglądać tak:

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

@* ... *@

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

Jeśli ten sposób będzie dla Ciebie przydatny, polecam zdefiniowanie słownika htmlAttrw modelu, aby Twój widok nie wymagał żadnych @{ }bloków logicznych (aby był bardziej przejrzysty).