Theory
ઓપદાર, સલામત અને એકસરખું
ચાલતું registration form પૂરતું નથી. FestConnect ને ખરાબ input પણ નકારવો પડે (ખાલી નામ, ખોટા ઘાટનું email), વિદ્યાર્થીઓને log in કરવા દેવું પડે, દરેક page પર એકસરખું દેખાવું પડે, અને એનો શણગાર બદલવો સહેલો હોવો જોઈએ. આ દરેક માટે ASP.NET Web Forms પાસે તૈયાર સગવડ છે.
આ પાઠ એમાંની ચારને એકસાથે લે છે: validation controls (input તપાસવો), Login control (sign-in નું આંતરમુખ), master pages (એક જ વહેંચાયેલું layout), અને CSS સાથેની themes (એકસરખો શણગાર). દરેક તમને ઘણો પુનરાવર્તિત code હાથે લખવામાંથી બચાવે છે.
Theory
Validation controls
Validation controls વપરાશકારે ભરેલું તપાસે છે અને એ સાચું ન થાય ત્યાં સુધી form ને submit થતું અટકાવે છે, અને ખોટું હોય તો ભૂલનો સંદેશો બતાવે છે. જે control ને તપાસવું હોય એની સાથે તમે એને જોડો છો. સામાન્ય રીતે વપરાતાં:
- RequiredFieldValidator: ખાનું ખાલી ન હોવું જોઈએ.
- RangeValidator: કિંમત કોઈ વ્યાપની અંદર હોવી જોઈએ (દાખલા તરીકે ઉંમર 16 થી 60).
- RegularExpressionValidator: કિંમત કોઈ ઢાંચા સાથે બંધબેસવી જોઈએ (દાખલા તરીકે ખરું email).
- CompareValidator: બે કિંમતો સરખાવવી (દાખલા તરીકે 'password' અને 'confirm password' સરખાં છે કે નહીં).
- ValidationSummary: બધી ભૂલો એક જગ્યાએ ભેગી કરીને યાદી આપવી.
એ ઝડપ માટે browser માં તપાસે છે, અને સલામતી માટે ASP.NET એ જ તપાસ server પર ફરી કરે છે.
Practical
FestConnect ના form પર નામ ફરજિયાત કરવું
<asp:TextBox id="txtName" runat="server" />
<asp:RequiredFieldValidator
runat="server"
ControlToValidate="txtName"
ErrorMessage="Please enter your name"
ForeColor="Red" />
<asp:Button id="btnRegister" Text="Register" runat="server" />
<!-- The button will not post back until txtName is filled in. -->This example runs in Gri-Learn on the web, where you can edit it and see the output.
Theory
Login control, master pages, themes
Login control એ તૈયાર sign-in ખાનું છે (username, password, Login button) જે ASP.NET ની membership વ્યવસ્થા સાથે જોડાય છે, એટલે તમે જાતે આંતરમુખ બનાવ્યા વગર જ ચાલતું login મેળવો છો.
Master page site નું વહેંચાયેલું layout, એટલે કે header, menu અને footer, એક જ વાર વ્યાખ્યાયિત કરે છે, અને જે ભાગ બદલાય છે એને ContentPlaceHolder થી ચિહ્નિત કરે છે. દરેક content page (Register, Events, Profile) એ placeholder ભરવા માટે ફક્ત પોતાનું લખાણ આપે છે. Layout એક વાર લખો; દરેક page એને વારસામાં મેળવે.
Themes અને CSS દેખાવ સંભાળે છે: theme એ આખી site માટેનું styles નું (અને control ની skins નું) બંડલ છે, એટલે તમે રંગો અને અક્ષરઢાળ એક જ જગ્યાએ ગોઠવો છો અને આખી app એકસરખી રહે છે.
Formula
આ ચારેય સાથે કેમ છે
આમાંનું દરેક હાથે લખાતું પુનરાવર્તન દૂર કરે છે અને એક બાબતને કેન્દ્રમાં લાવે છે. Validation 'આ input સ્વીકારવા જેવો છે કે નહીં' એ કેન્દ્રમાં લાવે છે. Login control sign-in ને કેન્દ્રમાં લાવે છે. Master pages layout ને કેન્દ્રમાં લાવે છે. Themes અને CSS શણગાર ને કેન્દ્રમાં લાવે છે.
આ એ જ ઢબ છે જે તમે code-behind સાથે જોઈ હતી: વસ્તુને એક જ વાર, સાચી જગ્યાએ વ્યાખ્યાયિત કરો અને એને બધે ફરી વાપરો, બદલે એના કે એને દરેક page પર નકલ કરીને ધીરે ધીરે જુદી પડતી ડઝનેક નકલો સંભાળવી પડે.
At a glance
| સગવડ | કામ | એક વાર વ્યાખ્યા, બધે વપરાશ? |
|---|---|---|
| Validation controls | વપરાશકારે ભરેલું તપાસવું, ખરાબ data અટકાવવો | ખાના દીઠ જોડાય છે, જુદાં જુદાં forms માં ફરી વપરાય છે |
| Login control | તૈયાર sign-in આંતરમુખ | જ્યાં login જોઈએ ત્યાં મૂકી દો |
| Master pages | એક જ વહેંચાયેલું page layout | હા: layout એક વાર લખાય, બધાં pages વારસામાં મેળવે |
| Themes અને CSS | આખી site પર એકસરખો શણગાર | હા: styles એક વાર ગોઠવાય, બધે લાગુ પડે |
Quiz
તમારે FestConnect ના email ખાનામાં ફક્ત બરાબર ઘાટનાં email સરનામાં જ સ્વીકારવાં છે. કયું validation control બંધબેસે છે?
- RequiredFieldValidator, કારણ કે એ લખાણનો ઘાટ તપાસે છે
- RegularExpressionValidator, કારણ કે એ કિંમતને email ના ઘાટ જેવા ઢાંચા સામે તપાસે છે
- CompareValidator, કારણ કે એ email ને ઢાંચા સાથે સરખાવે છે
- RangeValidator, કારણ કે email એ અક્ષરોનો વ્યાપ છે
Show the answer
RegularExpressionValidator, કારણ કે એ કિંમતને email ના ઘાટ જેવા ઢાંચા સામે તપાસે છે
RegularExpressionValidator કિંમતને ઢાંચા (regular expression) સામે તપાસે છે, અને email નો ઘાટ તપાસવાની બરાબર એ જ રીત છે. વિકલ્પ A ખોટો છે: RequiredFieldValidator ફક્ત ખાનું ખાલી નથી એટલું જ તપાસે છે, એનો ઘાટ નહીં, અને ખાલીપણાની તપાસ તથા ઘાટની તપાસ જુદાં કામ છે (ઘણી વાર બંને વપરાય છે). વિકલ્પ C ખોટો છે: CompareValidator બે કિંમતો સરખાવે છે (જેમ કે password અને confirm-password) કે કિંમતને કોઈ નિશ્ચિત અચળ સાથે સરખાવે છે, ઢાંચા સાથે નહીં. વિકલ્પ D ખોટો છે: RangeValidator કિંમત ઓછામાં ઓછી અને વધુમાં વધુ કિંમત વચ્ચે છે કે નહીં તે તપાસે છે (સંખ્યાઓ કે તારીખો માટે ઉપયોગી), લખાણ કોઈ ઘાટ સાથે બંધબેસે છે કે નહીં તે નહીં. તપાસના પ્રકાર પ્રમાણે validator પસંદ કરો: ઢાંચો જોઈએ તો RegularExpressionValidator.
Think first
દરેક page પર layout ની નકલ કરવાને બદલે master page શા માટે વાપરવું?
તમે એ જ header, menu અને footer દરેક .aspx માં ચોંટાડી શકો. તો master page શા માટે વધુ સારું છે? વિચારીને પછી tap કરો.
Show the answer
કારણ કે master page વહેંચાયેલા layout ને એક જ જગ્યાએ વ્યાખ્યાયિત કરે છે, એટલે ફેરફાર એક વાર થાય અને બધે દેખાય, જ્યારે નકલ કરીને ચોંટાડેલું layout દરેક page પર બદલવું પડે અને છેવટે એકબીજાથી જુદું પડી જ જાય. કલ્પના કરો કે FestConnect માં 20 pages છે અને દરેકમાં એ જ header તથા menu ચોંટાડેલાં છે. હવે 'Results' નામનું એક menu ઉમેરો, એટલે તમારે વીસેવીસ files માં એકસરખો ફેરફાર કરવો પડે; એક રહી જાય કે જોડણીની ભૂલ થાય, અને એ page બીજાં કરતાં જુદું પડી જાય. Master page સાથે header અને menu master માં રહે છે, અને દરેક content page ફક્ત પોતાનું ContentPlaceHolder ભરે છે, એટલે menu ઉમેરવું એટલે એક જ ફેરફાર જે તરત વીસેવીસ pages ને બદલી નાખે. Layout ને logic થી અલગ પાડવા કે styles ને CSS માં કેન્દ્રિત કરવા પાછળનું આ જ કારણ છે: એક વાર વ્યાખ્યા આપો, બધે વાપરો, એક જ જગ્યાએ સંભાળો. અત્યારે ઓછું કામ, અને પછી તો ઘણું ઓછું કામ. સત્યનો એક સ્રોત વીસ નકલો કરતાં ચડિયાતો છે.
Summary
Key takeaways
- Validation controls વપરાશકારે ભરેલું તપાસે છે અને એ સાચું ન થાય ત્યાં સુધી submit અટકાવે છે: RequiredFieldValidator (ખાલી નહીં), RangeValidator (વ્યાપની અંદર), RegularExpressionValidator (ઢાંચા સાથે બંધબેસતું), CompareValidator (બે કિંમતો સરખાવવી), ValidationSummary (ભૂલોની યાદી).
- Validation ઝડપ માટે browser માં ચાલે છે અને સલામતી માટે server પર ફરી તપાસાય છે.
- Login control એ તૈયાર sign-in આંતરમુખ છે જે ASP.NET ની membership સાથે જોડાય છે.
- Master page વહેંચાયેલા layout ને (header, menu, footer) ContentPlaceHolder સાથે એક વાર વ્યાખ્યાયિત કરે છે; content pages ફક્ત પોતાનો ભાગ ભરે છે.
- Themes અને CSS શણગારને કેન્દ્રમાં લાવે છે જેથી આખી site એક જ જગ્યાએથી એકસરખી રહે.
- સામાન્ય તાર: દરેક બાબતને એક વાર, સાચી જગ્યાએ વ્યાખ્યાયિત કરો અને એને બધે ફરી વાપરો.
- યાદ રાખવાની કડી: input તપાસો, log in કરાવો, layout એક વાર ગોઠવો (master page), શણગાર એક વાર ગોઠવો (theme).