ASP.net Ajax and Javascript web features

This particular code snippet is about creating rich user interfaces using Ajax + Javascript in the .Net environment. For this example I used the atlas control toolkit which freely available to download here.

First open Visual Studio and create a new Atlas web site.

Go to the source view of Default.aspx page

Within the <head> element insert the following code.

<script type=”text/javascript”> function Show(){

document.getElementById(“display”).style.visibility=”visible”;

}

function DontShow()

{

document.getElementById(“display”).style.visibility=”hidden”;

}

</script>

Within the <form> tag put the following code

<asp:Panel ID=”display” runat=”server” Height=”59px” Width=”242px” style=”z-index: 101; left: 11px; width: 229px; position: absolute; top: 41px;

height: 88px; background-color: #ffffcc; visibility:hidden; border-right: #330000 thin solid; border-top: #330000 thin solid; border-left: #330000 thin solid; border-bottom: #330000 thin solid;”>

this is some sample tool tip

<div style=”position:absolute; left: 184px; top: 2px;”><a href=”#” onclick=”DontShow()”>Close</a></div>

</asp:Panel>

<div>

<a href=”#” onmouseover=”Show()” >Show my simple tool tip</a>

</div>

<cc1:DragPanelExtender ID=”DragPanelExtender1″ runat=”server”>

<cc1:DragPanelProperties TargetControlID=”display” DragHandleID=”display”></cc1:DragPanelProperties>

</cc1:DragPanelExtender>

Make sure that thew Register directive is placed at the beginning of the code (just after the page directive)

<%@ Register Assembly=”AtlasControlToolkit” Namespace=”AtlasControlToolkit” TagPrefix=”cc1″ %>

Now simply run the application. You can see that when you move the mouse over the link, a tool tip appears, and you can freely drag that tool tip anywhere in the document.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s