Validation Controls, Login Control; Master Pages, CSS & Themes

चार features जो एक Web Forms app को polished और safe बनाते हैं: validation controls जो user input check करते हैं, एक ready-made Login control, master pages जो हर page को एक shared layout देते हैं, और consistent styling के लिए CSS वाले themes।

11 min read · 9 cards · 2 checks

Read in: English · हिन्दी · ગુજરાતી


Theory

Polished, Safe, और Consistent

एक working registration form काफ़ी नहीं है। FestConnect को bad input भी reject करना पड़ता है (एक empty name, एक malformed email), students को log in करने देना पड़ता है, हर page पर same दिखना पड़ता है, और restyle करना आसान होना पड़ता है। ASP.NET Web Forms के पास इनमें से हर एक के लिए एक ready-made feature है।

यह lesson इनमें से चार group करता है: validation controls (input check करना), Login control (sign-in UI), master pages (एक shared layout), और CSS वाले themes (consistent styling)। हर एक आपको बहुत सा repetitive code hand से लिखने से बचाता है।

Theory

Validation Controls

Validation controls एक user का input check करते हैं और form को submit होने से block करते हैं जब तक यह सही न हो, अगर नहीं है तो एक error message दिखाते हुए। आप एक को उस control से attach करते हैं जिसे इसे check करना चाहिए। Common ones:

  • RequiredFieldValidator: field empty नहीं होना चाहिए।
  • RangeValidator: value एक range के अंदर आनी चाहिए (उदाहरण के लिए age 16 से 60)।
  • RegularExpressionValidator: value एक pattern से match होना चाहिए (उदाहरण के लिए एक valid email)।
  • CompareValidator: दो values compare कीजिए (उदाहरण के लिए 'password' 'confirm password' के equal है)।
  • ValidationSummary: सारे errors को एक जगह gather और list कीजिए।

ये speed के लिए browser में check करते हैं, और ASP.NET safety के लिए server पर re-check करता है।

Practical

Requiring a name on the 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 एक ready-made sign-in box है (username, password, एक Login button) जो ASP.NET के membership system में plug होता है, तो आपको खुद UI build किए बिना एक working login मिलता है।

एक master page site का shared layout define करता है, header, menu और footer, एक बार, एक ContentPlaceHolder के साथ जो उस region को mark करता है जो बदलता है। हर content page (Register, Events, Profile) उस placeholder भरने के लिए सिर्फ़ अपना own content supply करता है। Layout एक बार लिखिए; हर page इसे inherit करता है।

Themes और CSS look handle करते हैं: एक theme styles (और control skins) का एक site-wide bundle है, तो आप colours और fonts एक जगह set करते हैं और पूरा app consistent रहता है।

Formula

ये चार साथ क्यों Belong करते हैं

इनमें से हर एक hand-written repetition हटाता है और एक concern centralise करता है। Validation centralise करता है 'क्या यह input acceptable है'। Login control centralise करता है sign in करना। Master pages layout centralise करते हैं। Themes और CSS styling centralise करते हैं।

Pattern वही है जो आपने code-behind के साथ देखा: एक चीज़ को ONCE define कीजिए, सही जगह पर, और हर जगह इसे reuse कीजिए, इसे हर page पर copy करने और dozens drifting copies maintain करने की बजाय।

At a glance

FeatureJobएक बार Defined, हर जगह इस्तेमाल?
Validation ControlsUser input check कीजिए, bad data block कीजिएPer field attached, forms के across reused
Login ControlReady-made sign-in UIजहाँ भी login चाहिए वहाँ drop कीजिए
Master Pagesएक shared page layoutहाँ: layout एक बार written, सारे pages inherit करते हैं
Themes + CSSConsistent site-wide stylingहाँ: styles एक बार set, हर जगह applied

Quiz

