Tutorial How to use User Web Controls

Justin Chua P1032215

User Web Control in ASP.Net

The user web control in ASP.net is a simple user interface that is similar to a webform function, but instead, this is just one of the smaller control groups. Notice the facebook buttons at the top? No matter which part of the website you are at, you will still be able to see the three buttons. Those are what is known as User Web Controls . In this tutorial, I will teach you how to create a simple user web control, and also how to implement them. Step 1: Create a new web site

And name it testWebUserControl

Create a new folder, called Action .

The folder is where the Web User control will be stored at. Everytime we need to use the web control, we will need to call it at the top of the web page (Examples later) After that, add a new Item (Web User Control) , the extension is .ascx

Once created, you will have noticed something different. This is similar to a Web Page, (aspx) file, but just that in this form, we do not have the respective HTML tags (It can still be implemented)

Enter the codes inside

<tableborder="1"> <tr> <td> <asp:Labelrunat="server"Text="Testing Label"></asp:Label></td> <td> <asp:TextBoxrunat="server"ID="txtTest"></asp:TextBox></td> </tr> <tr> <td> <asp:Label runat=server Text = ID=lblTest></asp:Label> </td> <td> <asp:ButtonID="btnTest"runat="server"Text="Test"/></td></tr></table>

This creates a simple table in the form, as such

Under the code behind file (Right click > View Code) Enter the following codes for your button click event handler.

Now we will be implementing the logic inside the table. A simple test would be, in that empty label, we show what we have typed in the text field.

PartialClassExperimentTest Inherits System.Web.UI.UserControl ProtectedSub btnTest_Click(ByVal sender AsObject, ByVal e As System.EventArgs) Handles btnTest.Click Dim testString AsString = txtTest.Text lblTest.Text = testString EndSub EndClass

Now we ve done creating a very simple web user control. Let s try to implement it.

Get a new web form (NOT INSIDE ACTION FOLDER)

Now, go to the aspx page (NOT the code behind file), enter this line

<%@RegisterSrc="~/Action/ExperimentTest.ascx"TagName="Test"TagPrefix="TestForm"%>

This line, is to get the user web control from the Action area. Then assigning it with a Tag Name (Test) and a Tag prefix (TestForm) Whenever we want to use it, instead of <asp:Label >, we use <TestForm:Test .. ..>

Everytime when we use this control, we must always remember to put the (runat= server ) code, if not an error will generate.

Now, when we want to use the thing, we just add this line <TestForm:TestID="test1"runat="server"/>

This allows one of this to be created in the web form. Shown as such

Now, enter a value inside the textbox and press the button. The page will refresh, then the label that s in the hidden area, will display the text inside the textfield. As such

This is what will happen after the button is clicked.

Why is this user web control useful? This use web control can be implemented in many ways, for example, you can do a Search function using a user web control. For example, from one particular video renting area, we can use a gridview web user control to databind the various categories in.

Each of the hyperlinks actually links to the various categories, where the movies are sorted into different categories. And the code-behind file isn t really long, it s just similar to a normal web form, using those classes, and the functions to get values to databind into the gridview.