ASP.NET वेब फ़ॉर्म ट्यूटोरियल: उपयोगकर्ता नियंत्रण उदाहरण

⚡ स्मार्ट सारांश

ASP.NET वेब फ़ॉर्म उपयोगकर्ता नियंत्रण आपको एक बार पुन: प्रयोज्य यूआई घटक बनाने और उन्हें कई पृष्ठों पर उपयोग करने की सुविधा देते हैं। यह दर्शाता है कि उपयोगकर्ता नियंत्रण कैसे बनाया जाता है, इसे पृष्ठ पर और वेब.कॉन्फ़िग में वैश्विक स्तर पर कैसे पंजीकृत किया जाता है, और सार्वजनिक गुण कैसे जोड़े जाते हैं।

♻️ पुन: प्रयोज्य Code: उपयोगकर्ता एक बार पैकेज मार्कअप और लॉजिक को नियंत्रित करता है ताकि इसे पूरे एप्लिकेशन में पुन: उपयोग किया जा सके।
️ नियंत्रण बनाएं: विजुअल स्टूडियो में एक वेब फॉर्म यूजर कंट्रोल (.ascx) जोड़ें और उसका मार्कअप जोड़ें।
📝 इस पेज पर पंजीकरण करें: इसे एक ही पेज पर उपयोग करने के लिए Src, TagName और TagPrefix के साथ Register डायरेक्टिव का उपयोग करें।
🌍 वैश्विक स्तर पर पंजीकरण करें: हर पेज पर इसका उपयोग करने के लिए, web.config में pages/controls के अंतर्गत कंट्रोल जोड़ें।
🔧 सार्वजनिक संपत्तियाँ: MinValue जैसी प्रॉपर्टीज को प्रदर्शित करें ताकि पेज कंट्रोल के व्यवहार को कॉन्फ़िगर कर सकें।

विस्तार में पढ़ें

ASP.Net में, पुनः-उपयोग योग्य कोड बनाना संभव है। पुनः-उपयोग योग्य कोड को कई स्थानों पर इस्तेमाल किया जा सकता है, बिना कोड को दोबारा लिखे।

पुनः उपयोग योग्य कोड, कोड लिखने के बाद डेवलपर द्वारा खर्च किए जाने वाले समय को कम करने में सहायक होता है। इसे एक बार लिखा जा सकता है और कई स्थानों पर पुनः उपयोग किया जा सकता है।

ASP.Net में उपयोगकर्ता नियंत्रण बनाएँ

ASP.Net में वेब कंट्रोल बनाने की क्षमता होती है। इन कंट्रोल में कोड होता है जिसे पुनः उपयोग किया जा सकता है। आवश्यकतानुसार इसे पूरे एप्लिकेशन में उपयोग किया जा सकता है।

आइए एक उदाहरण से समझते हैं कि हम ASP.Net में वेब यूजर कंट्रोल कैसे बना सकते हैं।

हमारे उदाहरण में:

हम एक वेब नियंत्रण बनाने जा रहे हैं।
इसका उपयोग हेडर घटक बनाने के लिए किया जाएगा।
इसमें निम्नलिखित पाठ शामिल होगा:Guru“99 ट्यूटोरियल” और “यह ट्यूटोरियल ASP.Net के लिए है”।

आइए पिछले अनुभागों में बनाए गए अपने वर्तमान वेब एप्लिकेशन के साथ काम करें। आइए वेब उपयोगकर्ता नियंत्रण बनाने के लिए नीचे दिए गए चरणों का पालन करें।

चरण 1) पहला चरण एक वेब उपयोगकर्ता नियंत्रण बनाना और उसे हमारे विज़ुअल स्टूडियो समाधान में जोड़ना है।

विजुअल स्टूडियो में सॉल्यूशन एक्सप्लोरर पर जाएं और डेमोएप्लिकेशन सॉल्यूशन पर राइट-क्लिक करें।
ऐड -> न्यू आइटम मेनू आइटम चुनें।

चरण 2) अगले चरण में, हमें वेब यूजर कंट्रोल बनाने का विकल्प चुनना होगा।