आपको FestConnect email field को सिर्फ़ properly formatted email addresses accept करने चाहिए। कौन सा validation control fit होता है?

  1. RequiredFieldValidator, क्योंकि यह text का format check करता है
  2. RegularExpressionValidator, क्योंकि यह value को एक pattern के against check करता है जैसे एक email format
  3. CompareValidator, क्योंकि यह email को एक pattern से compare करता है
  4. RangeValidator, क्योंकि एक email characters की एक range है
Show the answer

RegularExpressionValidator, क्योंकि यह value को एक pattern के against check करता है जैसे एक email format

RegularExpressionValidator एक value को एक PATTERN (एक regular expression) के against check करता है, जो exactly है कैसे आप एक email का format validate करते हैं। Option A wrong है: RequiredFieldValidator सिर्फ़ check करता है field empty नहीं है, इसका format नहीं, एक empty check और एक format check अलग jobs हैं (आप अक्सर दोनों इस्तेमाल करते हैं)। Option C wrong है: CompareValidator दो values compare करता है (जैसे password और confirm-password) या एक value को एक fixed constant से, एक pattern से नहीं। Option D wrong है: RangeValidator check करता है एक value एक minimum और maximum के बीच पड़े (numbers या dates के लिए useful), text एक format से match करता है यह नहीं। Validator को check की kind से match कीजिए: pattern -> RegularExpressionValidator।

Think first

हर Page पर Layout Copy करने की बजाय एक Master Page क्यों?

आप बस same header, menu और footer हर .aspx में paste कर सकते थे। एक master page बेहतर क्यों है? फिर tap कीजिए।

Show the answer

क्योंकि एक master page shared layout को ONE जगह define करता है, तो एक change एक बार होता है और हर जगह दिखता है, जबकि copy-pasted layout को हर page पर edit होना पड़ता है और inevitably out of sync drift करता है। Imagine कीजिए FestConnect में 20 pages हैं, हर एक में same header और menu pasted हैं। एक menu item add कीजिए, 'Results', और आपको सारी 20 files identically edit करनी पड़ती हैं; एक miss कीजिए, या एक typo करिए, और वह page अब inconsistent है। एक master page के साथ, header और menu master में रहते हैं, और हर content page सिर्फ़ इसका ContentPlaceHolder भरता है, तो menu item add करना एक single edit है जो instantly सारे 20 pages update करता है। Layout को logic से separate करने, या styles को CSS में centralising करने वाला same reasoning: एक बार define कीजिए, हर जगह reuse कीजिए, एक spot में maintain कीजिए। यह अभी कम काम है और बाद में बहुत कम काम है। एक source of truth बीस copies से बेहतर है।

Summary

Key takeaways

  • Validation controls user input check करते हैं और submission block करते हैं जब तक यह सही न हो: RequiredFieldValidator (empty नहीं), RangeValidator (range के अंदर), RegularExpressionValidator (एक pattern से match), CompareValidator (दो values compare), ValidationSummary (errors list)।
  • Validation speed के लिए browser में चलता है और safety के लिए server पर re-checked होता है।
  • Login control एक ready-made sign-in UI है जो ASP.NET membership में plug होता है।
  • एक master page shared layout को एक बार define करता है (header, menu, footer) एक ContentPlaceHolder के साथ; content pages सिर्फ़ अपना हिस्सा भरते हैं।
  • Themes और CSS styling centralise करते हैं तो पूरी site एक जगह से consistent रहती है।
  • Common thread: एक concern को एक बार define कीजिए, सही जगह पर, और हर जगह इसे reuse कीजिए।
  • Memory hook: input validate कीजिए, log in कीजिए, एक बार layout कीजिए (master page), एक बार style कीजिए (theme)।

Study this properly

This page is the lesson to read. In Gri-Learn the same topic is a graded deck: the self-checks are scored and your weak topics are tracked. Free to start.

Start this topic

Already have an account? Sign in

More from Introduction to ASP.NET

Gri-Learn · syllabus-mapped B.C.A. lessons in English, Hindi and Gujarati