ASP.NET नियंत्रण: जाँचेंBox, रेडियोबटन, सूचीBox, टेक्स्टबॉक्स, लेबल

वेब फ़ॉर्म में ASP.Net नियंत्रण जोड़ना

ASP.Net में फॉर्म में टेक्स्टबॉक्स और लेबल जैसे नियंत्रण जोड़ने की क्षमता होती है।

आइए वेब प्रपत्रों के लिए उपलब्ध अन्य नियंत्रणों पर नज़र डालें और उनके कुछ सामान्य गुणों को देखें।

हमारे उदाहरण में, हम एक फॉर्म बनाएंगे जिसमें निम्नलिखित कार्यक्षमता होगी।

1. उपयोगकर्ता को अपना नाम दर्ज करने की क्षमता.
2. उपयोगकर्ता जिस शहर में रहता है उसे चुनने का विकल्प
3. उपयोगकर्ता के लिए लिंग हेतु विकल्प दर्ज करने की क्षमता।
4. उपयोगकर्ता जो कोर्स सीखना चाहता है, उसे चुनने का विकल्प। दोनों के लिए विकल्प होंगे C# और ASP.Net

आइए प्रत्येक नियंत्रण को विस्तार से देखें। आइए उन्हें ऊपर बताई गई कार्यक्षमता के साथ फ़ॉर्म बनाने के लिए जोड़ें।

चरण 1) पहला कदम डेमो वेब फॉर्म के लिए फॉर्म डिज़ाइनर को खोलना है। एक बार जब आप ऐसा कर लेंगे, तो आप टूलबॉक्स से कंट्रोल को खींचकर ले जा सकेंगे। वेब फार्म.

डिज़ाइनर वेब फ़ॉर्म खोलने के लिए,

• सॉल्यूशन एक्सप्लोरर में Demo.aspx फ़ाइल पर राइट-क्लिक करें और
• मेनू विकल्प व्यू डिज़ाइनर चुनें.

एक बार जब आप उपरोक्त चरण पूरा कर लेंगे, तो आप अपना फॉर्म डिज़ाइनर देख पाएंगे जैसा कि नीचे दिखाया गया है।

अब हम एक-एक करके अपने नियंत्रण जोड़ना शुरू करते हैं

लेबल नियंत्रण

लेबल नियंत्रण का उपयोग उपयोगकर्ता को फ़ॉर्म पर कोई टेक्स्ट या संदेश दिखाने के लिए किया जाता है। लेबल नियंत्रण का उपयोग आम तौर पर अन्य नियंत्रणों के साथ किया जाता है। सामान्य उदाहरण वह है जिसमें टेक्स्टबॉक्स नियंत्रण के साथ लेबल जोड़ा जाता है। लेबल उपयोगकर्ता को यह संकेत देता है कि टेक्स्टबॉक्स में क्या भरना अपेक्षित है। आइए देखें कि हम इसे नीचे दिखाए गए उदाहरण के साथ कैसे लागू कर सकते हैं। हम 'नाम' नामक लेबल का उपयोग करेंगे। इसका उपयोग टेक्स्टबॉक्स नियंत्रणों के साथ किया जाएगा, जिसे बाद के अनुभाग में जोड़ा जाएगा।

चरण 1) पहला चरण टूलबॉक्स से 'लेबल' नियंत्रण को वेब फॉर्म पर खींचना है जैसा कि नीचे दिखाया गया है।

चरण 2) एक बार लेबल जोड़ लेने के बाद, निम्नलिखित चरणों का पालन करें।

1. लेबल नियंत्रण पर राइट-क्लिक करके गुण विंडो पर जाएं
2. गुण मेनू विकल्प चुनें

चरण 3) गुण विंडो से, टेक्स्ट गुण का नाम बदलकर नाम करें

इसी तरह, नियंत्रण के ID प्रॉपर्टी मान को भी lblName में बदलें। नियंत्रणों के लिए एक सार्थक ID निर्दिष्ट करके, कोडिंग चरण के दौरान उन तक पहुँचना आसान हो जाता है। यह नीचे दिखाया गया है।

एक बार जब आप उपरोक्त परिवर्तन कर लेंगे, तो आपको निम्नलिखित आउटपुट दिखाई देगा

आउटपुट: -

आप देखेंगे कि वेब फॉर्म पर नाम लेबल दिखाई देगा।

पाठ बॉक्स