प्रोजेक्ट डायलॉग बॉक्स में, हम विभिन्न प्रकार के घटक बनाने के लिए विभिन्न विकल्प देख सकते हैं। बाईं ओर "वेब" विकल्प पर क्लिक करें।
जब हम "वेब" विकल्प पर क्लिक करते हैं, तो आपको "वेब फॉर्म यूजर कंट्रोल" का विकल्प दिखाई देता है। इस विकल्प पर क्लिक करें।
फिर हम वेब कंट्रोल को एक नाम देते हैं, “Guru99कंट्रोल”।
अंत में, 'जोड़ें' बटन पर क्लिक करें ताकि विज़ुअल स्टूडियो हमारे समाधान में वेब उपयोगकर्ता नियंत्रण जोड़ सके।

फिर आपको “ दिखाई देगाGuruसमाधान में "99Control" जोड़ा गया।

चरण 3) अब वेब यूजर कंट्रोल में कस्टम कोड जोड़ने का समय आ गया है। हमारा कोड पूरी तरह से HTML सिंटैक्स पर आधारित होगा। निम्नलिखित कोड को ' में जोड़ें।Guru99Control.ascx' फ़ाइल।

<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>

	<tr>
	  <td> This Tutorial is for</td>
	</tr>
</table>

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

हमारी वेब कंट्रोल फ़ाइल में, हम सबसे पहले एक टेबल एलिमेंट बना रहे हैं। इसका उपयोग टेक्स्ट की 2 पंक्तियों को रखने के लिए किया जाएगा जो प्रदर्शित करेगा “Guru“99 ट्यूटोरियल” और “यह ट्यूटोरियल ASP.Net के लिए है।”
इसके बाद, हम अपनी पहली टेबल पंक्ति को परिभाषित करते हैं और टेक्स्ट को “ के रूप में रखते हैं।Guru99 ट्यूटोरियल।"
फिर हम अपनी दूसरी तालिका पंक्ति को परिभाषित करते हैं और उसमें टेक्स्ट डालते हैं, “यह ट्यूटोरियल ASP.Net के लिए है।”

नोट: अभी हम इस कोड को चलाकर आउटपुट नहीं दिखा सकते। यह काम करता है या नहीं, यह देखने का एकमात्र तरीका इसे अपने एप्लिकेशन (aspx फ़ाइल) में शामिल करना है। हम इसे अगले विषय में देखेंगे।

ASP.NET वेब फॉर्म पर उपयोगकर्ता नियंत्रणों को पंजीकृत करना

पिछले भाग में हमने देखा कि हम कस्टम वेब कंट्रोल कैसे बना सकते हैं। इसका उपयोग वेब फॉर्म में निम्नलिखित दो पंक्तियों को प्रदर्शित करने के लिए किया जा सकता है:

"Guru99 ट्यूटोरियल”
“यह ट्यूटोरियल ASP.Net के लिए है।”

कस्टम 'कंट्रोल' बन जाने के बाद, हमें इसे अपने वेब एप्लिकेशन में उपयोग करना होगा। पहला चरण है कंपोनेंट को अपने एप्लिकेशन (Demo.aspx) में रजिस्टर करना। ASP.Net एप्लिकेशन में किसी भी कस्टम वेब कंट्रोल का उपयोग करने के लिए यह एक पूर्व शर्त है।

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

चरण 1) सुनिश्चित करें कि आप demo.aspx फ़ाइल पर काम कर रहे हैं। वेब यूजर कंट्रोल इसी फ़ाइल में पंजीकृत होगा। आप अपने .Net सॉल्यूशन के सॉल्यूशन एक्सप्लोरर में demo.aspx फ़ाइल पर डबल-क्लिक करके ऐसा कर सकते हैं।

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

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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>
<%@ Register Src="~/Guru99Control.ascx" TagName="WebControl" TagPrefix="TWebControl" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
</head>
<body>
	<form id="form1" runat="server">
		<TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

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

पहला चरण वेब यूजर कंट्रोल को रजिस्टर करना है। इसमें निम्नलिखित बुनियादी पैरामीटर शामिल हैं:
1. 'रजिस्टर' कीवर्ड का उपयोग वेब उपयोगकर्ता नियंत्रण को पंजीकृत करने के लिए किया जाता है।
2. Src पैरामीटर का उपयोग कंट्रोल का नाम परिभाषित करने के लिए किया जाता है, जो हमारे मामले में है Guru99Control.ascx.
3. TagName और TagPrefix कंट्रोल को दिए गए अलग-अलग नाम हैं। ऐसा इसलिए किया जाता है ताकि HTML पेजों में इन्हें सामान्य HTML कंट्रोल की तरह ही संदर्भित किया जा सके।
इसके बाद, हम पहले से असाइन किए गए TagPrefix:TagName के माध्यम से अपने वेब यूजर कंट्रोल को संदर्भित करते हैं। TagPrefix:TagName यह दर्शाता है कि हम अपने कस्टम वेब कंट्रोल का उपयोग करना चाहते हैं। जब वेब सर्वर द्वारा पेज को प्रोसेस किया जाता है, तो आप देख सकते हैं कि हमने TWebControl:WebControl टैग का उपयोग किया है। इसके बाद यह 'Guruतदनुसार '99Control'।
1. "हेडर" नामक कंट्रोल को एक वैकल्पिक आईडी दी जाती है। आमतौर पर, एचटीएमएल कंट्रोल को आईडी देना एक अच्छी प्रथा है।
2. अंत में, runat=”server” विशेषता यह सुनिश्चित करती है कि कंट्रोल वेब सर्वर पर चलेगा। सभी ASP.Net कंट्रोल्स के लिए, यह डिफ़ॉल्ट विशेषता है। सभी ASP.Net कंट्रोल्स (कस्टम कंट्रोल्स सहित) सर्वर पर चलने चाहिए। उनका आउटपुट सर्वर से क्लाइंट को भेजा जाता है और तदनुसार ब्राउज़र में प्रदर्शित होता है।

जब उपरोक्त कोड सेट किया जाता है, और प्रोजेक्ट का उपयोग करके निष्पादित किया जाता है विजुअल स्टूडियो, आपको नीचे दिया गया आउटपुट मिलेगा।

आउटपुट: -

ब्राउज़र में प्रदर्शित आउटपुट संदेश दर्शाता है कि वेब उपयोगकर्ता नियंत्रण सफलतापूर्वक निष्पादित किया गया था।

वेब.कॉन्फ़िग कॉन्फ़िगरेशन फ़ाइल में ASP.Net कंट्रोल्स को विश्व स्तर पर पंजीकृत करना

कभी-कभी किसी ASP.Net एप्लिकेशन में कई पेजों पर यूजर कंट्रोल का उपयोग करना आवश्यक हो सकता है। ऐसे में, आप प्रत्येक ASP.Net पेज पर यूजर कंट्रोल को रजिस्टर करना नहीं चाहेंगे।

.Net में आप 'web.config' फ़ाइल में पंजीकरण कर सकते हैं।
web.config फ़ाइल एक सामान्य कॉन्फ़िगरेशन फ़ाइल है जिसका उपयोग .Net प्रोजेक्ट में सभी वेब पेजों द्वारा किया जाता है।
इसमें ASP.Net वेब प्रोजेक्ट के लिए आवश्यक कॉन्फ़िगरेशन विवरण शामिल हैं। उदाहरण के लिए, web.config फ़ाइल में एक सामान्य कॉन्फ़िगरेशन है लक्ष्य फ़्रेमवर्क पैरामीटर.
इस पैरामीटर का उपयोग एप्लिकेशन द्वारा प्रयुक्त .Net फ्रेमवर्क संस्करण की पहचान करने के लिए किया जाता है।

नीचे web.config फ़ाइल में डिफ़ॉल्ट कोड का एक स्नैपशॉट है। हाइलाइट किया गया भाग लक्ष्य फ़्रेमवर्क भाग है।

आइए देखें कि हम अपना पंजीकरण कैसे करा सकते हैं। Guruweb.config फ़ाइल में 99Control।

चरण 1) सॉल्यूशन एक्सप्लोरर से web.config फ़ाइल को डबल-क्लिक करके खोलें।

