Theory
एक Web Page के लिए Toolbox
FestConnect का registration form build करने के लिए आपको student के name के लिए एक text box, 'send me reminders' के लिए एक checkbox, meal preference चुनने के लिए radio buttons का एक set, एक welcome message दिखाने के लिए एक label, और एक Register button चाहिए। ASP.NET आपको ये सब ready-made server controls की तरह देता है।
Raw HTML hand-write करने की बजाय, आप <asp:TextBox> और <asp:Button> जैसे tags drop करते हैं, इनकी properties set करते हैं, और अपने C# code से इनसे बात करते हैं। यह lesson common server controls introduce करता है और वह एक behaviour जो इन्हें साथ tie करता है: postback।
Theory
एक Control को Server Control क्या बनाता है
एक server control asp: prefix से written और runat="server" से marked एक tag है। वह attribute key है: यह ASP.NET को बताता है control server पर रहता है, तो आपका code-behind इसे इसके id से पहुँच सकता है।
इसकी वजह से, हर server control के पास तीन चीज़ें हैं: properties जो आप set या read कर सकते हैं (एक TextBox के Text की तरह), events जो यह raise कर सकता है (एक Button के Click की तरह), और यह browser के लिए HTML में render होता है। तो एक <asp:TextBox> जो आप markup में place करते हैं visitor के लिए एक ordinary HTML input box बन जाता है, पर server पर यह एक पूरा object है जिसे आप program कर सकते हैं।
At a glance
| Control | किसके लिए है | एक Postback Cause करता है? |
|---|---|---|
| TextBox | User को text type करने दीजिए (name, email) | Default से नहीं |
| Button | एक clickable button जो form submit करता है | हाँ |
| Label | User को read-only text display कीजिए | नहीं |
| CheckBox | एक single on या off choice | Default से नहीं |
| RadioButton | एक group से एक option चुनिए | Default से नहीं |
| LinkButton | एक link जैसा दिखता है, एक button जैसा act करता है | हाँ |
| ImageMap | clickable regions वाली एक image | हाँ, जब एक hotspot click हो |
Practical
A slice of the FestConnect registration form (.aspx)
<form runat="server">
<asp:Label id="lblName" Text="Your name:" runat="server" />
<asp:TextBox id="txtName" runat="server" />
<asp:CheckBox id="chkReminders" Text="Send me reminders" runat="server" />
<asp:RadioButton id="rbVeg" GroupName="meal" Text="Veg" runat="server" />
<asp:RadioButton id="rbNonVeg" GroupName="meal" Text="Non-veg" runat="server" />
<asp:Button id="btnRegister" Text="Register" OnClick="btnRegister_Click" runat="server" />
<asp:Label id="lblStatus" runat="server" />
</form>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Practical
Reading those controls in code-behind
protected void btnRegister_Click(object sender, EventArgs e)
{
string name = txtName.Text; // read the TextBox
bool wantsReminders = chkReminders.Checked; // read the CheckBox
string meal = rbVeg.Checked ? "Veg" : "Non-veg";
lblStatus.Text = name + " registered (" + meal + ")."; // write the Label
}Formula
कौन से Controls एक Postback Cause करते हैं
Postback वह है जो form को server को भेजता है ताकि आपका code चल सके। Button और LinkButton click होने पर एक postback cause करते हैं, और एक ImageMap postback करता है जब एक hotspot click हो। यही तरीका है आप एक Click handler trigger करते हैं।
Default से एक TextBox, CheckBox या RadioButton अपने आप postback NAHIN करता; यह बस एक value hold करता है जो अगले postback के साथ भेजी जाती है। अगर आप चाहते हैं इनमें से एक change होते ही postback करे, आप इसकी AutoPostBack property को true set करते हैं। Rule of thumb: buttons act करते हैं, inputs wait करते हैं।
Quiz
FestConnect form पर, student TextBox में एक name type करता है, CheckBox tick करता है, और Register Button click करता है। कौन सा control वह postback cause करता है जो आपका server code चलाता है?
- TextBox, name type होते ही
- Button, जब यह click हो
- CheckBox, जब यह tick हो
- इनमें से कोई नहीं; page एक timer पर reload होता है
Show the answer
Button, जब यह click हो
Button postback cause करता है: इसे click करना form को server को submit करता है, जो आपका btnRegister_Click handler चलाता है। Default से TextBox (option A) और CheckBox (option C) अपने आप postback NAHIN करते; ये बस अपनी values (typed name, ticked state) hold करते हैं अगले postback के साथ भेजने के लिए, जब तक आप इन पर AutoPostBack को true set न करें। Option D invented है: ASP.NET pages एक timer पर reload नहीं होते। तो buttons act करते हैं (postback), inputs wait करते हैं। यही वजह है student का typed name और ticked box button के Click handler के अंदर available होते हैं जब यह आख़िरकार चलता है।
Think first
एक Plain HTML Input की बजाय asp:TextBox क्यों इस्तेमाल करें?
एक browser के पास पहले से एक <input> box है। इसे एक <asp:TextBox runat="server"> की तरह wrap करना actually आपको क्या देता है? फिर tap कीजिए।
Show the answer
यह एक dumb HTML element को एक PROGRAMMABLE server object में बदल देता है। एक plain <input> बस markup है जो browser दिखाता है; आपका server code इसे नाम से आसानी से पढ़ या बदल नहीं सकता। एक <asp:TextBox runat="server"> अभी भी visitor के लिए एक ordinary input की तरह render होता है, पर server पर यह एक id वाला एक object है, तो आपका code-behind txtName.Text पढ़ सकता है, इसे set कर सकता है, validate कर सकता है, disable कर सकता है, या इसे C# से style कर सकता है। यह postbacks के across अपनी value automatically रखता भी है (इसे view state कहा जाता है), तो एक click के बाद box अभी भी दिखाता है user ने क्या type किया। और यह event model, validation controls, और data binding में plug होता है जिनसे आप बाद में मिलेंगे। Short में: browser के लिए same HTML, पर server पर एक पूरा, controllable object, जो Web Forms controls का पूरा point है। Convenience और control, थोड़े server overhead की cost पर।
Summary
Key takeaways
- Server controls ready-made building blocks हैं asp: prefix और runat=server से written, तो server इन्हें program कर सकता है।
- हर एक के पास properties हैं (TextBox.Text), events raise कर सकता है (Button.Click), और browser के लिए HTML में render होता है।
- Common controls: TextBox (input), Button (submit), Label (display), CheckBox (on/off), RadioButton (एक group का एक), LinkButton (link जो button की तरह act करता है), ImageMap (clickable image regions)।
- Button, LinkButton और ImageMap postbacks cause करते हैं; TextBox, CheckBox और RadioButton default से नहीं करते (इसे बदलने के लिए AutoPostBack set कीजिए)।
- Code-behind में आप controls को id से पढ़ते और लिखते हैं: txtName.Text, chkReminders.Checked, lblStatus.Text।
- एक server control postbacks के across अपनी value रखता है (view state) और events, validation, और data binding में plug होता है।
- Memory hook: buttons act करते हैं, inputs wait करते हैं; runat=server इसे programmable बनाता है।