This project is read-only.

Project

ASP Web Control Collection which implemented jQuery plugins automatically. The javascript libraries for jQuery and jQuery UI are included inside of these controls and the scripts for the plugins.

Target

The target of these project is to offer a rich controls to develop web application with .Net Framework in a easy way to keep efforts for business logic instead of appearance.

Advises To Use The Controls

I recomend to add the controls in web.config file to avoid declare the control namespace in each page where they are used. For example:

    <pages>
            <controls>
           <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
   <add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>


               <add tagPrefix="jqc" namespace="jQuery.WebControls" assembly="jQueryWebControls"/>
               <add tagPrefix="jqc" namespace="jQuery.WebControls.UI" assembly="jQueryWebControls"/>
               <add tagPrefix="jqc" namespace="jQuery.WebControls.RocketDock" assembly="jQueryWebControls"/>
               <add tagPrefix="jqc" namespace="jQuery.WebControls.ImageGallery" assembly="jQueryWebControls"/>
            </controls>
    </pages>

Mandatory Control

It's necessary to add ajQueryScriptManager control to the page because this is in charge of add the necessary jQuery plugins to the page based on the web controls used. This control will provide the jQuery UI style that the user wants to use.

The first time that the web application is runned the jQueryScriptManager will create a folder called "css" and will copy all CSS files and images necessary to the jQuery UI framework works correctly. This folder is just created when it's not existed. Once the folder exists the control won't do anything so you can create a custome jQuery UI theme and override it to give your own style. The property to define the style is "DefaultCssUI".

Besides you can define common properties to apply to all web controls when they aren't defined at control level. For example, you can define the DateTextBox language or if you want to show a drop down list in DateTextBox to change the months and/or years you can do it. The NumberTextBox control also has common properties as the coin symbol, thousand separator, etc.

</head>
<body>
    <form id="form1" runat="server">
    <jqc:jQueryScriptManager ID="jQueryScriptManager1" runat="server" 
        DatePickerLanguage="Spanish" ChangeMonth="true" ChangeYear="false" NumericPrecision="2" 
        CoinSymbol="€" ThousandSeparator="." DecimalSeparator="," CssClassButtons="coolButton" 
        DefaultCssUI="Blitzer" />

Known Issues

The PopUpPanel control uses jQuery dialog which cut and paste the affected div at the of the HTML body. This causes that the values of the ASP.Net controls are lost becase they are out of the form tag. This issue was sorted out, cutting and pasting again the affected tag at the end of the form tag. However, if this control is used with UpdatePanel of AjaxControlToolKit the asynchronous call won't work correctly and the call back will reload the entire page. It's a minor issue.

The TabControl, in RenderMode=Accordion, doesn't work properly when there is a RocketDockMenu control in the same page.

Advises About the Styles

The control collection comes with 5 different UI styles but in case we need another different we can do the following:

  1. Create the first page in the project, add the jQueryScriptManager and select one of the DefaultCssUI themes.
  2. Run the project and open the page which contains the control added previously.
  3. Stop the project
  4. Go to the following URL to create your custome theme: http://jqueryui.com/themeroller/
  5. Download your new custome UI theme.
  6. Go to your project. There should be a folder called "css". Inside of this folder, there should be a folder with the name of the selected DefaultCssUI name.
  7. Copy and paste the CSS file and the image folder inside of this overriding the existing ones. 

 

Last edited Dec 16, 2013 at 7:54 PM by clorcar, version 12