जब आप web.config फ़ाइल खोलते हैं, तो आपको नीचे दिया गया कॉन्फ़िगरेशन दिखाई दे सकता है। प्रोजेक्ट बनाते समय Visual Studio द्वारा 'web.config' स्वचालित रूप से जोड़ दिया जाता है। ASP.Net प्रोजेक्ट को ठीक से काम करने के लिए यह बुनियादी कॉन्फ़िगरेशन आवश्यक है।

चरण 2) अब हम अपने कॉम्पोनेंट को web.config फ़ाइल में रजिस्टर करते हैं। इसके लिए हमें नीचे दी गई लाइन्स जोड़नी होंगी।

<configuration>
	<system.web>
	 <compilation debug="true" targetFramework="4.5" />
	<pages>
		<controls>
		 <add tagPrefix="TWebControl" src="~/Guru99Control.ascx" tagName="WebControl" />
		</controls>
	</pages>
	</system.web>
</configuration>

पंजीकरण में निम्नलिखित उप-चरण शामिल हैं:

नामक टैग जोड़ें इसका अर्थ है कि नियंत्रणों के लिए सभी कॉन्फ़िगरेशन समाधान में सभी ASP.Net पृष्ठों पर लागू होंगे।
टैग का अर्थ है कि आप उपयोगकर्ता नियंत्रण के लिए कॉन्फ़िगरेशन जोड़ रहे हैं।
फिर हम यूजर कंट्रोल को अतिरिक्त टैग के साथ रजिस्टर करते हैं। टैगप्रीफिक्स, टैगनेम और src के बाकी पैरामीटर पहले जैसे ही रहते हैं।

चरण 3) 'demo.aspx' पेज पर जाएं और उस कंट्रोल की लाइनों को हटा दें जिसमें रजिस्ट्रेशन था। Guru99 घटक। यदि आप यह चरण पूरा नहीं करते हैं, तो 'Guru'web.config' फ़ाइल के बजाय 'demo.aspx' फ़ाइल से '99Control.ascx' फ़ाइल निष्पादित की जाएगी।

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>
<body>
	<form id="form1" runat="server">
	  <TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

उपरोक्त कोड सेट हो जाने के बाद, और विजुअल स्टूडियो का उपयोग करके प्रोजेक्ट को निष्पादित करने पर, आपको नीचे दिया गया आउटपुट प्राप्त होगा।

आउटपुट: -

आउटपुट संदेश दर्शाता है कि वेब उपयोगकर्ता नियंत्रण सफलतापूर्वक निष्पादित किया गया था।

वेब नियंत्रण में सार्वजनिक गुण जोड़ना

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

<html>
<body>
	<div style="color:#0000FF">

		Demo Form

	</div>
</body>
</html>

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

<div style="color:#0000FF">

तो रंग विशेषता कुछ और नहीं बल्कि एक कुंजी-मूल्य जोड़ी है जो टैग के बारे में अधिक जानकारी देती है। उपरोक्त मामले में, कुंजी का नाम 'शैली' है और कुंजी का मान 'रंग: #0000FF' है।

इसी प्रकार, उपयोगकर्ता नियंत्रणों के लिए, आप अपने स्वयं के गुण बना सकते हैं जो नियंत्रण का वर्णन करते हैं।

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

आइये इसे लागू करने के लिए नीचे दिए गए चरणों का पालन करें।

चरण 1) ओपन Guru99Control.ascx फ़ाइल में MinValue प्रॉपर्टी जोड़ने के लिए कोड डालें।

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="DemoApplication.Demo" %>

	<script runat="server">
	  public int MinValue = 0;
	</script>

<table>
	<tr>
	  <td>Guru99 Tutorials</td>
	</tr>

	<tr>
	  <td> This Tutorial is for</td>
	</tr>
</table>

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

स्क्रिप्ट runat=”server” विशेषता का उपयोग यह इंगित करने के लिए किया जाता है कि हम कुछ .Net-विशिष्ट कोड जोड़ रहे हैं और इसे वेब सर्वर पर चलाने की आवश्यकता है। उपयोगकर्ता नियंत्रण में जोड़ी गई किसी भी प्रॉपर्टी को संसाधित करने के लिए यह आवश्यक है। फिर हम अपनी प्रॉपर्टी MinValue जोड़ते हैं और इसे 0 का डिफ़ॉल्ट मान देते हैं।