टेक्स्ट बॉक्स का उपयोग उपयोगकर्ता को वेब फ़ॉर्म एप्लिकेशन पर कुछ टेक्स्ट दर्ज करने की अनुमति देने के लिए किया जाता है। आइए देखें कि हम इसे नीचे दिखाए गए उदाहरण के साथ कैसे लागू कर सकते हैं। हम फ़ॉर्म में एक टेक्स्टबॉक्स जोड़ेंगे जिसमें उपयोगकर्ता अपना नाम दर्ज कर सकता है।

चरण 1) पहला चरण टूलबॉक्स से टेक्स्टबॉक्स नियंत्रण को वेब फ़ॉर्म पर खींचना है जैसा कि नीचे दिखाया गया है

नीचे बताया गया है कि टेक्स्टबॉक्स नियंत्रण फॉर्म पर होने के बाद फॉर्म डिज़ाइनर में यह कैसा दिखेगा

चरण 2) एक बार टेक्स्टबॉक्स जोड़ दिए जाने के बाद, आपको आईडी प्रॉपर्टी बदलनी होगी।

• टेक्स्टबॉक्स नियंत्रण पर राइट-क्लिक करके गुण विंडो पर जाएं और
• फिर गुण चुनें
• टेक्स्टबॉक्स की id प्रॉपर्टी को txtName में बदलें।

एक बार जब आप उपरोक्त परिवर्तन कर लेंगे, तो आपको निम्नलिखित आउटपुट दिखाई देगा।

आउटपुट: -

सूची बाक्स

वेब फ़ॉर्म पर आइटम की सूची दिखाने के लिए लिस्टबॉक्स का उपयोग किया जाता है। आइए देखें कि हम नीचे दिखाए गए उदाहरण के साथ इसे कैसे लागू कर सकते हैं। हम कुछ शहर के स्थानों को संग्रहीत करने के लिए फ़ॉर्म में एक सूची बॉक्स जोड़ेंगे।

चरण 1) पहला चरण टूलबॉक्स से सूची बॉक्स नियंत्रण को वेब फ़ॉर्म पर खींचना है जैसा कि नीचे दिखाया गया है

चरण 2) एक बार जब आप लिस्टबॉक्स को फॉर्म में खींच लेंगे, तो एक अलग साइड मेनू दिखाई देगा। इस मेनू में 'आइटम संपादित करें' मेनू चुनें।

चरण 3) अब आपके सामने एक डायलॉग बॉक्स प्रस्तुत होगा जिसमें आप सूची आइटम को सूची बॉक्स में जोड़ सकते हैं।

1. सूची आइटम जोड़ने के लिए जोड़ें बटन पर क्लिक करें।
2. सूची आइटम के टेक्स्ट मान के लिए नाम दें - हमारे मामले में मुंबई। मैंगलोर और हैदराबाद के लिए सूची आइटम जोड़ने के लिए चरण 1 और 2 को दोहराएँ।
3. ठीक बटन पर क्लिक करें

चरण 4) गुण विंडो पर जाएं और नियंत्रण का ID गुण मान बदलें lstस्थान.

एक बार जब आप उपरोक्त परिवर्तन कर लेंगे, तो आपको निम्नलिखित आउटपुट दिखाई देगा

आउटपुट: -

आउटपुट से, आप स्पष्ट रूप से देख सकते हैं कि लिस्टबॉक्स को फॉर्म में जोड़ दिया गया था।

रेडियो की बटन

रेडियो बटन का उपयोग आइटम की सूची दिखाने के लिए किया जाता है जिसमें से उपयोगकर्ता किसी एक को चुन सकता है। आइए देखें कि हम इसे नीचे दिखाए गए उदाहरण के साथ कैसे लागू कर सकते हैं। हम पुरुष/महिला विकल्प के लिए एक रेडियो बटन जोड़ेंगे।

चरण 1) पहला कदम टूलबॉक्स से 'रेडियोबटन' नियंत्रण को वेब फ़ॉर्म पर खींचना है। (नीचे दी गई छवि देखें)। 2 रेडियो बटन जोड़ना सुनिश्चित करें, एक 'पुरुष' के विकल्प के लिए और दूसरा 'महिला' के लिए।

चरण 2) एक बार रेडियोबटन जोड़ दिया जाए तो 'टेक्स्ट' प्रॉपर्टी बदलें।

• 'रेडियोबटन नियंत्रण' पर क्लिक करके गुण विंडो पर जाएँ।
• रेडियो बटन के टेक्स्ट गुण को 'पुरुष' में बदलें।
• इसे 'महिला' में बदलने के लिए यही चरण दोहराएं।
• इसके अलावा, संबंधित नियंत्रणों के ID गुणों को rdMale और rdFemale में बदलें।

