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

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

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

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

ASP.Net में वेब नियंत्रण बनाने की क्षमता है। इन नियंत्रणों में कोड होता है जिसे दोबारा इस्तेमाल किया जा सकता है। इसे ज़रूरत के हिसाब से पूरे एप्लीकेशन में इस्तेमाल किया जा सकता है।

आइए एक उदाहरण पर नज़र डालें कि हम ASP.Net में वेब उपयोगकर्ता नियंत्रण कैसे बना सकते हैं

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

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

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

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

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

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

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

आप देखेंगे कि समाधान में “Guru99Control” जोड़ा गया है।

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

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

कोड स्पष्टीकरण:-

हमारी वेब कंट्रोल फ़ाइल में, हम सबसे पहले एक टेबल एलिमेंट बना रहे हैं। इसका उपयोग टेक्स्ट की 2 पंक्तियों को रखने के लिए किया जाएगा जिसका उपयोग डिस्प्ले करने के लिए किया जाएगा

“गुरु99 ट्यूटोरियल्स” और
“यह ट्यूटोरियल ASP.Net के लिए है।”

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

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

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

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

“गुरु99 ट्यूटोरियल्स”
“यह ट्यूटोरियल ASP.Net के लिए है।”

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

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

सबसे पहले, हम अपने कस्टम 'कंट्रोल' को Demo.aspx फ़ाइल में पंजीकृत करेंगे।

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

जब आप फॉर्म पर डबल क्लिक करेंगे, तो आपको फॉर्म में नीचे दिया गया कोड दिखाई देगा। यह डिफ़ॉल्ट कोड है जो Visual Studio द्वारा तब जोड़ा जाता है जब 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.ore/1999/xhtml">
	<head runat="server">
		<title></title>
	</head>
<body>
	<form id="forml" runat="server”>
		<TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

कोड स्पष्टीकरण:-

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

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

आउटपुट: -

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

वेब कॉन्फ़िगरेशन कॉन्फ़िगरेशन फ़ाइल asp में वैश्विक रूप से asp.net नियंत्रण पंजीकृत करना

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

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

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

आइए देखें कि हम अपने Guru99Control को web.config फ़ाइल में कैसे पंजीकृत कर सकते हैं।

चरण 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 पृष्ठों पर लागू होंगे।
टैग का अर्थ है कि आप उपयोगकर्ता नियंत्रण के लिए कॉन्फ़िगरेशन जोड़ रहे हैं।
फिर हम अतिरिक्त टैग के साथ उपयोगकर्ता नियंत्रण पंजीकृत करते हैं। tagPrefix, tagName और src के शेष पैरामीटर पहले की तरह ही बने रहते हैं।

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

<%@ 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.ore/1999/xhtml">
	<head runat="server">
	  <title></title>
	</head>	
<body>
	<form id="form1" runat="server”>
	  <TWebControl:WebControl ID="Header" runat="server" />
	</form>
</body>
</html>

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

आउटपुट: -

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

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

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

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

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

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

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

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

आइये एक सरल उदाहरण लेते हैं और पिछले अनुभागों में बनाए गए 'गुरु99कंट्रोल' पर काम करते हैं।

हमारे उदाहरण में, हम 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
	</tr>
</table>

कोड स्पष्टीकरण:-

स्क्रिप्ट runat=server विशेषता का उपयोग यह इंगित करने के लिए किया जाता है कि हम कुछ .Net विशिष्ट कोड जोड़ रहे हैं और इसे वेब सर्वर पर चलाने की आवश्यकता है।

यह उपयोगकर्ता नियंत्रण में जोड़े गए किसी भी गुण को संसाधित करने के लिए आवश्यक है। फिर हम अपनी प्रॉपर्टी MinValue जोड़ते हैं और इसे 0 का डिफ़ॉल्ट मान देते हैं।

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

!DOCTYPE html>
<html xmlns="http://www.w3.ore/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 कैरेक्टर की सीमा के अंदर आता है।

सारांश

ASP.Net में उपयोगकर्ता नियंत्रण बनाने की क्षमता है। उपयोगकर्ता नियंत्रण का उपयोग कोड बनाने के लिए किया जाता है जिसका उपयोग किसी एप्लिकेशन में कई बार किया जाता है। उपयोगकर्ता नियंत्रण को फिर से पूरे एप्लिकेशन में इस्तेमाल किया जा सकता है।
उपयोगकर्ता नियंत्रण का उपयोग करने से पहले उसे ASP.Net पृष्ठ पर पंजीकृत होना आवश्यक है।
किसी अनुप्रयोग के सभी पृष्ठों पर उपयोगकर्ता नियंत्रण का उपयोग करने के लिए, उसे web.config फ़ाइल में पंजीकृत करें।
वेब उपयोगकर्ता नियंत्रण में गुण भी जोड़े जा सकते हैं।

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

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

वेब कॉन्फ़िगरेशन कॉन्फ़िगरेशन फ़ाइल asp में वैश्विक रूप से asp.net नियंत्रण पंजीकृत करना

संबंधित आलेख

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

सारांश

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