चरण 2) अब हम अपनी demo.aspx फ़ाइल में इस प्रॉपर्टी को संदर्भित करते हैं। अब हम बस MinValue प्रॉपर्टी को संदर्भित कर रहे हैं और 100 का नया मान असाइन कर रहे हैं।

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>
<body>
	<form id="form1" runat="server">
	  <TWebControl:WebControl ID="Header" runat="server" MinValue="100" />
	</form>
</body>
</html>

नोट: जब आप इस कोड को चलाएंगे, तो कोई आउटपुट नहीं दिखेगा। इसका कारण यह है कि आउटपुट 100 अक्षरों की सीमा के अंतर्गत आता है।

अक्सर पूछे जाने वाले प्रश्न

जी हां। एआई सहायक पुन: प्रयोज्य घटक के विवरण से .ascx मार्कअप, कोड-बिहाइंड और रजिस्टर निर्देश उत्पन्न कर सकते हैं। Revजनरेट किए गए TagPrefix, TagName और Src मानों की जांच करके सुनिश्चित करें कि वे आपके प्रोजेक्ट से मेल खाते हैं।

कुछ हद तक। AI एक .ascx यूजर कंट्रोल को ASP.NET Core Razor कंपोनेंट या पार्शियल व्यू में बदलने में मदद कर सकता है और मॉडल में अंतर को चिह्नित कर सकता है। हालांकि, फ्रेमवर्क द्वारा स्टेट और इवेंट्स को अलग-अलग तरीके से हैंडल किए जाने के कारण माइग्रेशन के लिए मैन्युअल टेस्टिंग की आवश्यकता होती है।

एक यूजर कंट्रोल (.ascx) मौजूदा कंट्रोल्स से बनाया जाता है और इसे बनाना आसान होता है, लेकिन यह एक ही प्रोजेक्ट तक सीमित रहता है। एक कस्टम कंट्रोल को DLL में कंपाइल किया जाता है, इसे बनाना थोड़ा मुश्किल होता है, लेकिन इसे कई प्रोजेक्ट्स में इस्तेमाल किया जा सकता है और यह टूलबॉक्स में उपलब्ध होता है।

जब केवल एक ही पेज पर कंट्रोल का उपयोग हो रहा हो, तो उसे उसी पेज पर रजिस्टर करें। जब कंट्रोल का उपयोग कई पेजों पर हो रहा हो, तो उसे web.config में रजिस्टर करें, ताकि हर पेज पर रजिस्टर निर्देश को दोहराने से बचा जा सके।

ASP.NET वेब फ़ॉर्म ट्यूटोरियल: उपयोगकर्ता नियंत्रण उदाहरण

ASP.Net में उपयोगकर्ता नियंत्रण बनाएँ

ASP.NET वेब फॉर्म पर उपयोगकर्ता नियंत्रणों को पंजीकृत करना

वेब.कॉन्फ़िग कॉन्फ़िगरेशन फ़ाइल में ASP.Net कंट्रोल्स को विश्व स्तर पर पंजीकृत करना

वेब नियंत्रण में सार्वजनिक गुण जोड़ना

अक्सर पूछे जाने वाले प्रश्न

इस पोस्ट को संक्षेप में इस प्रकार लिखें:

न्यूज़लैटर के लिए साइन अप करें

ASP.Net में उपयोगकर्ता नियंत्रण बनाएँ

ASP.NET वेब फॉर्म पर उपयोगकर्ता नियंत्रणों को पंजीकृत करना

संबंधित आलेख

वेब.कॉन्फ़िग कॉन्फ़िगरेशन फ़ाइल में ASP.Net कंट्रोल्स को विश्व स्तर पर पंजीकृत करना

वेब नियंत्रण में सार्वजनिक गुण जोड़ना

अक्सर पूछे जाने वाले प्रश्न

इस पोस्ट को संक्षेप में इस प्रकार लिखें:

न्यूज़लैटर के लिए साइन अप करें