You are here: Home / Core ASP.NET WebForms with C# in Hindi / Dynamic User Interface of ASP.NET Web Forms
by on September 6, 2020

Dynamic User Interface of ASP.NET Web Forms

Dynamic User Interface of ASP.NET Web Forms – पिछले Chapter में Create किए गए HTML Form के Example द्वारा हम समझ सकते हैं कि Form व User Interface Controls Model का प्रयोग करते हुए Client Side Information को  Server Side में भी आसानी से Access व Manipulate किया जा सकता है। जबकि ASP.NET हमें ये सुविधा भी Provide करता है कि हम Client Side को  प्राप्त होने वाले Data को Server Side में भी Setup कर सकते हैं, क्योंकि लगभग सभी Web Control Properties Readable भी होती हैं और Writable भी।

इसका मतलब ये है कि हम किसी Form Control की Text Properly को Read भी कर सकते हैं और उसी समय उसी Control की Text Property में नया Data Write भी कर सकते हैं, जो कि User को  उसके Web Browser में Modified Data के रूप में प्राप्त होता है।

ASP.NET के Dynamic Controls वास्तव में HTML Control की तरह ही होते हैं, लेकिन ये Control, HTML Form Control की तुलना में Advance Controls होते हैं, जिन्हें <form> Element के बीच Specify करते समय हमें हर Control के नाम से पहले “ASP:” Prefix को Use करना होता है।

यानी  HTML Form के Controls वास्तव में Static Controls होते हैं, जबकि ASP.NET के Form Controls, Dynamic Controls होते हैं। हालांकि दोनों ही प्रकार के Forms के Controls के नामों में कोई अन्तर नहीं होता, लेकिन इनकी Functionality में काफी अन्तर होता है। क्योंकि Static Form Controls को  Server Side Code-Behind File में उतना आसानी से Access व Manipulate नहीं किया जा सकता, जितना आसानी से Dynamic Controls को  किया जा सकता है।

अत: यदि हम हमारे पिछले Example Page Default.aspx के HTML Code को  ही ASP.NET के Dynamic Controls से Replace करते हुए Modify करें, तो हमारा Modified Web Page Code निम्नानुसार होगा-

[code]
File Name: Default.aspx
<%@Page
Language="C#"
AutoEventWireup="true"
 CodeBehind="Default.aspx.cs"
Inherits="WebForms.Default"
%>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/x html">
<head runat="server">
<title> HTML Form Example</title>
</head>
<body>
 <form id=“frmCalculate" runat="server">
<h1>Addition Form</h1>

<table>
<tr>
<td>First:</td>
<td>
  <ASP:TextBox ID=“txtFirstValue" runat="server">0</ASP:TextBox>
</td>
</tr>
<tr>
<td>Second:</td>
<td>
  <ASP:TextBox ID=“txtSecondValue" runat="server">0</ASP:TextBox>
</td>
</tr>
<tr>
<td>Total:</td><td>
  <ASP:Label ID=“lblTotal" runat="server"></ASP:Label>
</td>
</tr>
<tr><tdcolspan="2">
<input id=“submit"type="submit"value="Submit for Addition"/></td></tr>
</table>
</form>
</body>
</html>
[/code]

जब हम Dynamic Controls को  Use करते हुए अपना Web Form Create करना चाहते हैं, तब हमें अपने Codes को  पूरी तरह से Manually लिखना जरूरी नहीं होता। बल्कि Fast Development करने के लिए  Visual Studio हमें Dynamic Controls का एक Visual Toolbar Provide करता है, जहां से हम हमारे वांछित Controls को  Drag-and-Drop तकनीक का प्रयोग करते हुए भी अपने Webpage को  Design कर सकते हैं।

Visual Studio में हम हमारे Web Page को  तीन तरीकों से Manage कर सकते हैं, जिन है। Design, Split व Source के नाम से जाना जाता है और इन तीनों Modes का अपना Special महत्व है।

Design Mode में हम हमारे Web Form को  Drag-and-Drop तकनीक का प्रयोग करते हुए Visually Design कर सकते हैं तथा Source Mode में हम अपना Page Create करने के लिए  Manual Codes लिख सकते हैं। जबकि split Mode में हमें Screen के आधे हिस्से में Design Mode व आधे हिस्से में Source Mode Display होता है। जिसकी वजह से हम दोनों Modes को  समान समय पर Use करने की सुविधा प्राप्त कर सकते हैं।

Dynamic Controls को Use करते हुए अपना Web Form Create करने के लिए हमें ठीक वही तरीका Use करना होता है, जो तरीका हम Visual Basic आधारित Desktop Application Create करते समय Use करते थे और यदि ASP.NET को Develop करने का मूल उद्देश्‍य भी था।

Dynamic User Interface of ASP.NET Web Forms in Hindi

Dynamic Controls को जब हम Design Mode में Use करते हुए अपना Web Form Create करते हैं, तब अपने Web Form में Controls की Properties को Set करने के लिए हम Visual Studio के Properties Sidebar का प्रयोग कर सकते हैं। जबकि यदि हम चाहें, तो Coding को Manually Change करने के लिए Source Mode में भी Switch कर सकते हैं।

अपने ASP.NET Page के Form को  जब हम Dynamic Controls का प्रयोग करते हुए Redesign करते हैं, और फिर इस Modified Page को  Run करते हैं, तब भी हमें ठीक उसी प्रकार काOutput Page प्राप्त होता है जैसा पहले हुआ था। लेकिन इस बार Display होने वाले Page के <form> Element में Add किए गए User Interface Elements वास्तव में Server Side के Dynamic Controls होते हैं, न कि Client Side के Static  HTML Elements.

इसलिए  इस Webpage के विभिन्न Server Side Dynamic Controls को  Access व Manipulate करने के लिए  हम ठीक उसी प्रकार के Event Driven Codes लिख सकते हैं, जिस प्रकार के Codes किसी Desktop Application को  Develop करते समय लिखे जाते हैं। यानी हम हमारी Default.aspx.cs Code Behind File को  निम्नानुसार Modify कर सकते हैं:

[code]
File Name: Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebForms
{
  publicpartialclassDefault : System.Web.UI.Page
  {
    protectedvoid Page_Load(object sender, EventArgs e)
    {
      string firstValue = txtFirstValue.Text;
      string secondValue = txtSecondValue.Text;
      lblTotal.Text = (Convert.ToInt32(firstValue) + Convert.ToInt32(secondValue)).ToString();
    }
  }
}
[/code]

जैसाकि इस Code Behind File के Code द्वारा हम समझ सकते हैं कि इस बार हमने Client Side Form के Data को  Access करने के लिए  निम्नानुसार Code Statements का प्रयोग किया है:

[code]
string firstValue = txtFirstValue.Text;
string secondValue = txtSecondValue.Text;
[/code]

जो कि Visual Basic के Codes से ज्यादा Match करते हैं, न कि निम्नानुसार Code Statements का%

[code]
string firstValue = txtFirstValue.Value;
string secondValue = txtSecondValue.Value;
[/code]

जिसे पिछले Example में Use किया था और जो कि Visual Basic Codes के समान नहीं हैं। जबकि ASP.NET को  Develop करने के पीछे का मूल विचार यही था कि Web Applications को  भी ठीक उसी प्रकार से Rapidly Develop किया जा सके, जिस तरह से Visual Basic Language के माध्‍यम से Visual Studio IDE का प्रयोग करते हुए Event Driven Desktop Applications Develop किए जाते थे।

इस एक प्रकार का Code लिखने के अपने कई फायदे भी हैं। सबसे पहला फायदा तो यही है इस प्रकार के Codes को  लिखना, समझना, Debug व Reuse करना ज्यादा आसान होता है। क्योंकि हमें Query String के माध्‍यम से आने वाले Client Side Form के  HTML Elements के मानों को Request.Form Collection के माध्‍यम से Access व Manipulate करने की जरूरत नहीं होती, जो कि तुलनात्मक रूप से ज्यादा लम्बाव Complex Process है।

जबकि इस तरीके को  Use करने पर हमारे पास हमारे हर Dynamic Control एक Object के रूप में होता है और उस Object के साथ हम विभिन्न प्रकार की Properties व Methods का प्रयोग करके जैसा चाहें वैसा Operation Perform कर सकते हैं और Generate होने वाले Results का Effect सीधे ही Client Side में User को  Reflect होता है।

उदाहरण के लिए  उपरोक्त Code Behind File में लिखे गए Code को  हम निम्नानुसार Modify कर सकते हैं:

[code]
File Name: Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebForms
{
  publicpartialclassDefault : System.Web.UI.Page
  {
    protectedvoid Page_Load(object sender, EventArgs e)
    {
      string firstValue = txtFirstValue.Text;
      string secondValue = txtSecondValue.Text;
      lblTotal.Text =(Convert.ToInt32(firstValue) + Convert.ToInt32(secondValue)).ToString();
      lblTotal.BorderStyle = BorderStyle.Ridge;
      lblTotal.ForeColor = System.Drawing.Color.Red;
      lblTotal.BackColor = System.Drawing.Color.Yellow;
    }
  }
}
[/code]

तो हमें प्राप्त होने वाला Resultant Webpage निम्नानुसार होता है, जहां हमारे lblTotal ID वाले Label का Background व Foreground Color तथा Borderको  Set किया गया है:

इस तरीके को  Use करने का दूसरा फायदा ये है कि Code Behind File में Control Based Codes को  Place करना भी काफी आसान होता है। जिसकी वजह से हमें हमारे ASP.NET Page में जहां कहीं पर भी Dynamic Content Place करना होता है, वहां उससे सम्बंधित Logic Code को  Specify कर दिया जाता है।

Dynamic User Interface of ASP.NET Web Forms in Hindi

परिणामस्वरूप उस ASP.NET Page की Parsing के दौरान ही वह Logic Code भी Execute होता है और Dynamic Output Generate करके Place कर देता है। इतना ही नहीं] यदि किसी APS.NET Page में कई जगहों पर Dynamic Content Place करना हो, तब भी हम Control Based Codes का प्रयोग करते हुए इस जरूरत को  बडी ही आसानी से पूरा कर सकते हैं।

Code Behind File के माध्‍यम से Develop किया जाने वाला ये Control Based Programming Model हमें एक ऐसा तरीका Provide करता है, जिसका प्रयोग करने की वजह से हमें हमारे Web Application के विभिन्न Web Pages को  Develop करते समय Low Level  HTML Details को  Manage करने की जरूरत नहीं होती।

क्योंकि इस Programming Model को  Use करते समय हमें  HTML व इससे सम्बंधित अन्‍य Web Development Related Technologies को  बहुत ज्यादा गहराई से समझने की जरूरत नहीं होती। साथ ही Visual Studio द्वारा Web Application के लिए  जो  HTML Code Generate किया जाता है, वह Cross Browser Compatibility भी Provide करता है, जिसकी वजह से एक Web Developer के रूप में हमें Browser Related Issues व  HTML तथा X HTML के विभिन्न Flavors को  Handle करने से सम्बंधित बातों को  भी ध्‍यान में रखने की जरूरत नहीं होती।

सरल शब्दों में कहें, तो इस Control Model को  Use करते समय हमारा Web Application, Standard  HTML से Tightly Coupled नहीं रहता, बल्कि काफी Dynamic तरीके से Behave करते हुए अलग-अलग प्रकार के  HTML Versions व Web Browsers के Compatible रहता है।

Core ASP.NET WebForms in Hindi - BccFalna.com: TechTalks in Hindiये Article इस वेबसाईट पर Selling हेतु उपलब्‍ध EBook Core ASP.NET WebForms with C# in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी। 

Core ASP.NET WebForms in Hindi | Page:647 | Format: PDF

BUY NOW GET DEMO REVIEWS

Filed Under: Core ASP.NET WebForms with C# in Hindi