In the Javascript world, the hot topic these days seems to be jQuery.  Microsoft is beginning to see its value, and DotNetNuke is baking it in in their 5.0+ release.  For me, it just makes sense to add it to my portfolio.

When I take the time to learn any sort of new technology I make an attempt to take the project and turn it into something useable.  In the case of jQuery I decided to create a set of ASP.NET Friendly controls which wrap up the jQuery UI Interactions and Widgets.

Enter jQueryDotNet. (Download)

Its a little project I did, mostly over the past weekend.  Each of these controls include all options and client side events for each Widget and Interaction and even an Animation and Effect implementation.

Interactions (ASP.NET Extender Controls)

Widgets (ASP.NET Server Controls)

Effects (ASP.NET Extender Controls)

Effects (done)
Animation (done)

Its very difficult to actually get the whole experience across in simple screen shots, but if your the type that needs them, here is a flickr set. 

Sample Code:

First thing is first, you need to add a ScriptManager control to the page:

<cc2:ScriptManager EnableNoConflict="true" ID="ScriptManager1" runat="server">
</cc2:ScriptManager>

Notice the difference between an actual Server Side Control like the Accordion Control vs an Extender Control like the Resizable Extender.   Extender controls are designed to be added to an existing page and extend a specific control client side UI – like making a panel resizable!

Here is just a few examples of what is available in the jQueryDotNet project.

Accordion Control:

    <cc1:AccordianControl Collapsible="true" Event="click"  
                     OnClientTabChange="alert(ui.newHeader.context.innerText)" 
                     ID="JQueryPanel1" runat="server" Accordian="true">
        <cc1:AccordianPanel ID="Accordian1" runat="server" Text="Accordian Panel 1">
            This is accordian panel 1
        </cc1:AccordianPanel>
        <cc1:AccordianPanel ID="Accordian2" runat="server" Text="Accordian Panel 2">
            This is accordian panel 2
        </cc1:AccordianPanel>
        <cc1:AccordianPanel ID="Accordian3" runat="server" Text="Accordian Panel 3">
            This is accordian panel 3
        </cc1:AccordianPanel>
        <cc1:AccordianPanel ID="Accordian4" runat="server" Text="Accordian Panel 4">
            This is accordian panel 4
        </cc1:AccordianPanel>
    </cc1:AccordianControl>

Screen Shot:

Ajax Support

<script type="text/javascript">

var result = '';
function AjaxCallBack(ServerResult, Status) {
    debugger;
    if(Status == "success") {
        var result = eval('(' + ServerResult + ')');;
        result = ServerResult;
    }
}

function GatherSomeData() {
    debugger;
    return '{"SharedString":"Hello World","SharedDouble":6.0,"SharedInt":5,"Children":[{"SharedChildString":"Im a child from the client!!"}]}';
}
</script>

<asp:Button runat="server" ID="TriggerButton" Text="Click Me" OnClientClick="return false;" />
<asp:Label runat="server" ID="ResultLabel" Text="Results"></asp:Label>

<cc2:AjaxExtender runat="server" ID="AjaxExtender1"  
MethodName="ServerMethod" Callback="AjaxCallBack" TriggerControl="TriggerButton"
OnClientBeforeAjax="GatherSomeData();"
></cc2:AjaxExtender>

Code Behind:

public partial class AjaxArrayJson : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    public static string ServerMethod(HttpContext context, string UniqueID, string Data)
    {
        if (Data == "")
        {
            SharedData sd = new SharedData();
            sd.SharedDouble = 6;
            sd.SharedInt = 5;
            sd.SharedString = "Hello World";
            sd.Children = new List<SharedChild>();
            SharedChild c1 = new SharedChild();
            c1.SharedChildString = "Im a child";
            sd.Children.Add(c1);
            return Newtonsoft.Json.JsonConvert.SerializeObject(sd);
        }
        else
        {
            SharedData data = (Newtonsoft.Json.JsonConvert.DeserializeObject(Data, typeof (SharedData)) as SharedData);
            if (data != null)
                return "{\"result\":\"GOOD\"}";
            else
                return "{\"result\":\"BAD\"}";
        }
        return "";
    }
}

public class SharedData
{
    public string SharedString { get; set; }
    public double SharedDouble { get; set; }
    public int SharedInt { get; set; }
    public System.Collections.Generic.List<SharedChild> Children { get; set; }
}
public class SharedChild
{
    public string SharedChildString { get; set; }   
}

Animations:

<asp:Panel runat="server" ID="Panel1" BorderWidth="1">
this is the content<br />
this is the content<br />
this is the content<br />
</asp:Panel>

<br /><br /><br />
<asp:Panel runat="server" ID="Panel2" BorderWidth="1">
<div id="AniDiv" runat="server">
Click me
</div>
</asp:Panel>

<cc2:Animate runat="server" ID="Animate1" 
TriggerControl="Panel1" AssociatedControl="Panel2"
To="backgroundColor: '#fff', color: '#000', width: 240"
From="backgroundColor: '#aa0000', color: '#fff', width: 500"
 />

DatePicker:

   <cc1:DatePicker
     OnClientBeforeShow="$(this).fadeOut().fadeIn();" 
     OnClientOnSelect="alert(dateText);" 
     ID="DatePicker1" runat="server"></cc1:DatePicker>

Screenshot:

Resizable Tab Control:

<cc1:TabControl 
    Disabled="3" 
    Selected="2" 
    Collapsible="true" 
    Fx="{ opacity: 'toggle' }"
    OnClientTabsSelect="alert(ui.tab.outerText);"
    ID="TabControl1" runat="server">
        
        <cc1:Tab ID="Tab1" runat="server" Text="TAB A" TabName="TABA"></cc1:Tab>
        <cc1:Tab ID="Tab2" runat="server" Text="TAB B"  TabName="TABB"></cc1:Tab>
        <cc1:Tab ID="Tab3" runat="server" Text="TAB C"  TabName="TABC"></cc1:Tab>
        <cc1:Tab ID="Tab4" runat="server" Text="TAB D"  TabName="TABD"></cc1:Tab>
        <cc1:Tab ID="Tab5" runat="server" Text="TAB E"  TabName="TABE"></cc1:Tab>
        
        <cc1:TabPage ID="TabPage1" TabName="TABA" runat="server">        
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>   
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </cc1:TabPage>
        <cc1:TabPage ID="TabPage2" TabName="TABB" runat="server">
            <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
            <asp:HyperLink ID="HyperLink1" runat="server">HyperLink</asp:HyperLink>
        </cc1:TabPage>
        <cc1:TabPage ID="TabPage3" TabName="TABC" runat="server">
C
        </cc1:TabPage>
        <cc1:TabPage ID="TabPage4" TabName="TABD" runat="server">
D        </cc1:TabPage>
        <cc1:TabPage ID="TabPage5" TabName="TABE" runat="server">
E        </cc1:TabPage>
    </cc1:TabControl>
    
    <cc2:Resizeable ID="Resizeable1" runat="server" AssociatedControl="TabControl1" />

Screen Shot:

Lastly, please do NOT post feedback/suggestions/bugs/questions/etc. to my blog.  I will NOT answer them.  Use the facilities supplied on the CodePlex site itself.

3 Comments

• MuteThis said Thursday, April 9, 2009 5:39:34 AM

  Looks cool, I can't wait to try it out.

• gnosys said Wednesday, July 21, 2010 3:40:32 PM

  Great post! Thanks.

• Millard said Tuesday, May 21, 2013 4:33:25 PM

  Your report has proven beneficial to me. It’s
  extremely helpful and you're simply obviously extremely educated in this region. You have got exposed my own sight to various thoughts about this particular subject matter along with intriquing, notable and strong content.