Odgovori znanstvenikov html. Opis objekta Response. Vprašajte profesorja Markupa
Prevod: Vlad Merzhevich
Vsi poznajo spletne obrazce, kajne? Vstavimo oznako, nekaj, mogoče, vse dopolnimo z gumbom in končali ste.
Ne veš niti polovice tega. HTML5 definira več kot ducat novih vrst polj, ki jih lahko uporabite v svojih obrazcih. In ko rečem "uporaba", mislim, da jih je mogoče uporabiti takoj - brez kakršnih koli trikov, vdorov ali rešitev. Ne skrbite preveč, ne trdim, da so vse te razburljive nove funkcije dejansko podprte v vsakem brskalniku. Absolutno ne, ne mislim pri vseh. V sodobnih brskalnikih, da, vaši obrazci bodo pokazali vse, česar so sposobni. Toda v starejših brskalnikih bodo vaši obrazci še vedno delovali, čeprav ne v celoti. To pomeni, da se te funkcije elegantno poslabšajo v vsakem brskalniku. Tudi v IE6.
Pozivno besedilo| tj. | Firefox | Safari | Chrome | Opera | iPhone | Android |
| - | 4.0+ | 4.0+ | 4.0+ | 11.0+ | 4.0+ | - |
Prva izboljšava HTML5 v zvezi z obrazci je možnost nastavitve besedila poziva v vnosno polje. To besedilo je prikazano v polju za vnos, če je polje prazno in nima fokusa. Takoj, ko kliknete polje za vnos (ali se do njega pomaknete s tabulatorko), besedilo namiga izgine.
Verjetno ste že videli besedilo poziva. na primer Mozilla Firefox vključuje besedilo namiga v naslovna vrstica z napisom "Išči v zaznamkih in dnevniku."
Ko kliknete na naslovno vrstico, besedilo namiga izgine.
Tukaj je opisano, kako lahko v svoje obrazce vključite sugestivno besedilo.
Brskalniki, ki ne podpirajo atributa placeholder, ga preprosto ignorirajo. Brez škode ali kršitve.
Vprašajte profesorja Markupa☞ Q. Ali lahko uporabim HTML oznaka za atribut placeholder? Želim vstaviti sliko ali morda spremeniti barve.
O. Atribut nadomestnega znaka lahko vsebuje samo besedilo, brez kode HTML. Vendar pa obstajajo posebne razširitve CSS, ki vam omogočajo nastavitev sloga besedila v nekaterih brskalnikih.
Polja samodejnega ostrenja| tj. | Firefox | Safari | Chrome | Opera | iPhone | Android |
| - | - | 4.0+ | 3.0+ | 10.0+ | - | - |
Spletna mesta lahko uporabljajo JavaScript za avtomatski prejem fokus v prvem polju obrazca. Na primer na glavni strani Google.com Polje za vnos iskalnih ključnih besed ima samodejno ostrenje. Čeprav je to priročno za večino ljudi, je lahko nadležno za napredne uporabnike in ljudi s posebnimi potrebami. Če pritisnete preslednico, medtem ko čakate, da se stran pomakne, pomikanja ne bo, ker je fokus na vnosnem polju obrazca (namesto pomikanja bo v polje vnesel presledek). Če med nalaganjem strani fokus premaknete na drugo vnosno polje, lahko skript za samodejno ostrenje spletnega mesta "v pomoč" premakne fokus nazaj na prvotno vnosno polje, kar prekine vaše tipkanje in povzroči, da tipkate na napačnem mestu.
Ker samodejno ostrenje deluje prek JavaScripta, lahko pride do težav pri obravnavanju teh skrajnih primerov in malo možnosti za tiste ljudi, ki ne želijo, da bi jim spletna stran "ukradla" fokus.
Za rešitev teh težav HTML5 uvaja atribut samodejnega ostrenja za vse elemente obrazca. Atribut samodejnega ostrenja naredi točno to, kar se sliši: takoj ko se stran naloži, premakne fokus na določeno polje. Ker pa je to samo oznaka in ne skript, bo vedenje dosledno na vseh spletnih mestih. Poleg tega lahko proizvajalci brskalnikov (ali avtorji razširitev) uporabnikom ponudijo način za onemogočanje samodejnega ostrenja.
Tukaj je opisano, kako lahko polje obrazca nastavite na samodejno ostrenje.
Brskalniki, ki ne podpirajo atributa samodejnega ostrenja, ga bodo prezrli.
Kaj se je zgodilo? Recimo, da želite, da samodejno ostrenje deluje povsod, ne samo v modnih brskalnikih HTML5? Trenutni skript lahko pustite s samodejnim ostrenjem, le naredite dve majhni spremembi:
- dodajte atribut samodejnega ostrenja v kodo HTML;
- Preverite, ali brskalnik podpira atribut samodejnega ostrenja, in če ne, zaženite svoj skript.
Samodejno ostrenje z alternativo
if (!("samodejno ostrenje" v document.createElement("input")) ) (
document.getElementById("q").focus();
}
Veliko spletnih strani čaka, da se window.onload sproži in nastavi fokus. Toda dogodek window.onload se ne sproži, dokler se ne naložijo vse slike. Če ima vaša stran veliko slik, bodo takšni naivni skripti morda spremenili fokus, ko bo uporabnik začel komunicirati z drugim delom vaše strani. Zato napredni uporabniki sovražijo skripte za samodejno ostrenje.
Na primer, v prejšnjem razdelku je bil skript samodejnega ostrenja postavljen takoj za poljem obrazca, na katerega se sklicuje. to optimalna rešitev, vendar bo morda užalilo vašo občutljivost, če postavite blok kode JavaScript na sredino strani (ali bolj vsakdanje, vaš sistem morda ni tako prilagodljiv). Če ne morete vstaviti skripta na sredino strani, bi morali fokus nastaviti prek dogodka po meri, kot je $(document).ready() v jQuery namesto window.onload.
Samodejno ostrenje prek jQuery
$(dokument).pripravljen(funkcija() (
$("#q").fokus();
}
});
Dogodek po meri jQuery se sproži takoj, ko je DOM dostopen – to pomeni, da čaka, da se besedilo strani naloži, vendar ne čaka, da se naložijo vse slike. To ni optimalen pristop – če je stran neobičajno velika oz omrežno povezavo počasen, lahko uporabnik še vedno komunicira s stranjo, preden se izvede fokusni skript. Vendar je še vedno veliko bolje kot čakati, da se zgodi dogodek window.onload.
Če se strinjate in ste pripravljeni v kodo vaše strani vstaviti skript z enim stavkom, je to kompromis, ki je manj grd kot prva možnost in boljši od druge. Dogodke po meri jQuery lahko uporabite za nastavitev lastnih dogodkov, recimo autofocus_ready. Ta dogodek lahko nato sprožite ročno, takoj ko postane polje za samodejno ostrenje na voljo. Hvala E. M. Shtenbergu, da me je naučil te tehnike.
Samodejno ostrenje z nadomestnim dogodkom po meri
$(dokument).bind("autofocus_ready", function() (
if (!("samodejno ostrenje" v dokumentu.createElement("input")))) (
$("#q").fokus();
}
});
$(dokument).trigger("autofocus_ready");
Ta rešitev je optimalna, tako kot prvi pristop. Fokus bo nastavljen na polje obrazca takoj, ko bo to tehnično mogoče, medtem ko se besedilo strani še nalaga. Del logike aplikacije (fokus v polju obrazca) je bil premaknjen iz telesa strani v razdelek. Ta primer temelji na jQuery, vendar koncept dogodkov po meri ni edinstven za jQuery. Druge knjižnice JavaScript, kot sta YUI in Dojo, ponujajo podobne zmogljivosti.
Naj povzamemo.
- Pomembna je pravilna nastavitev fokusa.
- Če je mogoče, naj brskalnik uporabi atribut samodejnega ostrenja na polju, kjer želite izostriti.
- Če uporabljate alternativno kodo za starejše brskalnike, definirajte podporo za atribut samodejnega ostrenja, tako da se skript izvaja samo v starejših brskalnikih.
- Osredotočite se čim prej. Vstavite fokusni skript v kodo takoj za poljem obrazca. Če vas to ne moti, vdelajte knjižnico JavaScript, ki podpira dogodke po meri, in dvignite dogodek v kodi takoj za poljem obrazca. Če to ni mogoče, uporabite dogodek, kot je $(document).ready() iz jQuery.
- V nobenem primeru ne smete čakati, da window.onload pridobi fokus.
Več kot desetletje so obrazci vsebovali le nekaj vrst polj. Najpogostejši so naslednji.
Vse te vrste polj še vedno delujejo v HTML5. Če "nadgradite na HTML5" (morda tako, da spremenite !DOCTYPE ), vam obrazcev ne bo treba narediti niti ene spremembe. Bravo za nazaj združljivost!
Vendar pa HTML5 definira 13 novih vrst polj in ni razloga, da jih ne bi začeli uporabljati.
Prva od teh novih vrst e-poštnih naslovov. Izgleda nekako takole.
Nameraval sem napisati stavek, ki se je začel z "v brskalnikih, ki ne podpirajo type="email" ...", a se je ustavil. Zakaj? Ker nisem prepričan, ali brskalniki ne podpirajo type="email" . Vsi brskalniki "podpirajo" type="email" . Morda ne naredijo nič posebnega, toda brskalniki, ki ne prepoznajo type="email", ga obravnavajo kot type="text" in ga upodabljajo kot običajno besedilno polje.
Poudaril bom, kako pomembno je to. Na internetu je na milijone obrazcev, ki od vas zahtevajo, da vnesete svoj e-poštni naslov, in vsi uporabljajo . Vidite polje z besedilom, vanj vnesite svoj e-poštni naslov in to je to. In potem pride HTML5, ki definira type="email" . Se brskalnikom zmeša? št. Vsak brskalnik na Zemlji atribut neznane vrste obravnava kot type="text" - celo IE6. Tako lahko zdaj "osvežite" svoje obrazce z uporabo type="email".
Kaj se zgodi, če rečemo, da brskalnik podpira type="email"? No, lahko pomeni karkoli. Specifikacija HTML5 ne zahteva posebnega uporabniškega vmesnika za nove vrste polj. Opera doda majhno ikono v polje obrazca. Drugi brskalniki HTML5, kot sta Safari in Chrome, upodabljajo kot besedilno polje – enako kot type="text" – tako da vaši uporabniki ne bodo opazili razlike (dokler ne pogledajo izvorne kode).
In potem je tu še iPhone.
iPhone nima fizične tipkovnice. Vse »tipkanje« poteka s klikom na zaslonsko tipkovnico, ki se prikaže ob ustreznem času, na primer, ko greste v polje obrazca na spletni strani. Apple je naredil nekaj pametnega brskalnik iPhone. Prepozna nekaj novih polj HTML5 in dinamično spremeni zaslonsko tipkovnico za optimizacijo vnosa.
Na primer, e-poštni naslov je besedilo, kajne? Seveda, ampak to je posebna vrsta besedila. Tako skoraj vsi elektronski naslovi vsebujejo simbol @ in glede na vsaj, ena pika (.), vendar je malo verjetno, da vsebujejo presledek. Torej, ko uporabljate iPhone in obiščete , boste prejeli zaslonsko tipkovnico, ki vključuje manjši preslednik in namenske tipke za simbole. In @.
Naj povzamem. Ni slabe strani, da takoj prevedete vsa svoja polja e-poštni naslovi v type="email" . Tega ne bo opazil skoraj nihče, razen uporabnikov iPhonov, ki verjetno tudi ne bodo opazili. Toda tisti, ki opazijo, se bodo tiho nasmehnili in zahvalili, da ste jim vsaj malo olajšali delo.
Spletni nasloviSpletni naslov – ki so ga geeki po standardih imenovali URL-ji, razen nekaj pedantov, ki so imenovali URI – je druga vrsta specializiranega besedila. Sintaksa spletnega naslova je omejena na ustrezni internetni standard. Če vas nekdo prosi, da v obrazec vnesete spletni naslov, pričakuje nekaj podobnega »http://www.google.com/«, ne »125 Farwood Road«. Poševne črte so pogoste – tudi v domača stran Google jih ima tri. Pogoste so tudi pike, vendar so presledki prepovedani. In vsak spletni naslov ima domensko končnico, kot je ".com" ali ".org".
In tako... (prosim, boben)... . Na iPhonu je videti takole.
iPhone se je spremenil virtualna tipkovnica, tako kot sem naredil za e-poštni naslov, vendar sem ga zdaj optimiziral za tipkanje spletnega naslova. Preslednico so popolnoma nadomestile tri navidezne tipke: poševnica, pika in ».com« (lahko držite tipko ».com«, da izberete drugo končnico, na primer ».org« ali ».net«).
Brskalniki, ki ne podpirajo HTML5, bodo obravnavali type="url" kot type="text" , zato uporaba te vrste za vsa polja, v katera morate vnesti spletni naslov, ni slaba stran.
Številke kot števciNaslednji korak: številke. Zahteva po številki je bolj zapletena kot zahteva po e-pošti ali spletnem naslovu. Prvič, številke so bolj zapletene, kot si mislite. Hitro izberite številko. -1? Ne, mislil sem številko med 1 in 10,7 ½? Ne, ne, ne bodi zlomka, neumen. π? Zdaj ste pravkar izbrali iracionalno število.
Rad bi opozoril, da vas pogosto ne vprašajo "samo številka". Bolj verjetno je, da bodo zahtevali številko v določenem obsegu. Morda boste želeli le določene vrste števil znotraj tega obsega – morda cela števila, ne pa ulomkov oz decimalna števila ali kaj bolj eksotičnega, kot so večkratniki 10. HTML5 pokriva vse.
Izberite številko, skoraj katero koli
Poglejmo en atribut naenkrat.
- type="number" pomeni, da je to številsko polje.
- min="0" določa najmanjšo dovoljeno vrednost za to polje.
- max="10" je največja dovoljena vrednost.
- step="2" v kombinaciji z najmanjšo vrednostjo določa veljavna števila v obsegu: 0, 2, 4 in tako naprej, do največje vrednosti.
- value="6" privzeta vrednost. Morda bi bilo videti znano, to je isti atribut, ki se vedno uporablja za definiranje vrednosti polj obrazca. To tukaj omenjam kot izhodišče, na katerem temelji HTML5 prejšnje različice HTML. Ni se vam treba znova učiti delati tega, kar ste že naredili.
To je koda za številsko polje. Ne pozabite, da so vsi ti atributi neobvezni. Če imate minimum, ne pa tudi maksimuma, lahko podate atribut min, ne pa tudi atributa max. Privzeta vrednost koraka je 1 in atribut koraka lahko izpustite, dokler ni potrebna drugačna vrednost koraka. Če ni privzete vrednosti, je lahko atribut vrednosti prazna vrstica ali celo v celoti izpuščeni.
Toda HTML5 se tu ne ustavi. Za enako nizko nizka cena svobodo, ki jo dobite s temi priročnimi metodami JavaScript.
- input.stepUp(n) poveča vrednost polja za n.
- input.stepDown(n) zmanjša vrednost polja za n.
- input.valueAsNumber vrne trenutno vrednost kot število s plavajočo vejico (lastnost input.value je vedno niz).
Težave z zaslonom? No, pravilen vmesnik za upravljanje številk je v brskalnikih implementiran drugače. Na iPhonu, kjer je tipkanje oteženo, brskalnik znova optimizira navidezno tipkovnico za vnos številk.
V namizni različici Opere se polje type="number" prikaže kot števec z majhnima puščicama navzgor in navzdol, na katere lahko kliknete, da spremenite vrednosti.
Opera upošteva atribute min , max in step, tako da boste vedno dosegli sprejemljivo številsko vrednost. Če povečate vrednost na največjo vrednost, puščica navzgor v števcu postane siva.
Tako kot vsa druga vnosna polja, o katerih sem govoril v tem poglavju, ga bodo brskalniki, ki ne podpirajo type="number", obravnavali kot type="text" . Privzeta vrednost bo prikazana v polju (kot je shranjena v atributu vrednosti), drugi atributi, kot sta min in max, pa bodo prezrti. Lahko jih implementirate sami ali uporabite ogrodje JavaScript, ki že izvaja upravljanje števcev. Najprej preveri tukaj.
if (! .inputtypes.number) (
// ni izvorne podpore za polje type=number
// lahko poskusite Dojo ali drugo ogrodje JavaScript
}
Števec ni edina pot predstavitve vnosa številk. Verjetno ste tudi že videli drsnik, ki izgleda takole.
Zdaj imate lahko na obrazcu tudi drsnik. Koda je nenavadno podobna polju števca.
Vsi razpoložljivi atributi so enaki kot za type="number" - min , max , step , value - in pomenijo isto stvar. Edina razlika je Uporabniški vmesnik. Namesto vnosnega polja naj bi brskalniki prikazali type="range" kot drsnik. V času pisanja najnovejše različice Safari, Chrome in Opera so delali s tem. Na žalost se iPhone prikaže kot preprost besedilno polje, svoje zaslonske tipkovnice niti ne optimizira za vnos številk. Vsi drugi brskalniki polje preprosto obravnavajo kot type="text" , zato ni razloga, da bi takoj začeli uporabljati to vrsto.
HTML 4 ne vključuje izbire datuma prek koledarja. Ogrodja JavaScript vam omogočajo, da se temu izognete (Dojo, jQuery UI, YUI, Closure Library), seveda pa vsaka od teh rešitev zahteva "implementacijo" ogrodja za kateri koli vgrajeni koledar.
HTML5 končno definira način za omogočanje izvirnih izbirnikov datumov brez kakršnega koli skriptiranja. Pravzaprav jih je šest: datum, mesec, teden, čas, datum + čas in datum + čas s časovnim pasom.
Zaenkrat je podpora ... skromna.
| tip="datum" | 9.0+ | - |
| tip="mesec" | 9.0+ | - |
| tip="teden" | 9.0+ | - |
| tip="čas" | 9.0+ | - |
| type="datetime" | 9.0+ | - |
| type="datetime-local" | 9.0+ | - |
Opera prikazuje takole:
Če potrebujete čas poleg datuma, Opera podpira tudi:
Če potrebujete mesec in leto (na primer datum poteka kreditne kartice), lahko Opera prikaže:
Manj običajno, vendar na voljo, je izbira tedna v letu prek:
Nenazadnje je čas z:
Izbirnik datuma z alternativo
...
var i = document.createElement("input");
i.setAttribute("vrsta", "datum");
if (i.type == "text") (
// Ni izvorne podpore za izbirnik datuma :(
// Uporabite Dojo/jQueryUI/YUI/Closure, da ga ustvarite,
// nato dinamično zamenjajte element
}
Verjetno bodo drugi brskalniki sčasoma podpirali te vrste. Tako kot type="email" in druge vrste bodo ta polja obrazca prikazana kot golo besedilo v brskalnikih, ki ne prepoznajo type="date" in njegovih različic. Če želite, lahko preprosto uporabite , razveselite uporabnike Opere in počakate, da jih drugi brskalniki dohitijo. To je bolj realistično uporabiti, vendar preverite, ali ima brskalnik izvorno podporo za izbirnik datumov, in vključite alternativno rešitev v obliki skripta po vaši izbiri (Dojo, jQuery UI, YUI, Closure Library ali druge možnosti).
Iskalno oknoTorej, iskanje. Ne samo iskanja iz Googla ali Yahooja (no, tudi teh). Pomislite na katero koli iskalno polje, na kateri koli strani, na katerem koli spletnem mestu. Amazon ima iskalno polje, Yandex ima iskalno polje, večina blogov tudi. Kako so narejeni? , tako kot vsa druga besedilna polja v spletu. Popravimo to.
Iskanje nove generacije
V nekaterih brskalnikih ne boste opazili nobene razlike od navadnega besedilnega polja. Če pa uporabljate Safari v sistemu Mac OS X, bo videti takole.
Ste našli razliko? Vnosno polje ima zaobljene vogale! Vem, vem, komaj zadržuješ svoja čustva. Toda počakaj, še več je! Ko začnete tipkati type="search" v polje, bo Safari vstavil majhen gumb "x" na desni strani okna. S klikom na "x" počistite vsebino polja. Google Chrome, ki ima pod pokrovom enako tehnologijo, se obnaša enako. Oba trika izgledata in se obnašata podobno izvornemu iskanju v iTunes in drugih odjemalskih aplikacijah Mac OS X.
Apple.com uporablja iskanje po spletnem mestu, da pomaga spletnemu mestu prenesti občutek "ljubečega ara". Vendar tukaj ni nič posebnega za Mace. To je le koda, tako da lahko vsak brskalnik na vsaki platformi izbere način upodabljanja v skladu s konvencijami platforme. Tako kot pri vseh drugih novih vrstah, ga bodo brskalniki, ki ne prepoznajo type="search", obravnavali kot type="text" , zato ni nobenega razloga, da ne bi že danes začeli uporabljati type="search" za vsa iskalna polja.
Profesor Markup praviSafari privzeto ne uporablja večine slogov. Če želite Safari prisiliti, da iskalno polje obravnava kot običajno besedilno polje (da lahko uporabite svoje sloge), dodajte to pravilo v svoj slogovni list.
vnos (
-webkit-appearance:textfield;
}
Hvala Johnu Lanu, da me je naučil tega trika.
Izbira barveHTML5 definira tudi polje, ki omogoča izbiro barve in jo vrne v šestnajstiški obliki. Noben brskalnik ne podpira izbirnikov barv, kar je škoda, ker so mi bile vedno všeč palete Mac OS. Mogoče nekega dne.
Opomba prevajalec Opera 11 podpira to funkcijo.
Preverjanje obrazcaV tem poglavju sem govoril o novih elementih obrazcev in novih funkcijah, kot je samodejno ostrenje, nisem pa omenil morda najbolj razburljivega dela obrazcev HTML5: samodejno preverjanje vhodni podatki. Razmislimo pogoste težave vnesite svoj e-poštni naslov v obrazec. Verjetno imate preverjanje na strani odjemalca prek JavaScripta, ki mu sledi preverjanje na strani strežnika prek PHP, Python ali drugega jezika na strani strežnika. HTML5 ne bo nikoli nadomestil preverjanja veljavnosti na strani strežnika, lahko pa bo nekega dne nadomestil preverjanje veljavnosti na strani odjemalca.
Obstajata dve veliki težavi s preverjanjem e-poštnih naslovov v JavaScriptu:
Resno, naslov se bo zmotil. Določanje, da je nabor naključnih znakov veljaven e-poštni naslov, je izjemno težko. Bolj ko gledaš, težje postane. Sem omenil, da je to zelo, zelo težko? Ali ni lažje ta glavobol obesiti na vaš brskalnik?
Opera preverja type="email"
Tukaj je posnetek zaslona iz Opere 11, čeprav je funkcionalnost prisotna že od Opere 9. Koda vključuje nastavitev e-poštne vrednosti za atribut tipa. Ko uporabnik Opere poskuša oddati obrazec z , brskalnik samodejno preveri e-poštni naslov, tudi če so skripti onemogočeni.
HTML5 ponuja tudi preverjanje spletnih naslovov s poljem in številk z . Preverjanje števila upošteva vrednosti atributov min in max, zato vam brskalniki ne bodo dovolili oddaje obrazca, če vnesete preveliko število.
V HTML5 ni kode, ki bi omogočala preverjanje obrazca, to je privzeto. Če želite onemogočiti preverjanje, uporabite atribut novalidate.
Ne preizkušaj me
Brskalniki so počasi vključili podporo za preverjanje obrazcev v HTML5. Firefox 4 bo imel polno podporo. Na žalost sta Safari in Chrome implementirana le delno: preverjata elemente obrazca, vendar ne prikažeta nobenih vidnih sporočil, ko polje obrazca ne prestane preverjanja. Z drugimi besedami, če v type="date" vnesete napačen (ali napačno črkovan) datum, Safari in Chrome ne bosta poslala obrazca, vendar vam ne bosta povedala, zakaj ga nista poslala. Osredotočili se bodo na polje, ki vsebuje neveljavno vrednost, vendar ne bodo prikazali sporočila o napaki, kot je Opera ali Firefox 4.
Zahtevana polja| tj. | Firefox | Safari | Chrome | Opera | iPhone | Android |
| - | 4.0+ | - | - | 9.0+ | - | - |
Preverjanje obrazca v HTML5 ni omejeno na vrsto posameznega polja. Določite lahko tudi, da so nekatera polja obvezna, ta polja morajo imeti vrednost, preden lahko oddate obrazec.
Koda za zahtevana polja je čim preprostejša.
Brskalniki lahko spremenijo prvotni videz zahtevanega polja. Tukaj je primer, kako izgleda v brskalniku Mozilla Firefox 4.0.
Poleg tega, če poskusite oddati obrazec, ne da bi izpolnili zahtevano vrednost, bo Firefox prikazal vrstico z informacijami, ki pravi, da je polje obvezno in ne sme biti prazno.
Ustvarjanje odgovora krmilnikov
Ko krmilnik konča obdelavo zahteve, mora običajno ustvariti odgovor. Ko ustvarimo nizkonivojski krmilnik z neposredno implementacijo vmesnika IController, moramo prevzeti odgovornost za vsak vidik obdelave zahtev, vključno z generiranjem odgovora stranki.
Če želite na primer poslati odgovor HTML, bi morali ustvariti in sestaviti podatke HTML ter jih nato poslati odjemalcu z uporabo metode Response.Write(). Podobno boste morali za preusmeritev uporabnikovega brskalnika na drug URL poklicati metodo Response.Redirect() in ji posredovati zahtevani URL. Oba pristopa sta prikazana v spodnji kodi, ki prikazuje razširitve razreda BasicController, ki smo ga ustvarili v prejšnjem članku z implementacijo vmesnika IController:
Uporaba System.Web.Mvc; z uporabo System.Web.Routing; imenski prostor ControllersAndActions.Controllers ( javni razred BasicController: IController ( public void Execute(RequestContext requestContext) ( krmilnik niza = (niz)requestContext.RouteData.Values["krmilnik"]; dejanje niza = (niz)requestContext.RouteData.Values["dejanje "]; if (action.ToLower() == "redirect") ( requestContext.HttpContext.Response.Redirect("/Derived/Index"); ) else ( requestContext.HttpContext.Response.Write(string.Format("Controller) : (0), način dejanja: (1)", krmilnik, dejanje)); ) ) ) )
Enak pristop lahko uporabimo v primeru dedovanja krmilnika iz razreda Controller. Razred HttpResponseBase, ki je vrnjen, ko je lastnost requestContext.HttpContext.Response prebrana v metodi Execute(), je dostopen prek lastnosti Controller.Response, kot je prikazano v spodnjem primeru, ki razširja razred DerivedController, ki ga je prav tako prej ustvaril dedovanje iz razreda Controller:
Uporaba sistema; z uporabo System.Web; z uporabo System.Web.Mvc; imenski prostor ControllersAndActions.Controllers ( javni razred DerivedController: Controller ( javni ActionResult Index() ( // ... ) javni void ProduceOutput() ( if (Server.MachineName == "ProfessorWeb") Response.Redirect("/Basic/Index" ); else Response.Write("Krmilnik: Izpeljano, Metoda dejanja: ProduceOutput"); ) ) )
Metoda ProduceOutput() uporablja vrednost lastnosti Server.MachineName, da se odloči, kateri odgovor poslati odjemalcu. ("ProfessorWeb" je ime mojega razvojnega stroja.)
Čeprav ta pristop generiranja odziva uporabniku deluje, obstaja več težav:
Razredi krmilnikov morajo vsebovati informacije o Struktura HTML ali URL, zaradi česar je razrede težko brati in vzdrževati.
Krmilnik, ki generira odziv neposredno na izhod, je težko preizkusiti enoto. Ustvariti boste morali lažne izvedbe objekta Response in nato biti sposobni obdelati izhod iz krmilnika, da ugotovite, kaj je. To lahko na primer pomeni, da je treba oznako HTML razčleniti v ključne besede, kar je dolgotrajen in dolgočasen proces.
Obdelava majhnih podrobnosti vsakega odgovora na ta način je zapletena in nagnjena k napakam. Nekateri programerji imajo radi absolutni nadzor, ki ga zagotavlja izdelava nizkonivojskega krmilnika, vendar se to običajno zelo hitro zaplete.
Na srečo ima MVC Framework priročno orodje, ki rešuje vse te težave – rezultate dejanj. Naslednji razdelki pojasnjujejo koncept rezultatov dejanj in kažejo različne načine njegovo uporabo za generiranje odgovorov krmilnikov.
Rezultati dejanjRezultati dejanj v ogrodju MVC se uporabljajo za ločevanje izjav o nameri od izvedbe namena (oprostite za tavtologijo). Koncept se bo zdel preprost, ko ga boste razumeli, vendar bo trajalo nekaj časa, da ga boste razumeli zaradi nekaj posrednosti.
Namesto da bi neposredno obravnavali objekt Response, metode dejanja vrnejo objekt razreda, izpeljanega iz ActionResult, ki opisuje, kakšen mora biti odgovor krmilnika – na primer upodabljanje pogleda ali preusmeritev na drug URL ali metodo dejanja. Vendar (to je sama posrednost) odgovor ni neposredno generiran. Namesto tega se ustvari objekt ActionResult, ki ga ogrodje MVC obdela, da ustvari rezultat po klicu metode dejanja.
Sistem rezultatov dejanj je primer vzorca oblikovanja ukaza. Ta vzorec predstavlja scenarije, v katerih shranjujete in posredujete objekte, ki opisujejo operacije, ki se izvajajo.
Ko ogrodje MVC prejme objekt ActionResult od metode dejanja, pokliče Metoda ExecuteResult()., definiran v razredu tega objekta. Implementacija rezultatov dejanja nato deluje na objektu Response in ustvari izhod, ki se ujema z vašim namenom. Da bi to prikazali v akciji, ustvarimo mapo Infrastructure in ji dodamo novo datoteko razreda z imenom CustomRedirectResult.cs z izvedbo ActionResult po meri, prikazano v spodnjem primeru:
Uporaba System.Web.Mvc; imenski prostor ControllersAndActions.Infrastructure ( javni razred CustomRedirectResult: ActionResult ( javni niz Url ( get; set; ) javna preglasitev void ExecuteResult(ControllerContext context) ( niz fullUrl = UrlHelper.GenerateContentUrl(Url, context.HttpContext); context.HttpContext.Response.Redirect (polniUrl); ) ) )
Ta razred temelji na načinu delovanja razreda System.Web.Mvc.RedirectResult. Ena od prednosti odprtokodno Ogrodje MVC je namenjeno raziskovanju notranjega delovanja česar koli. Razred CustomRedirectResult je veliko enostavnejši od njegovega ekvivalenta MVC, vendar zadostuje za namene tega članka.
Ko instanciramo razred RedirectResult, posredujemo URL, na katerega naj bo uporabnik preusmerjen. Metoda ExecuteResult(), ki jo bo izvedel ogrodje MVC, ko se zaključi metoda dejanja, prejme objekt Response za zahtevo prek predmeta ControllerContext, ki ga je zagotovilo ogrodje, in pokliče metodo RedirectPermanent() ali metodo Redirect() (to je točno to, kar je bilo narejeno znotraj nizkonivojske implementacije IControllerja v primeru v prejšnjem članku).
Uporaba razreda CustomRedirectResult je prikazana v spodnjem primeru, ki prikazuje spremembe, ki so bile narejene v izpeljanem krmilniku:
// ... using ControllersAndActions.Infrastructure; imenski prostor ControllersAndActions.Controllers ( public class DerivedController: Controller ( public ActionResult Index() ( // ... ) public ActionResult ProduceOutput() ( if (Server.MachineName == "MyMachineName") vrni nov CustomRedirectResult ( Url = "/Basic/ Index" ); else ( Response.Write("Controller: Derived, Action Method: ProduceOutput"); return null; ) ) ) )
Upoštevajte, da smo bili prisiljeni spremeniti rezultat metode dejanja, da vrne ActionResult. Vrnemo vrednost null, če ne želimo, da ogrodje MVC naredi karkoli, ko se izvede naša metoda dejanja, kar smo storili, če primerek CustomRedirectResult ni bil vrnjen.
Krmilniki in dejanja za testiranje enot
Številni deli ogrodja MVC so zasnovani tako, da olajšajo testiranje enot, kar še posebej velja za dejanja in krmilnike. Razlogov za to podporo je več:
Dejanja in krmilnike lahko preizkusite zunaj spletnega strežnika. Do kontekstnih objektov se dostopa prek njihovih osnovnih razredov (kot je HttpRequestBase), ki jih je enostavno zasmehovati.
Če želite preizkusiti rezultate metode dejanja, vam ni treba razčleniti oznake HTML. Če želite zagotoviti, da dobite pričakovane rezultate, lahko pregledate vrnjeni objekt ActionResult.
Emulacija zahtev strank ni potrebna. Sistem za vezavo modela ogrodja MVC vam omogoča pisanje akcijskih metod, ki prejmejo vnos v svojih parametrih. Če želite preskusiti akcijsko metodo, jo preprosto pokličete neposredno in zagotovite ustrezne vrednosti parametrov.
Prihodnji članki o ustvarjanju podatkov iz krmilnikov vam bodo pokazali, kako ustvariti teste enot za različne vrste rezultatov dejanj.
Ne pozabite, da je testiranje enot le del slike. Zapleteno vedenje v aplikaciji se pojavi, ko se metode dejanj kličejo zaporedno. Testiranje enot deluje najbolje v kombinaciji z drugimi pristopi testiranja.
Zdaj, ko veste, kako deluje poseben rezultat dejanja preusmeritve, lahko preklopite na njegov ekvivalent, ki ga ponuja ogrodje MVC, ki je močnejše in ga je Microsoft temeljito preizkusil. Zahtevana sprememba izpeljanega krmilnika je navedena spodaj:
// ... public ActionResult ProduceOutput() ( vrni nov RedirectResult("/Basic/Index"); ) // ...
Pogojni stavek je bil odstranjen iz metode dejanja, kar pomeni, da bo brskalnik po zagonu aplikacije in navigaciji do URL-ja, kot je /Derived/ProduceOutput, preusmerjen na URL, kot je /Basic/Index. Za poenostavitev kode metode dejanja razred Controller vključuje priročne metode za generiranje različnih vrst objektov ActionResult. Tako lahko na primer dosežemo enak učinek kot v zgornjem primeru, če vrnemo rezultat metode Redirect():
// ... public ActionResult ProduceOutput() ( return Redirect("/Basic/Index"); ) // ...
Sistem rezultatov dejanj ni nič posebej zapletenega, vendar na koncu pomaga ustvariti enostavnejšo, čistejšo in doslednejšo kodo, ki jo je enostavno brati in testirati enoto. Na primer, v primeru preusmeritve lahko preprosto preverite, ali metoda dejanja vrne primerek RedirectResult, katerega lastnost Url vsebuje pričakovan cilj.
Ogrodje MVC definira številne vgrajene tipe rezultatov dejanj, ki so opisani v spodnji tabeli:
| ViewResult | Upodobi določeno ali standardno predlogo pogleda |
ogled () |
| PartialViewResult | Upodobi določeno ali standardno predlogo delnega pogleda |
DelniPogled() |
| RedirectToRouteResult | Težave Preusmeritev HTTP 301 ali 302 do metode dejanja ali določenega vnosa poti, generiranje URL-ja glede na konfiguracijo usmerjanja |
RedirectToAction() RedirectToActionPermanent() RedirectToRoute() RedirectToRoutePermanent() |
| RedirectResult | Izda preusmeritev HTTP 301 ali 302 na dani URL |
Preusmeri() RedirectPermanent() |
| ContentResult | Brskalniku vrne neformatirane besedilne podatke in dodatno nastavi glavo vrste vsebine |
Vsebina() |
| FileResult | Prenese binarne podatke (kot je datoteka na disku ali niz bajtov v pomnilniku) neposredno v brskalnik |
Mapa() |
| JsonResult | Serializira predmet .NET v format JSON in ga pošlje kot odgovor. Tovrstni odgovori se pogosteje ustvarijo pri uporabi orodij Web API in AJAX |
Json() |
| JavaScriptResult | Pošlje del izvorne kode JavaScript, ki jo brskalnik izvede |
JavaScript() |
| HttpUnauthorizedResult | Nastavi statusno kodo odziva HTTP na 401 (kar pomeni "ni pooblaščen"), kar povzroči, da vzpostavljeni mehanizem za preverjanje pristnosti (preverjanje pristnosti obrazcev ali preverjanje pristnosti sistema Windows) pozove obiskovalca, naj se prijavi |
št |
| HttpNotFoundResult | Vračila Napaka HTTP s kodo 404 - Ni najdeno (ni najdeno) |
HttpNotFound() |
| HttpStatusCodeResult | Vrne določeno kodo HTTP |
št |
| EmptyResult | Početi nič |
št |
Vsi ti tipi izhajajo iz razreda ActionResult in mnogi od njih imajo priročne pomožne metode v razredu Controller. V naslednjih člankih bomo prikazali uporabo teh vrst rezultatov.
Opisani predmet je zelo uporabno in močno orodje. Ta objekt ima več metod, njihov opis je podan spodaj:
Zbirke: Metode: Lastnosti: Odziv. Zbiranje piškotkovZbirka piškotkov nastavi vrednosti za piškotke. Če navedeni piškotki ne obstajajo, jih ustvari. Če piškotek obstaja, prevzame novo vrednost in uniči staro.
Response.Cookies(cookie) [(key) | . atributi ] = vrednost
Opcije:
- piškotek – Ime piškotka
- ključ - Izbirni parameter. Če je naveden, je piškotek imenik (ugnezdeni), ključ pa nabor vrednosti.
- atributi - Določene informacije o samih piškotkih. Ta parameter je lahko eden od naslednjih:
- vrednost – določa vrednost, ki bo dodeljena temu ključu ali atributu.
| Ime | Opis |
| Domena | Samo snemanje. Če je določeno, se piškotki pošljejo le na zahtevo te domene. |
| poteče | Samo snemanje. Datum, ko piškotek poteče. Ta datum je treba nastaviti, da se piškotki zapišejo stranki HDD po koncu seje. Če ta atribut ni nastavljen, se predpostavlja datum veljavnosti piškotka Trenutni datum. Piškotki potečejo takoj po koncu seje. |
| HasKey | Samo branje. Označuje, ali piškotek vsebuje dani ključ. |
| Pot | Samo snemanje. Če je navedeno, se piškotki pošljejo samo na zahtevo s te poti. Če parameter ni nastavljen, se uporabi pot do aplikacije. |
| Varno | Samo snemanje. Označuje, ali bodo piškotki zaščiteni ali ne. |
komentar:
Če je ključni piškotek ustvarjen, kot je prikazano v naslednjem skriptu,
potem bo poslana naslednja glava:
Set-Cookie:MYCOOKIE=TYPE1=sladkor&TYPE2=piškotki
Če mycookieju dodelite vrednost brez uporabe ključev, bo to dejanje uničilo ključa tipa1 in tipa2. Npr.
V prejšnjem primeru bosta ključa type1 in type2 uničena in njuni vrednosti izgubljeni. Mycookie bo zdaj vseboval vrednost čokoladni marshmallow.
Obstoj določenega ključa lahko preverite tudi na naslednji način:
Če je prikazan TRUE, potem tak ključ obstaja; če je FALSE, ne.
Metoda Response.WriteResponse.Write variable_or_value
Opcije:
- spremenljivka_ali_vrednost – podatki, ki bodo prikazani na zaslonu brskalnika prek HTML-ja. Ta parameter je lahko katere koli vrste, ki jo podpira VisualBasic Scripting Edition. Podatki so lahko naslednje vrste: datum, niz, znak, številske vrednosti. Pomen ta parameter ne more vsebovati %> kombinacij. Namesto tega lahko uporabite enakovredno kombinacijo %\>. Spletni strežnik bo to zaporedje pretvoril v zahtevano, ko se bo skript izvedel.
Naslednji primer prikazuje, kako deluje metoda Response.write za izpis sporočila odjemalcu.
Povedal ti bom samo: In tvoje ime
Naslednji primer doda oznako HTML na spletno stran. Ker ta metoda ne more vsebovati kombinacije %>, uporabimo zaporedje %\>. Torej primer skripta:
Izhod bo vrstica:
