User Control in ASP.NET :
Definition :
A user control is a file you create that contains a set of other ASP.NET controls and code grouped together to provide common functionality.
The user control can then be used on different pages within a Web site.
User controls in ASP.NET are created as .ascx fi les. An .ascx fi le is similar to the Web page’s .aspx fi le and can have its own code-behind page.
Create User Control :
Step 1:
First Create a new Web site called SampleUserControl using your C# programming language.
Step 2:
Add a user control to the site: Right-click the Web site and choose Add New Item. In the Add New Item dialog box, select Web User Control. Name the user control addressusercontrol.ascx.
Step 3:
Open the user control and add input elements for address, city, state, and zip code.
Your control markup should look similar to the following:
<div>
Address
<br />
< asp:TextBox ID=”TextBoxAddress” runat=”server” Width=”275px”
Height=”80px” TextMode=”MultiLine”></asp:TextBox>
<div style=”width: 280px”>
<div style=”float: left; margin-right: 3px”>
City
<br />
<asp:TextBox ID=”TextBoxCity” runat=”server” Width=”150”></asp:TextBox>
</div>
<div style=”float: left; margin-right: 3px”>
State
<br />
<asp:TextBox ID=”TextBoxState” runat=”server” Width=”30”></asp:TextBox>
</div>
<div style=”float: left”>
Zip
< br />
<asp:TextBox ID=”TextBoxZip” runat=”server” Width=”70”></asp:TextBox>
</div>
</div>
<asp:Button ID=”ButtonSave” runat=”server” Text=”Save” />
</div>
Step 4:
Open the code-behind fi le and add properties to expose the Text property of the user control’s TextBox controls. Your code should look similar to the following:
public string Address
{
get { return TextBoxAddress.Text; }
set { TextBoxAddress.Text = value; }
}
public string City
{
get { return TextBoxCity.Text; }
set { TextBoxCity.Text = value; }
}
public string State
{
get { return TextBoxState.Text; }
set { TextBoxState.Text = value; }
}
public string Zip
{
get { return TextBoxZip.Text; }
set { TextBoxZip.Text = value; }
}
Step 5:
Next, you will defi ne the event handler for the Save button. This event will raise an event to the host of the user control. Given that the user control already exposes properties for reading its values, the event will not pass them as an argument; it will simply raise a generic event.
If using C#, start by adding a delegate to the user control. Add the delegate to the code-behind file but outside the class. Your delegate should look as follows:
public delegate void SaveButtonClickHandler(object sender, EventArgs e);
Next, add the event declaration to the user control’s code-behind class file. This codeshould read as follows:
public event SaveButtonClickHandler SaveButtonClick;
Finally, add code to the button’s click event that raises this event. The following is an example:
protected void ButtonSave_Click(object sender, EventArgs e)
{
if (SaveButtonClick != null)
{
SaveButtonClick(this, new EventArgs());
}
}
Step 5:
Compile your code and make sure there are no errors.
Use the User Control on Web Page :
Step 1:
Continue editing the project you created in the previous exercise.
Step 2:
Open the Default.aspx page in Design view. While in Design view, drag AddressUser-Control.ascx to the page from Solution Explorer.
Review the page’s source. Notice that you can initialize the control’s custom properties through markup. The properties are also available in the Properties window when in Design view.
Step 3:
Add an event handler to trap the event fi red by the user control when a user clicks the Save button. Open the Default.aspx page’s code-behind file.
In C#, you need to fi rst add a method to the page. This method should have the same signature as the event exposed by the user control. You then need to wire up the event from the user control to the newly defi ned method. You can do this inside the page’s Init method.
The following code shows an example:
protected void Page_Init(object sender, EventArgs e)
{
AddressUserControl1.SaveButtonClick += this.AddressSave_Click;
}
protected void AddressSave_Click(object sender, EventArgs e)
{
}
Step 4:
You now need to add code to the intercepted event. For this example, this code will simply take the user’s input and write it out to the debug window.
The following shows an example:
protected void AddressSave_Click(object sender, EventArgs e)
{
System.Diagnostics.Debug.WriteLine(“Address: " +
AddressUserControl1.Address +
" City: " + AddressUserControl1.City +
" State: " + AddressUserControl1.State +
" Zip: " + AddressUserControl1.Zip);
}
Step 5:
Finally, run the application in debug mode to view the results. (You must enable script debugging in your browser.) Enter address information in the user control.
Click the Save button. Return to Visual Studio and view the Output window to see the results of the trapped Save button’s event.
No comments:
Post a Comment