Category Archives: HTML, CSS, JScript

ASP.NET MVC Razor: Renderování stringů do JavaScriptu

Pokud se budete pokoušet v Razor-View vytvořit JavaScript přiřazením textových hodnot, můžete si pěkně naběhnout:

var name = '@Model.Name';

Pokud totiž v Model.Name bude nějaká záludnější hodnota, dostanete například:

var name = 'Božíčku kolekcička'\'  // original: Božíčku kolekcička'\

Taky možná najdete, že existuje HttpUtility.JavaScriptStringEncode() a zkusíte:

var name = '@HttpUtility.JavaScriptStringEncode(Model.Name)';

…což taky nedopadne nejlépe:

var name = 'Božíčku kolekcička\u0027\\'  // original: Božíčku kolekcička'\

Až nakonec přijdete na to, že je potřeba:

var name = '@Html.Raw(HttpUtility.JavaScriptStringEncode(Model.Name))';

…abyste dostali:

var name = 'Božíčku kolekcička\u0027\\'  // original: Božíčku kolekcička'\

Případně použijete variantu, která si uvozovky (ne apostrofy) doplní sama.

var name = @Html.Raw(Json.Encode(Model.Name));

…z čehož plyne poučení, že se takto string do HTML raději nepokoušejte vůbec emitovat a raději přenášejte JSON objekty.

Cookie, case senzitivita a .NET Framework

Chrome a Firefox podporují case-senzitivní cookie.
.NET Framework podporuje case-senzitivní cookie.
Ale pozor, například vyhledávání v kolekci Request.Cookies (Request.Cookies[„xxxxxx“], typ HttpCookieCollection) je case-nesenzitivní, což může vést k nepříjemným chybám.
Pokud cookie přejmenujeme tak, že změníme pouze velikost písmen, tak následně se nám může v kolekci Request.Cookies najít původní cookie místo nové, přejmenované…

Copy–Paste a nechtěné mezery ve formulářích

Ve formulářovém poli chceme po uživateli e-mailovou adresu nebo třeba nový login name – jaké je jeho rozčarování, když po vložení adresy pomocí CTRL-V (zkopírované např. z Excelu), aplikace hlásí
nevalidní údaj.
Na vině jsou nechtěné mezery připojené za (a někdy i před) adresu.
Nechtěné mezery nám pomůže odstranit funkce aktivovaná událostí input -> na oninput řetězec trimujeme.
Provedeme to pouze, pokud se otrimovaný a původní řetězec liší (tj. je co trimovat) – pokud bychom to dělali bez této podmínky, tak vždy, když by uživatel ručně vepsal nějaký znak, skočil by mu kurzor v políčku na konec pole (i tehdy, pokud by něco editoval uprostřed textu).

if (formField.value != formField.value.trim())
{
    formField.value = formField.value.trim();
}

Pro ASP.NET si můžeme vytvořit takovýto skin:

<asp:TextBox SkinID="TrimOnInput" oninput="if (this.value!=this.value.trim()) {this.value=this.value.trim();};" runat="server" /> 

Funkce se nehodí pro pole, která mají obsahovat mezeru mezi slovy (např. „Jan Novák“) – i když takové celé jméno lze do pole vložit pomocí CTRL-C, zcela určitě nebude možné jméno pohodlně napsat – pole se totiž chová tak, že na stisk mezerníku za slovem nereaguje.

JavaScript: Metoda parseInt vrací nečekané výsledky

Metoda parseInt vrací celočíselnou hodnotu získanou z řetězce. Metoda toho umí ve skutečnosti více, než je od ní očekáváno – pokud řetězec začíná „0x“, považuje se řetězec za zápis čísla v šestnáckové soustavě, pokud začíná nulou, pak za zápis čísla v osmičkové soustavě. Druhým (nepovinným) parametrem můžeme metodě říct, v jaké číselné soustavě je hodnota uvedena. Pokud metoda při zpracování řetězce narazí na nepodporovaný symbol (znak), končí zpracování (což je v dokumentaci popsáno uvedeno jen v příkladu).

parseInt('abc')             // vrací NaN
parseInt('8abc')           // vrací 8 - zpracování skončí u nepodporovaného symbolu "a"
parseInt('0100')      // vrací 64 - nula na začátku říká, že jde o osmičkovou soustavu, v osmičkové soustavě je "100" reprezentací hodnoty 64
parseInt('08')               // vrací 0 - nula na začátku říká, že jde o osmičkovou soustavu, ta ale nepoužívá symbol 8, na kterém proto skončí zpracování
parseInt('08', 10)       // vrací 8 - uvedli jsme, že hodnota reprezentuje číslo v desítkové soustavě nepodporovanou mezerou
parseInt('1 000', 10) // vrací 1 - zpracování skončí

Pozor proto na zpracování hodnot od uživatele. Pokud není jasné, jak uživatel hodnotu zadá (a to podle mě není jasné nikdy), je potřeba předat metodě parseInt i druhý parameter, jinak se dočkáte stejného překvapení jako já při zpracování času zadaného uživatelem: Vstup „07“ vrátí 7, vstup „08“ vrátí 0.
Pozor i na situaci, kdy uživatel zadá formátované číslo – například s oddělovačem tisíců. A takový javascript nemusíme ani psát ručně, stačí použít některý z validátorů (ASP.NET), který používá parseInt.

IE: Při použití auto-complete se nevyvolá událost onChange

Internet Explorer při použití auto-complete nevyvolá na daném prvku (inputu) událost onChange, bug (i když někteří by možná řekli by-design).

Mimo obskurnějších řešení se dá auto-complete na daném prvku prostě vypnout:

<input ... autocomplete="off" />
<asp:TextBox ... autocomplete="off" />

Případně ho vypnout na celém formuláři:

<form ... autocomplete="off">

…nefunguje bohužel možnost na celém formuláři vypnout a uvnitř na některých prvcích zapnout.

Šířka tlačítek v IE (input type=“button“)

V Internet Exploreru je docela alchymie vyrobit tlačítko, které je široké stejně jako text na něm.

<input type="button" value="Text tlačítka" class="button"/>
<asp:Button ID="MyButton" Text="Text tlačítka" class="button"/>

Co jinde funguje, v IE selhává:

.button {
    margin:0;
    padding:0;
}

Co však kupodivu pomůže, je nastavení:

.button{
    padding:0;
    width:auto;
    overflow:visible;
}

…někdy je lepší nebádat, proč tomu tak je.

Mozilla FireFox: Nefunguje XHTML-validní image-map

Následující XHTML-validní image-map v Mozille nechodí:

<img id="reklama" src=".." width="200" height="600" alt="..." usemap="#mapa" />
<map id="mapa">
    <area shape="rect" coords="10,110,186,245" alt="..." href="..." target="_blank" >
</map>

Mozille nestačí <map id=“…“> nýbrž vyžaduje <map name=“…“>… :-(((

Demo: http://www.bernzilla.com/bugs/imagemap1.html