एक बार जब आप उपरोक्त परिवर्तन कर लेंगे, तो आपको निम्नलिखित आउटपुट दिखाई देगा

आउटपुट: -

आउटपुट से, आप स्पष्ट रूप से देख सकते हैं कि रेडियो बटन को फॉर्म में जोड़ा गया था

चेकबॉक्स

चेकबॉक्स का उपयोग विकल्पों की एक सूची प्रदान करने के लिए किया जाता है जिसमें उपयोगकर्ता कई विकल्प चुन सकता है। आइए देखें कि हम नीचे दिखाए गए उदाहरण के साथ इसे कैसे लागू कर सकते हैं। हम अपने वेब फ़ॉर्म में 2 चेकबॉक्स जोड़ेंगे। ये चेकबॉक्स उपयोगकर्ता को यह विकल्प प्रदान करेंगे कि वे सीखना चाहते हैं या नहीं C# या ASP.Net.

चरण 1) पहला चरण टूलबॉक्स से चेकबॉक्स नियंत्रण को वेब फ़ॉर्म पर खींचना है जैसा कि नीचे दिखाया गया है

चरण 2) एक बार चेकबॉक्स जोड़ दिए जाने के बाद, चेकबॉक्स आईडी प्रॉपर्टी को 'chkASP' में बदलें।

• चेकबॉक्स नियंत्रण पर क्लिक करके गुण विंडो पर जाएँ।
• संबंधित नियंत्रणों के ID गुणों को 'chkC' और 'chkASP' में बदलें।

इसके अलावा, चेकबॉक्स कंट्रोल की टेक्स्ट प्रॉपर्टी को 'C#' में बदलें। दूसरे चेकबॉक्स कंट्रोल के लिए भी ऐसा ही करें और इसे 'ASP.Net' में बदलें।

1. चेकबॉक्स की ID प्रॉपर्टी को 'chkASP' में बदलें

2. चेकबॉक्स की ID प्रॉपर्टी को chkC में बदलें

एक बार जब आप उपरोक्त परिवर्तन कर लेंगे, तो आपको निम्नलिखित आउटपुट दिखाई देगा

आउटपुट: -

आउटपुट से आप स्पष्ट रूप से देख सकते हैं कि फॉर्म में चेकबॉक्स जोड़ दिया गया है।

बटन

बटन का उपयोग उपयोगकर्ता को बटन पर क्लिक करने की अनुमति देने के लिए किया जाता है, जो तब फ़ॉर्म की प्रोसेसिंग शुरू कर देगा। आइए देखें कि हम इसे अपने वर्तमान उदाहरण के साथ कैसे लागू कर सकते हैं जैसा कि नीचे दिखाया गया है। हम 'सबमिट' बटन नामक एक सरल बटन जोड़ेंगे। इसका उपयोग फ़ॉर्म पर सभी जानकारी सबमिट करने के लिए किया जाएगा।

चरण 1) पहला चरण टूलबॉक्स से बटन नियंत्रण को वेब फ़ॉर्म पर खींचना है जैसा कि नीचे दिखाया गया है

चरण 2) बटन जोड़ दिए जाने के बाद, बटन नियंत्रण पर क्लिक करके प्रॉपर्टीज़ विंडो पर जाएँ। बटन नियंत्रण की टेक्स्ट प्रॉपर्टी को सबमिट में बदलें। साथ ही, बटन की ID प्रॉपर्टी को 'btnSubmit' में बदलें।

एक बार जब आप उपरोक्त परिवर्तन कर लेंगे, तो आपको निम्नलिखित आउटपुट दिखाई देगा

आउटपुट: -

आउटपुट से आप स्पष्ट रूप से देख सकते हैं कि बटन को फॉर्म में जोड़ दिया गया है।

ASP.Net में इवेंट हैंडलर

वेब फ़ॉर्म के साथ काम करते समय, आप कंट्रोल में इवेंट जोड़ सकते हैं। इवेंट वह होता है जो किसी क्रिया के निष्पादित होने पर होता है। संभवतः सबसे आम क्रिया फ़ॉर्म पर बटन पर क्लिक करना है।

वेब फ़ॉर्म में, आप संबंधित aspx.cs फ़ाइल में कोड जोड़ सकते हैं। इस कोड का उपयोग फ़ॉर्म पर बटन दबाने पर कुछ क्रियाएँ करने के लिए किया जा सकता है। यह आम तौर पर वेब फ़ॉर्म में सबसे आम घटना है। आइए देखें कि हम इसे कैसे प्राप्त कर सकते हैं।

