Loading Widgets in ASP.NET User Controls

In this guide you will learn how to load jQWidgets components in ASP.NET User Controls and how to include these User Controls as content of other widgets on your ASP.NET pages. A User Control is a composite control that works much like an ASP.NET Web page - you can add existing Web server controls and markup to a user control, and define properties and methods for the control. You can then embed them in ASP.NET Web pages, where they act as a unit. You can read more about ASP.NET User Controls here: http://msdn.microsoft.com/en-us/library/y6wb1a0e(v=vs.100).aspx.

1. Create a New Project

In Visual Studio, go to File → New Project, then choose ASP.NET Web Forms Application.

2. Add Necessary Styles and Scripts

In your new project you can find the folders Content and Scripts. In Content, add the file jqx.base.css. In Scripts, add all necessary jQWidgets script files. In our example, they are:

• jqxcore.js
• jqxwindow.js
• jqxdocking.js
• jqxdata.js
• jqxdraw.js
• jqxchart.core.js

Make sure a version of jQuery is also present (it is by default).

3. Create a User Control

In the root of the project, add a new User Control named UserControl.ascx with the following content:

4.Add a jqxDocking in the ASP.NET Page

Open the page Default.aspx. Reference the necessary files for initializing a jqxDocking:

• jqx.base.css
• jqxcore.js
• jqxwindow.js
• jqxdocking.js

By default, a version of jQuery is also referenced. If in your project it is not, make sure you add it.

Add the required jqxDocking HTML structure in the page's content:

Then add jqxDocking's initialization script:

5. Reference the User Control in the ASP.NET Page

At the top of Default.aspx, add a @ Register directive after the @ Page directive as follows:

6. Add the User Control in One of the Docking Windows

Finally, include the User Control in the content section of the first jqxDocking window. Here is the complete source code of Default.aspx: