Web User Control in Expression Web 4

Web User Control

Hi guys, You would be glad to know that in this article you'll learn how to create a web user control in Expression Web 4. In this application I have used a web user control in an aspx page thereby you can make database connectivity or page to page navigation using this user control. This user control is time savvy and easy to use, by just dragging and dropping the control on the spot where it is required. Also in this application I have used the user control on a previously created template although it can be used in any aspx page you create.

So let's begin with :

Step 1 : First and foremost task is to add a web user control. For this go to -->new--> page--> asp.net--> web user control. see figure to get a clear view:

Step 2 : Now if you notice, this page is created with the name "untitled.ascx", .ascx is the extension for a web user control in asp.net. Now I want to create a login user control so for this I'll add a panel to the page :

Step 3 : In the panel type the content you would like it to hold and add text boxes, hyperlinks and button as per the requirement, here am using following tools in my user control :

1. Two text boxes to hold the User name/Id and Password of the user
2. A button to allow navigation to other pages or to start a database query
3. A hyperlink named " sign up" to allow user to navigate to the register page

Step 4 : Now save this page as ". ascx " page for example I have saved it as a "login2.ascx". One thing you will notice is that as soon as you save this page file with same name appears in the folder panel. This just helps in dragging and dropping files, controls on to the web page :

Step 5 : Now to see how this control works, add a aspx page, go to File--> new-> aspx or File--> new--> page--> general--> aspx. This is the page where the user control will be used. Now in this page I add a previously created dynamic web template (to know how to create dynamic web template see this article). This Dynamic Web Template is also added by dragging and dropping the template file on the page.

Step 6 : Now in the content place holder of the DWT drag and drop the user control created so far. Adding this control looks like this:

Step 7 : The HTML code of this page is shown below:

Step 8 : Now run this page in the browser by clicking on the Preview button. The output screen looks like this:

Output1 :

Output 2 :

The only drawback of using web user control in Expression web is that you cannot add event to the button and other tools of the Web User Control in other aspx pages. It can only be added to the user control's .ascx page. Hence Expression web focuses on designing rather than developing a web page.