हम इसे सरल बनाने जा रहे हैं। उपयोगकर्ता द्वारा दर्ज किया गया नाम प्रदर्शित करने के लिए बटन नियंत्रण में बस एक ईवेंट जोड़ें। इसे प्राप्त करने के लिए नीचे दिए गए चरणों का पालन करें।

चरण 1) सबसे पहले आपको वेब फॉर्म पर बटन पर डबल-क्लिक करना होगा। इससे विजुअल स्टूडियो में बटन के लिए इवेंट कोड सामने आ जाएगा।

जब आप वेब प्रपत्र डिज़ाइनर में बटन पर डबल क्लिक करते हैं, तो Visual Studio द्वारा btnSubmit_Click इवेंट स्वचालित रूप से जोड़ दिया जाता है।

चरण 2) आइए अब सबमिट इवेंट में नाम टेक्स्टबॉक्स मान और उपयोगकर्ता द्वारा चुने गए स्थान को प्रदर्शित करने के लिए कोड जोड़ें।

protected void btnSubmit_Click(object sender,EventArgs e)
{
	Response.Write(txtName.Text + "</br>");

	Response.Write(lstLocation.SelectedItem.Text + "</br>");

	lblName.Visible = false; 
	txtName.Visible = false; 
	lstLocation.Visible = false;
	chkC.Visible = false; 
	chkASP.Visible = false; 
	rdFemale.Visible = false;
	btnSubmit.Visible = false;
}

Code स्पष्टीकरण: -

1. ऊपर दी गई कोड की पंक्ति सबसे सरल काम करती है। यह नेम टेक्स्टबॉक्स कंट्रोल का मान लेती है और उसे रिस्पॉन्स ऑब्जेक्ट के माध्यम से क्लाइंट को भेजती है। इसलिए यदि आप स्ट्रिंग " दर्ज करना चाहते हैंGuruनाम टेक्स्ट बॉक्स में "99" लिखने पर, txtName का मान ' होगा। टेक्स्ट इस प्रकार होगा:Guru५२ ’।
2. कोड की अगली पंक्ति 'lstLocation.SelectedItem.text' प्रॉपर्टी के ज़रिए लिस्टबॉक्स का चयनित मान लेती है। फिर यह Response.Write विधि के ज़रिए इस मान को क्लाइंट को वापस लिखती है।
3. अंत में, हम फॉर्म पर सभी नियंत्रणों को अदृश्य बना देते हैं। यदि हम ऐसा नहीं करते हैं, तो सभी नियंत्रण और हमारे प्रतिक्रिया मान एक साथ प्रदर्शित होंगे। आम तौर पर, जब कोई व्यक्ति फॉर्म पर सभी जानकारी जैसे नाम, स्थान, लिंग, आदि दर्ज करता है। उपयोगकर्ता को दिखाए जाने वाले अगले पृष्ठ पर केवल वही जानकारी होनी चाहिए जो दर्ज नहीं की गई थी। उपयोगकर्ता नाम, लिंग, स्थान नियंत्रणों को फिर से नहीं देखना चाहता है। लेकिन ASP.Net को यह नहीं पता है, और इसलिए, डिफ़ॉल्ट रूप से, यह उपयोगकर्ता द्वारा सबमिट बटन पर क्लिक करने पर फिर से सभी नियंत्रण दिखाएगा। इसलिए, हमें यह सुनिश्चित करने के लिए कोड लिखने की आवश्यकता है कि सभी नियंत्रण छिपे हुए हैं ताकि उपयोगकर्ता केवल वांछित आउटपुट देख सके।

उपरोक्त परिवर्तन करने के बाद, आपको निम्नलिखित आउटपुट दिखाई देगा

आउटपुट: -

आउटपुट स्क्रीन में, निम्नलिखित चरणों का पालन करें

1. नाम बताइए Guruनाम टेक्स्टबॉक्स में 99
2. बैंगलोर के लिस्टबॉक्स में एक स्थान चुनें
3. सबमिट बटन पर क्लिक करें

ऐसा करने के बाद, आपको 'Guruपेज पर '99' और 'बैंगलोर' स्थान प्रदर्शित होता है।

सारांश

• In ASP.Net, आप किसी फॉर्म में मानक नियंत्रण जोड़ सकते हैं जैसे लेबल, टेक्स्टबॉक्स, लिस्टबॉक्स, आदि।
• प्रत्येक नियंत्रण के साथ एक ईवेंट जुड़ा हो सकता है। सबसे आम ईवेंट बटन क्लिक ईवेंट है। इसका उपयोग तब किया जाता है जब वेब सर्वर को जानकारी सबमिट करने की आवश्यकता होती है।