With Great Power comes Great Response.write("Ability") : Components

ADO.NET Data Services : Efficient Error Handling across Application Tiers

PhaniRajuYN — Sat, 14 Nov 2009 04:43:00 GMT

While developing an application that spans multiple tiers , it is important that you be able to flow error information through the tiers without losing
any context or details in the tiers. With ADO.NET Data Services , we have an error contract which guarantees that all errors thrown from the Data Service ,
wrapped inside a DataServiceException , will be represented in a standard way on the wire when we send the error down to the client.

For example , consider the Query Interceptor shown below .

[QueryInterceptor("Customers")]
public Expression<Func<Customers, bool>> OnQueryCustomers()
{
        string loggedInUser = HttpContext.Current.User.Identity.Name;
        if (UserHasAccessToSet("Customers", loggedInUser))
        {
            //Filter Expression goes here
            return entity => true;
        }
        else //User does not have access to '/Customers' , throw AccessViolationException
        {
            throw new DataServiceException(403,
                "Forbidden",
                String.Format("User '{0}' cannot request data from '{1}' table", loggedInUser, "Customers"),
                "en-US");
        }
}

When the Astoria server runtime throws the above exception , the 403 value specified above gets turned into the response status code of the request
which caused this exception.

and the error message is serialized out to be in this format :

<?xml version="1.0" encoding="utf-8" standalone="yes" ?> 
<error xmlns="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata">
  <code>Forbidden</code> 
  <message xml:lang="en-US">User 'NoPermissions' cannot request data from 'Customers' table</message> 
</error>

At this point , the service has not lost any information that the service author intended to convey to a service consumer.

Now , lets consider the client library and how it handles this case.
Lets consider a query for the “Customers” set to which the currently logged-in user doesn't have permissions.

foreach (Customers customerEntity in northwindContext.CreateQuery<Customers>("Customers") ) {
 //Do something with the customerEntity here
}

In this case, running the above code would result in a DataServiceQueryException being thrown.

System.Data.Services.Client.DataServiceQueryException: 
  An error occurred while processing this request. --->        
     System.Data.Services.Client.DataServiceClientException: 
      <?xml version="1.0" encoding="utf-8" standalone="yes"?>
        <error xmlns="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata">
         <code>Forbidden</code>
         <message xml:lang="en-US">User 'NoPermissions' cannot request data from 'Customers' table</message>
      </error>

Note that the DataServiceException thrown by the server is now set to the Message property of the InnerException of the DataServiceQueryException.
We do not de-serialize the DataServiceException into an exception type on the client side.
By default , since the exception is now a string on the client side , you don’t have direct access to the information contained inside the Exception.
The information is all still there , just not easily accessible anymore. Since the error contract is documented and follows a standard pattern ,
we can easily write a visitor that de-serializes an exception object from the “Message” property of the Inner Exception.

One such de-serializer for Error contracts is shown at the bottom of this post
It contains two methods :

TryParse : which takes in an exception caused during Querying or updating via the client library and
returns a DataServiceException that was thrown by the Server
Throw : which takes in an exception caused during Querying or updating via the client library and
re-throws the DataServiceException that was thrown by the Server

Entities , How many ways do I count thee ?

PhaniRajuYN — Mon, 18 Aug 2008 02:51:30 GMT

Its a common ask that we introduce aggregating mechanisms in Data services so that one can do a Count of
the number of entities present in an EntitySet easily.
In this blog post , I will outline one method of implementing a “Count” method that works for you.

The interface to the count method will be

http://<ServiceEndPoint>/Count?entitySetName='<entitySetName>'

Server-Side

On the server-side , we will write a Service Operation that takes the name of the EntitySet as an input parameter.

[WebGet]
 public long Count(string entitySetName) {
 //Implementation goes here
 }

In your Service Operations / Interceptors , you have access to the CurrentDataSource which represents your data providers.
The entity sets are properties off of the CurrentDataSource. We will get the entityset off of the CurrentDataSource
and get the count of entities by casting it to IListSource.

[WebGet]
public long Count(string entitySetName)  {

long countOfEntities = 0;

//Get the Property off of the CurrentDataSource
PropertyInfo esProperty = this.CurrentDataSource.GetType().GetProperty(entitySetName);

//Get the EntitySet off of the CurrentDataSource
object esValue = esProperty.GetValue(this.CurrentDataSource, null);

//Cast the EntitySet to IListSource
IListSource genericESList = esValue as IListSource;

//Get the count of entities by fetching the list and getting the value of its "Count" Property
countOfEntities = genericESList.GetList().Count;

return countOfEntities;
}

Client-Side

we will make an extension method on the data service context that takes the name of the entityset and returns the count.

DataServiceContext nwContext = new DataServiceContext( new Uri("ServiceRoot") );
long countOfProducts = nwContext.Count("Products");

Extension method on the DataServiceContext to retrieve count of entities in entityset on the server .

public static long Count(this DataServiceContext context, string entitySetName) {
 //Call the ServiceOperation on the server side passing the entitySetNameas a parameter
 var results = context.Execute<long>(new Uri(String.Format("Count?entitySetName='{0}'", entitySetName),
   UriKind.RelativeOrAbsolute));
 //Get the result off of the IEnumerable
 long count = results.First<long>();
 //return the count
 return count;
}

Complete Sample Code :

Put this in your Service Code on the server .

[WebGet]
[SingleResult]
public long Count(string entitySetName) {
long countOfEntities = 0;
if (entitySetName == null) {
  throw new ArgumentNullException("entitySetName");
}
//Get the Property off of the CurrentDataSource
PropertyInfo esProperty = this.CurrentDataSource.GetType().GetProperty(entitySetName);
if (esProperty == null) {
throw new ArgumentException(String.Format("No EntitySet named {0} found on the DataSource", entitySetName));
}
try {
 //Get the EntitySet off of the CurrentDataSource
 object esValue = esProperty.GetValue(this.CurrentDataSource, null);
 //Cast the entitySet to IListSource
 IListSource genericESList = esValue as IListSource;
 //If the cast succeeded
 if (genericESList != null) {
 countOfEntities = genericESList.GetList().Count;
 }
}
catch (Exception exception) {
throw new DataServiceException("'Count' method Failed with , see InnerException -->", exception);
}
return countOfEntities;
}

Put this in your client Code .

public static class ClientExtensions {
/// <summary>
/// This Method returns the count of the number if entities present in an Entityset
/// </summary>
/// <param name="context">The DataServiceContext which contains the entities</param>
/// <param name="entitySetName">The EntitySetName whose entities should be counted</param>
/// <returns>The number of entities in the entityset</returns>
/// <example>
///  long countOfProducts = context.Count("Products");
/// </example> 
public static long Count(this DataServiceContext context, string entitySetName)
{
    //Call the ServiceOperation on the server side passing the entitySetName as a parameter
    var results = context.Execute<long>(
            new Uri(String.Format("Count?entitySetName='{0}'", entitySetName), UriKind.RelativeOrAbsolute)
            );
    //Get the result off of the IEnumerable
    long count = results.First<long>();
    //return the count
    return count;
}
}

In a future post , I will talk about how to off load the counting work to your database , if you have a relational database
as your backend.

GridViewFilterExtender : Filter GridView Rows Client-Side

PhaniRajuYN — Sat, 27 Oct 2007 14:30:38 GMT

Download Source Code and Sample application :

Excel's Filter Dialog My GridView Filter Extender

The above Screen Shots look promising , don't they ?
So, How would one go about building such a control ? Well, I have it laid out in front of you .

1) Find all unique Strings in the same column
2) Build a lookup table that stores the Unique string and the row Indices for the rows that contain the Unique String
3) Once user builds a Filter Expression and clicks on "Ok" , Filter the Rows in the Table based on the Expression.
4) For Now , the Filter Expression can only be a sequence of strings that the user wants to see in the grid.

Ex : If your grid looks like this :

The filter expression would be a comma-separated string that contains the unique strings to match in the rows.

var _currentRowFilter = "Ajax,Moo"

The lookup Table would look like this :

_lookupTable
        Select All    "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23"    
        Ajax    "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16"    
        Moo    "17,18,19,20,21,22,23"    

so , if we want to filter the rows , we would need to :

1) Hide all Rows to begin with .
HideRows : this.lookupTable["Select All"]

2) Show only those rows that are found in the lookup table against the filter Terms.
ShowRows :this.lookupTable["Ajax"]

That's about the algorithm / design for the extender to work .
Getting this working is another matter altogether.
Once you have understood this , lets start:

Find all unique Strings in the same column :

once you find all the unique strings in all subsequent rows for the same column , we will need to build the checkbox list that
will allows the user to select the filter Terms. I.e this :

This is a bit tricky , the way one would go about doing this would be :

Find out which Column the Extender is added in .Find the Cell Index of the Column , lets say _cellIndex
For all subsequent rows in the table, Lookup the innerText of the Cell with CellIndex cellIndex.

                  For Each Row
                    Read the innerText of the Cell at CellIndex cellIndex.
                    IF the string read is not yet present in the lookup Table then
                    BEGIN
                         add it to the lookup Table along with the rowIndex of the current Row
                    END
                   ELSE if string is already present in the lookupTable then

                    Begin
                       add the RowIndex to the lookupTable[string] location.
                   END IF

Once you have found all the Unique Strings , build the CheckBoxList and attach the appropriate handlers .

Once user builds a Filter Expression and clicks on "Ok" , Filter the Rows in the Table based on the Expression.

Hide All Rows .
Get all the Rows in the Table other than the header and the footer , _rowsInTable.
Get the Current Search Filter by adding all the strings that are checked in the CheckBoxList.
For each term in the Search Filter , get the appropriate row Indices ,
For each row Index in the Row Indices, _rowIndex
assign the cssClass _inFilterCssClass to the _rowsInTable[_rowIndex].

This is all neat , what if I have multiple columns in my GridView and I want to filter
each succeeding Column depending on the previous Column?

Well, I have thought about that too ..
This is what we would do :
Every FilterExtender (a) can have a Dependent Filter (b) , if filter (b) is used to filter data ( it raises the itemFiltered Event ),
then the Filter (a) has to rebuild its index to remove any index text
that was removed as a result of the filter expression on filter (b).

Important Note about the DependentFilterID

If a FilterExtender (a) has a FilterExtender (b) as its Dependent Filter ID , they both should have the matching values for the
InFilterCssClass and the NotInFilterCssClass attributes.

Set DependentFilterID

In markup

<Raj:GridViewFilterExtender  DependentFilterId="optionListPnl"

JavaScript

$find(<filterBehaviorID>).set_dependentFilterId(<dependentFilterId>)

Attributes :

Name	Description
TargetControlID	ID of the control upon clicking on which , the Filter is shown
OkButtonId	ID of the control upon clicking on which , the FilterExpression is applied and the filter is hidden
CancelButtonId	ID of the control upon clicking on which , the FilterExpression is NOT applied and the filter is hidden
EnableSelectAll	If the filter contains an option to "Select All" Rows
InFilterCssClass	The CssClass applied to all rows which are available from the Filter Expression.
NotInFilterCssClass	The CssClass applied to all rows which are NOT available from the Filter Expression.
FilterPanelID	The Panel Control which contains the Filter

Events :

Name	Description
itemSelected	When any filter Expression is Selected
itemFiltered	When the filter Expression is applied.
onOk	when the Control Referenced by OkButtonId is clicked
onCancel	when the Control Referenced by CancelButtonId is clicked

Subscribing to the Events :

a) Markup :

<Raj:OptionPickerBehavior runat="server" ID="optionListPnl" TargetControlID="btnToggle"
         blah blah blah
         OnOkScript="okClickHandler"
         OnCancelScript ="cancelClickHandler"
         OnClientItemFiltered ="itemFilteredHandler"
         OnClientItemSelected ="itemSelectedHandler">
</Raj:OptionPickerBehavior>

<script language="javascript" type="text/javascript">
            function itemSelectedHandler(element,args)  {
                Sys.Debug.trace( args.get_text() + "   " + args.get_isChecked());
            }
            function itemFilteredHandler(element,args)  {
                Sys.Debug.trace( args.get_item() + "   " + args.get_filterText());
            }
            function okClickHandler(element,args)  {
                Sys.Debug.trace( "Ok Button was clicked" );
            }
             function cancelClickHandler(element,args)  {
                Sys.Debug.trace( "Cancel Button was clicked");
            }
            function traceCall(msg) {
                $get("traceDiv").appendChild(document.createTextNode(msg)); 
            }
 </script>

b) Script

$find("BehaviorId").add_onOk( okClickHandler );

$find("BehaviorId").add_onCancel( cancelClickHandler );

$find("BehaviorId").add_itemFiltered( itemFilteredHandler );

$find("BehaviorId").add_itemSelected( itemSelectedHandler );

That's it for now ! Do give feedback on the control if you get a chance to use it / look at it .

How to : Perform Operations on all instances of a Ajax Control Extender on a page

PhaniRajuYN — Wed, 20 Jun 2007 17:12:14 GMT

Consider a scenario wherein you have a lot of control Extenders on a page and you want to conduct operations on all instances

Specific Extender or specific instances of an extender.

We all know that we can reference certain instances of an Extender by using its BehaviorID and the $find function.

Now , consider an implementation where you want to Collapse/Expand all Collapsible Panels present on a Page.

You don't know how many CollapsiblePanels will be present on the page and what their IDs will be .

Solution

The ASP.NET Ajax Framework has a couple of really useful functions which will help us here.

You can get all instances of all behaviors present on the page using the Sys.Application.getComponents() method.

There , it's that simple !!

How do you use this to find all instances of a Specific Control Extender on a page ?

Ans : You can find out the "Type" of any given Behavior by using any of the following code Snippets.

1) Using the Object.getType() Method.

EX:

Given that your behavior Instance is : controlYourSelf of type : HoverMenu

Object.getType( controlYourSelf ).getName()

will give you the name of the AjaxControlToolkit behavior .

Ex output is :  AjaxControlToolkit.HoverMenuBehavior and so on and so forth.

2) Using the get_name() method on the Behavior Instance.

Your Behavior Name will not be qualified with AjaxControlToolkit.

so , if you call get_name() on controlYourSelf Behavior .

controlYourSelf.get_name() will give you : HoverMenuBehavior

usage :

<BehaviorInstance>.get_name()

Consider the Following Example which shows you how to Collapse all the Collapsible Panels present on a page:

The Algorithm would be:

Find all instances of the CollapsiblePanel Behavior on the page.
On each of them ,
Check if the Panel is Collapsed by calling the get_Collapsed() function.
If not collapsed , call the collapsePanel Function to collapse the Panel.

The Code would be :

//Function To Collapse all CollapsiblePanels on a page , if not already collapsed.
function collapseAllCollapsiblePanels() {
    var currentBehavior = null;
   //1) Find all instances of the CollapsiblePanel Behavior on the page.
    //Get all the Behaviors Present in the Page
    var allBehaviors = Sys.Application.getComponents() ;
    //Loop Through them
    for( var loopIndex = 0 ; loopIndex < allBehaviors.length; loopIndex++ ) {
        currentBehavior = allBehaviors[loopIndex];
    //For each behavior , check the Behavior Name 
        if( currentBehavior.get_name() === "CollapsiblePanelBehavior" ) {
      //If its of type CollapsiblePanelBehavior
        //3) Check if the Panel is Collapsed by calling the get_Collapsed() function.
            if( !currentBehavior.get_Collapsed() ) {
            //4) If not collapsed , call the collapsePanel Function to collapse the Panel.
                currentBehavior.collapsePanel();
            }
        }
    }
}

You can use this approach in your applications  for any myriad number of reasons .

Hope this helps Someone out there.

HowTo : Change Visible Tab Using JavaScript in the MS AJAX TabControl

PhaniRajuYN — Tue, 17 Apr 2007 01:20:14 GMT

I have seen this in the forums a lot ..

"How do I change the Visible Tab in the MS AJAX TabControl on the Client-Side using Javascript ?"

Well, I have posted it several times and I think Its time I'd rather point people to a link than write the same piece again and again :-).

So, here you go .....

1) Consider that you have a TabControl on your page by the name of "MyTabs" .

<ajaxToolKit:TabContainer ID="MyTabs" runat="server">
//blah blah blah
</ajaxToolKit:TabContainer>

2) You can access the Methods exposed by the TabControl by accessing its  behavior.

   The Behavior is not accessible easily .

   The  TabControl has a property called as "control" that provides a way to access the Client-Side Methods of the

   TabControl.

   EX: var tabBehavior = $get('<%=MyTabs.ClientID%>').control;

3) once you have a handle to the Tabbehavior , you can use the "set_activeTab" method to set the Active Tab of the TabControl.

   EX:tabBehavior.set_activeTabIndex(1);

4)  You are Done !!

Complete  Code for the ChangeTab Function :

<script language="javascript"> 

function changeTab( tabIndex ){ 
var tabBehavior = $get('<%=MyTabs.ClientID%>').control; 
tabBehavior.set_activeTabIndex(tabIndex); 
}

</script>

The Complete Example is posted below :

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Select Tabs By Script</title>
</head>
<body>
    <form id="frmAccessAccordion" runat="server">

        <script language="javascript">
        function changeTab(){ 
        //Get The Index of the Current Selected Index in the DropDownList
        var tabIndex = parseInt( $get('<%=dlTabindex.ClientID%>').value );
        //Get a Handle to the Tab Behavior 
        var tabBehavior = $get('<%=MyTabs.ClientID%>').control; 
        //Set the Currently Visible Tab 
        tabBehavior.set_activeTabIndex(tabIndex); 
        }
        </script>
        Select Tab To Show :
        <asp:DropDownList runat="server" ID="dlTabindex">
            <asp:ListItem Text="One" Value="0"></asp:ListItem>
            <asp:ListItem Text="Two" Value="1"></asp:ListItem>
            <asp:ListItem Text="Three" Value="2"></asp:ListItem>
        </asp:DropDownList>
        <asp:Button ID="btnDynamicAnimate" runat="server" Text="Button" OnClientClick="changeTab();return false;" />
        <asp:ScriptManager runat="server" ID="scrpManager" EnablePartialRendering="true">
        </asp:ScriptManager>
        <ajaxToolKit:TabContainer ID="MyTabs" runat="server">
            <ajaxToolKit:TabPanel runat="server" ID="tabOne">
                <HeaderTemplate>
                    One
                </HeaderTemplate>
                <ContentTemplate>
                    Tab One
                </ContentTemplate>
            </ajaxToolKit:TabPanel>
            <ajaxToolKit:TabPanel runat="server" ID="tabTwo">
                <HeaderTemplate>
                    Two
                </HeaderTemplate>
                <ContentTemplate>
                    Tab Two
                    <asp:Button runat="server" ID="btnServer" Text="Submit" />
                </ContentTemplate>
            </ajaxToolKit:TabPanel>
            <ajaxToolKit:TabPanel runat="server" ID="tabThree">
                <HeaderTemplate>
                    Three
                </HeaderTemplate>
                <ContentTemplate>
                    Tab Three
                    <asp:Button runat="server" ID="Button1" Text="Submit" />
                </ContentTemplate>
            </ajaxToolKit:TabPanel>
        </ajaxToolKit:TabContainer>
    </form>
</body>
</html>

Sys.Preview.Timer Control - A Client Side Timer

PhaniRajuYN — Thu, 15 Mar 2007 10:17:00 GMT

We have quite often come across scenarios where-in we need to execute certain client-Side code at certain intervals .

What we often ended up doing is to use the window.setTimeOut() and the window.setInterval functions of IE to execute an expression

at certain intervals of time .

The Sys.Preview.Timer Provides an abstraction over these functions and makes it easier to define Functions to be Executed at certain

Time Intervals.

You need to include the Script file "PreviewScript.js" to have access to the Timer Control .

<script src="Scripts/PreviewScript.js" type="text/javascript"></script>

Instantiating the Timer control :

var clientSideTimer = new Sys.Preview.Timer();

By default , once instatiated , the Timer is disabled .

Enable The Timer

clientSideTimer.set_enabled( true );

Set the Interval for the timer :

The Interval is measured in milliseconds

clientSideTimer.set_interval( 1000 );

Add a function to be called at the interval

You add the function to be called at the interval by running

clientSideTimer.add_tick( OnTimerTick );

The Parameter "OnTimerTick" is a function that is executed at the Interval specified.

You can add multiple Functions to be callled at the interval.

The functions are executed at the interval in the same order that they are added using add_tick.

Stop the Timer

Disable the Timer to stop the  Timer Entirely.

clientSideTimer.set_enabled( false );

Alternatively , you can stop certain functions being called by calling the "remove_tick" Method on the Timer.

clientSideTimer.remove_tick( OnTimerTick );

Check out the  Sample attached to get a view of how the control works and how you can use it .

Whats Missing :

The main pain point I see in using the Timer Control is that I cannot pass a context to the Functions called at the "Tick" event.

The reason this happens is because ..

The Function that returns the callback to the "Tick" event passes "Sys.EventArgs.Empty"  to the callback.

You can customize the Script to enable the functionality of passing a context to the Timer Callback.

We will discuss that in a future post .

Customizing the Alert Messages in IE

PhaniRajuYN — Sat, 03 Mar 2007 11:53:54 GMT

Have you ever felt that this looks ugly ?

Did you ever want to customize the Image , the text, the Icons ?

You would probably want to customize it to the Look and feel of your web application.

We are gonna talk about how to customize the Alert Box in IE .

When we are done , it will look like this .

We can change the Default ALERT function with Javascript .

window.alert=function( alertMessage ){
//Function Body
}

Thats it!!! Thats the Magic line!

With this function , you can customize the way the alert messages are shown.

I will demonstrate one way to render the custom Alert  message.

We will put a DIV in the Page that will show the alert message .

<div id="alertPanel">
</div>

We will form the body by forming a string containing the representational HTML .

    <DIV> //To Contain the Alert Message

       <IMG> //The icon of the message prompt

             <SPAN> //This element contains the text to be shown

             <INPUT TYPE="BUTTON"/> //The Button to close the alert message

    </DIV>

Actual Code showing the same

var alertBox = "<DIV style=\"width:350px;height:70px\" class=\"alertPosition\">";
            alertBox +="<div class=\"alertBoxIn\" >";
                     alertBox  +="<img src=\"images/InfoBox-48x48.png\" style=\"position: relative; top: 1%; left: 2%\" /></td>";
                     alertBox +="<SPAN style=\"position: relative; top:-30%; left: 12%\">"+alertMessage+"</SPAN>";
                     alertBox  +="<input style=\"position: relative; top:20%; left:10%\" type=\"button\" value=\"    Ok      \" onclick=\"closeAlert();\" />";
            alertBox+="</div>";
    alertBox+="</div>";

Once the Body of the Alert message is formed , we need to add it to the document.

we will do this by injecting the body of the Alert Message into the alertPanel Div that we already have on the page .

document.getElementById("alertPanel").innerHTML = alertBox;

Upon click of the Button , you would want to close the alert message .

We close the Alert message by removing it from the document .

document.getElementById("alertPanel").innerHTML =   "" ;

The Completed Function looks like this ......

window.alert=function( alertMessage )
{
    var alertBox = "";
            alertBox +="<div style=\"width:350px;height:70px\" class=\"alertBoxIn alertPosition\" >";
                     alertBox  +="<img src=\"images/InfoBox-48x48.png\" style=\"position: relative; top: 1%; left: 2%\" /></td>";
                     alertBox +="<SPAN style=\"position: relative; top:-30%; left: 12%\">"+alertMessage+"</SPAN>";
                     alertBox  +="<input style=\"position: relative; top:20%; left:10%\" type=\"button\" value=\"    Ok      \" onclick=\"closeAlert();\" />";
            alertBox+="</div>";
    document.getElementById("alertPanel").innerHTML = alertBox;
    document.getElementById("alertPanel").focus();
 }

Bonus:

Creating your own alert prompt message

I changed the icon to make it look like an error message .

See here.....

The javascript for this custom error function is :

function ErorMessage( errorMessage )
{
 
  var alertBox = "<DIV style=\"width:350px;height:70px\" class=\"alertPosition\">";
            alertBox +="<div class=\"alertBoxIn\" >";
                     alertBox  +="<img src=\"images/ErrorCircle-48x48.png\" style=\"position: relative; top: 1%; left: 2%\" /></td>";
                     alertBox +="<SPAN style=\"position: relative; top:-30%; left: 12%\">"+errorMessage+"</SPAN>";
                     alertBox  +="<input style=\"position: relative; top:20%; left:10%\" type=\"button\" value=\"    Ok      \" onclick=\"closeAlert();\" />";
            alertBox+="</div>";
    alertBox+="</div>";
    document.getElementById("alertPanel").innerHTML = alertBox;
}

Once this function is implemented, you can use the alert in your functions normally , be sure to include the script and the div "alertPanel".

The Complete code looks like this ......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>AJAX Client Side Documentation</title>
    <link href="css/defaultStyles.css" rel="stylesheet" type="text/css">

    <script language="javascript">
        window.alert=function( alertMessage )
            {
                var alertBox = "";
                        alertBox +="<div style=\"width:350px;height:70px\" class=\"alertBoxIn alertPosition\" >";
                                 alertBox  +="<img src=\"n\" style=\"position: relative; top: 1%; left: 2%\" /></td>";
                                 alertBox +="<SPAN style=\"position: relative; top:-30%; left: 12%\">"+alertMessage+"</SPAN>";
                                 alertBox  +="<input style=\"position: relative; top:20%; left:10%\" type=\"button\" value=\"    Ok      \" onclick=\"closeAlert();\" />";
                        alertBox+="</div>";
                document.getElementById("alertPanel").innerHTML = alertBox;
                document.getElementById("alertPanel").focus();
             }
             
            function ErorMessage( errorMessage )
            {
             
              var alertBox = "<DIV style=\"width:350px;height:70px\" class=\"alertPosition\">";
                        alertBox +="<div class=\"alertBoxIn\" >";
                                 alertBox  +="<img src=\"images/ErrorCircle-48x48.png\" style=\"position: relative; top: 1%; left: 2%\" /></td>";
                                 alertBox +="<SPAN style=\"position: relative; top:-30%; left: 12%\">"+errorMessage+"</SPAN>";
                                 alertBox  +="<input style=\"position: relative; top:20%; left:10%\" type=\"button\" value=\"    Ok      \" onclick=\"closeAlert();\" />";
                        alertBox+="</div>";
                alertBox+="</div>";
                document.getElementById("alertPanel").innerHTML = alertBox;
            }

            function closeAlert()
            {
                var alertBox =  document.getElementById("alertPanel");
                alertBox.innerHTML ="";
            }

    </script>

</head>
<body>
    <input type="button" value="Alert Popup" onclick="javascript:alert('This is a custom alert message')" />
    <input type="button" value="Error Popup" onclick="javascript:ErorMessage('This is a custom Error message')" />
    <div id="alertPanel">
    </div>
</body>
</html>

PROPS:

The Images I use in the demo come from here ...http://www.iconarchive.com/category/application/vista-elements-icons-by-icons-land.html

The Icons rock !!! If interested , give the author a visit at : http://www.icons-land.com/.  I strongly suggest you check them out .

Change ServiceMethods and Web Service for the AutoCompleteExtender From Client Side

PhaniRajuYN — Fri, 16 Feb 2007 07:25:00 GMT

This is quite a common requirement and guess the Docs are not really clear as to how you can achieve this .

Lemme see how I can help

You want to change the Webmethod that the AutoComplete Extender Talks to from the Client Side.
You want to change the WebService that the AutoComplete Extender Talks to from the Client Side.

You can achieve this easily using the Functions Provided by the Extenders on the Client Side.

Follow these Simple Steps.

1) Assign a BehaviourID to the AutoCompleteExtender.

<cc1:AutoCompleteExtender 
               ID="AutoCompleteImagesExtender1" runat="server" TargetControlID="myTextBox"
                ServicePath="AutoComplete.asmx" ServiceMethod="GetCompletionList" MinimumPrefixLength="2"
                CompletionInterval="1000" EnableCaching="true" 
                CompletionListElementID="divCompletionImages"
                CompletionSetCount="12" 
                BehaviorID="autoCompleteExtender">
</cc1:AutoCompleteExtender>

2) You can change the Web Service that the AutoCompleteExtender Talks to by using the Following JavaScript.

function ChangeServicePath(){
        var autoComplete = $find("autoCompleteExtender");
        autoComplete.set_servicePath( <NewServicePath>);
        }

As you can see the $find  method is called on the behaviourID of the AutoCompleteExtender.

The "set_servicePath" method allows you to Set the path to the Web Service that the Extender talks to .

3) You can change the Web Service that the AutoCompleteExtender Talks to by using the Following JavaScript.

function ChangeServiceMethod(){
        var autoComplete = $find("autoCompleteExtender");
        autoComplete.set_serviceMethod( <NewServiceMethodName>);
        }

The "set_serviceMethod" method allows you to Set the path to the Web Service that the Extender talks to .

Hope this Helps

Implementing Image Zoom using MS Ajax Slider Control

PhaniRajuYN — Wed, 14 Feb 2007 08:43:00 GMT

The MS Ajax Control Toolkit provides a lot of cool controls that we can use to implement nifty effects in our applications.

One of the controls we are gonna play with today is the Ajax Slider Control.

The Slider Control Provides a way for the user to measure arbitrary values and set them using a cool Slider.

The Slider control provides the value of the current Slide and lets you do stuff with it .

Some of the *stuff* we will try today is to implement a Zoom feature for images .

The Slider control binds to an asp:textbox or an asp:label to show the current value of the Slide.

It would be great if you could associate the control with arbitrary HTML Elements and associate the slide with their properties.

You can do that by changing the Code of the Slider Control by downloading the code from the CodePlex Website.

Today , I will not go into how you can change the control , we will talk about using the Base control to modify the Height and width of an image control

so that it looks like we are zooming into and out of an image using the Slider.

See Demo Here

Video: Implementing Image Zoom using MS Ajax Slider Control

So,lets stop talking and start coding .

1) we will need 2 sliders , one for height , one for width .

<!-- The Slider to modify the height -->

<ajaxToolkit:SliderExtender ID="heightSlider" runat="server" BehaviorID="Slider2"
 TargetControlID="Slider2" BoundControlID="Slider2_BoundControl" Orientation="Vertical"
EnableHandleAnimation="true" Minimum="10" />

<!-- The Slider to modify the width-->
<ajaxToolkit:SliderExtender ID="widthSlider" runat="server" BehaviorID="Slider3"
TargetControlID="Slider3" BoundControlID="Slider3_BoundControl" Orientation="Horizontal"
EnableHandleAnimation="true" Minimum="10" />

2) The TargetControlID refers to the textbox which will receive the changed value from the  Slider.

 Slider2 --> Height Changed Value

 Slider3 --> Width  Changed Value

3) Hook the onValueChanged event of the Slider Control behaviour to these functions in the ASPX Page.

<script language ="javascript">

   function pageLoad(sender,e)
   {
       var sliderbehaviour = $find('Slider3');
       sliderbehaviour.add_valueChanged(ZoomControlWidth);
       sliderbehaviour = $find('Slider2');
       sliderbehaviour.add_valueChanged(ZoomControlHeight);
       sliderbehaviour = null;
   }
           
</script>

 4) The Image control is specified as a parameter to the  "ZoomControlHeight" and the "ZoomControlWidth" Javascript functions  .

 5) The javascript functions are as shown below.

/********Global variables to specify the Scaling Height and Width**********/
var HundredPercentHeight = 800;
var HundredPercentWidth  = 800;
var controlID ="imgZoomTarget";

//Function to Modify Height according to Slider Value
function ZoomControlHeight(eventArgs)
{
    var currentlyZoomingControl =$get(controlID);
    
    //Calculate the new height 
    var newHeight  = HundredPercentHeight * (  parseInt( eventArgs.get_Value() ) / 100 ) ;
    //Assign the New Height
    currentlyZoomingControl.style.height = parseInt(newHeight) +"px";
    //Let go of the Control Reference
    currentlyZoomingControl = null;
    
}

//Function to Modify Width according to Slider Value
function ZoomControlWidth(eventArgs)
{
    var currentlyZoomingControl =$get(controlID);
    //Calculate the new width
    if( eventArgs.get_Value() == null)
    return;
    var newWidth   = HundredPercentWidth  * ( parseInt( eventArgs.get_Value() ) / 100 ) ;
    //Assign the New Width
    currentlyZoomingControl.style.width  =  parseInt(newWidth) +"px";
    //Let go of the Control Reference
    currentlyZoomingControl = null;
}

6) The <Img> tag that will be modified by the slider, is ...

<img id="imgZoomTarget" src="thumbNails/001_by_Frnak.jpg"

         style="position: absolute;top: 10px; left: 220px; height: 100px; width: 100px" />

7)

7) This is how the page looks after we are done

Customizing the MS Ajax AutoCompleteExtender To Render Images Instead Of Text

PhaniRajuYN — Sat, 10 Feb 2007 13:13:49 GMT

We all know about the AutoComplete Extender from MS AJAX.

It looks like this .....

I want to customize the Auto Complete behaviour to render images on the client side rather than the text nodes .

My Server Side WebService returns an array of image URLs. I want to change the way the Results are rendered.

This is how I want it to look.

I know that its pretty easy to achieve the effect using the client side proxy generated for a webservice.

But, I need to leverage the advantages of the AJAX AutoComplete control such as

Client Side Caching of Web Service Results
Fully customisable with regard to specifying when and how the server side method call is made .

So, we download the Source code of the AutoComplete Extender and start our process of hacking through it to achieve what we want.

You can download the Source of the AjaxControlToolkit from Here

Once we downloaded , we take a look at the function that renders the Search Results.

The Function inside the AutoComplete Extender that renders the search results is in Javascript.

The File you gotta go to is AutoCompleteBehavior.js.

_update: function(prefixText, completionItems, cacheResults) {
        if (cacheResults && this.get_enableCaching()) {
            if (!this._cache) {
                this._cache = {};
            }
            this._cache[prefixText] = completionItems;
        }

        this._completionListElement.innerHTML = '';
        this._selectIndex = -1;
        if (completionItems && completionItems.length) {
            for (var i = 0; i < completionItems.length; i++) {
                var itemElement = document.createElement('div');
                itemElement.appendChild(document.createTextNode(completionItems[i]));
                itemElement.__item = '';
                
                var itemElementStyle = itemElement.style;
                itemElementStyle.padding = '1px';
                itemElementStyle.textAlign = 'left';
                itemElementStyle.textOverflow = 'ellipsis';
                itemElementStyle.backgroundColor = this._textBackground;
                itemElementStyle.color = this._textColor;
                
                this._completionListElement.appendChild(itemElement);
            }
            var elementBounds = CommonToolkitScripts.getBounds(this.get_element());        
            this._completionListElement.style.width = Math.max(1, elementBounds.width - 2) + 'px';
            this._popupBehavior.show();
        }
        else {
            this._popupBehavior.hide();
        }
    }

</Function>

The Lines of the function that Renders the Search Results is marked in this color.

Lets study these lines

var itemElement = document.createElement('div');
    itemElement.appendChild(document.createTextNode(completionItems[i]));
    itemElement.__item = '';

These lines of code create a "DIV" for each search result from the Web service.

We will change it to be ...

var itemElement = document.createElement('img');
itemElement.src =  completionItems[i];

This would be enough to render images instead of Text .

Next, onClick of the image thumbnail , we want to assign the image url to another full image on the page.

The function  called when the image is clicked is

 _onListMouseDown: function(ev) {
        if (ev.target !== this._completionListElement) {
            this._setText(ev.target.firstChild.nodeValue);
        }
    },

We will change this to be :

 _onListMouseDown: function(ev) {
        $get("imgFullBlown").src = event.srcElement.src;
        },

imgFullBlown is gonna be an <IMG> tag on the page that hosts the control .

As you can see, the src of the image that is clicked is assigned to the src of the "imgFullBlown" tag.

The Effects are as shown below .

There you go , build the Project and change the default behaviour or build your own control by extending the AutoCompleteExtender.

You are  only limited by your imagination.

Everyone has access to the source of some of our best controls.

Extending the PhotoGrid to allow Xml DataBinding using JavaScript Enumerations

PhaniRajuYN — Sat, 03 Feb 2007 23:04:06 GMT

If you remember one of my previous posts about the PhotoGrid Control , we talked about the control binding to JSON data .

Today , we talk about using Enumerations in Javascript to allow the PhotoGrid to bind to multiple Data Source Types.

Well, lets get going then....

Constructing the Enumeration

/**** Enumeration to specify the Data Source Type**********/

1) The Constructor for the Enumeration

AtlasDemo.DataSourceType = function(){};

2) Define the different Types of data that can be bound using the Prototype Model .

AtlasDemo.DataSourceType.prototype =
{
    JSON : 0,
    XMLString : 1
}

3) Register the Enumeration using the "registerEnum" function of the ASP.net AJAX framework.

AtlasDemo.DataSourceType.registerEnum("AtlasDemo.DataSourceType");

Modify the  BindGrid Function to accept the type of dataBinding to be performed.

BindGrid : function(dataSourceType)

Using the Enumeration from the client application

as a parameter to the  function  BindGrid ,

function CreateGrid( JSONDataToBeBound )
{
  //Create an instance of the PhotoGrid Control
  var gridElement = new AtlasDemo.PhotoGrid( leftPosition , topPosition,"",0,"tblThumbnails",horizontalOffset,VerticalOffset) ;
  //Set the Data for the PhotoGrid Control
  gridElement.setData(JSONDataToBeBound); 
  //Set the Number of images to be shown in one Page
  gridElement.setPageSize( pageSize );
  //Bind the Grid
  gridElement.BindGrid( AtlasDemo.DataSourceType.JSON  );
  
}

The Xml Data Format Supported by the PhotoGrid Component

<ResultSet totalResultsAvailable="2" totalResultsReturned="2" firstResultPosition="0">
        <Results>
            <Result Title="just-a-little-bit_1024.jpg" Summary="Website: Deviant Art Homepage Download: 1024x768" Url="http:\/\/www.pixelgirlpresents.com\/images\/desktops\/elyse\/just-a-little-bit_1024.jpg"></Result>
            <Result Title="just-a-little-bit_1024.jpg" Summary="Website: Deviant Art Homepage Download: 1024x768" Url="http:\/\/www.pixelgirlpresents.com\/images\/desktops\/elyse\/just-a-little-bit_1024.jpg"></Result>
        </Results>
</ResultSet>

Calling the BindGrid Function With XMl Data

1) Create and append the XML String to  a stringBuilder Object

   var sBuilder = new Sys.StringBuilder("");
    sBuilder.append("<ResultSet totalResultsAvailable=\"2\" totalResultsReturned=\"2\" firstResultPosition=\"0\">");
        sBuilder.append("<Results>");
            sBuilder.append("<Result Title=\"just-a-little-bit_1024.jpg\" Summary=\"Website: Deviant Art Homepage Download: 1024x768\" Url=\"http:\/\/www.pixelgirlpresents.com\/images\/desktops\/elyse\/just-a-little-bit_1024.jpg\"></Result>");
            sBuilder.append("<Result Title=\"just-a-little-bit_1024.jpg\" Summary=\"Website: Deviant Art Homepage Download: 1024x768\" Url=\"http:\/\/www.pixelgirlpresents.com\/images\/desktops\/elyse\/just-a-little-bit_1024.jpg\"></Result>");

        sBuilder.append("</Results>");
    sBuilder.append("</ResultSet>");

2) Set the Data to be rendered by the PhotoGrid Control

PhotoGridGlobalInstance.setData( sBuilder.toString() );

3) Set the DataSource Type to be XML while Binding ..

gridElement.BindGrid( AtlasDemo.DataSourceType.XMLString  );

You are done .. Simple , neat and easy ...

Using the Prototype Model with Microsoft AJAX

PhaniRajuYN — Thu, 01 Feb 2007 21:18:00 GMT

Microsoft Ajax allows you to extend your javaScript Programming framework so that you can emulate OOP practices with Javascript .

A SImple Example is Here

The following is a list of stuff you can Use in javascript with Microsoft Ajax Extensions to javascript

Classes
Namespaces
Inheritance
Interfaces
Enumerations
Reflection

Sounds Neat , doesnt it ?

Well, lets get started ...

We will build a Re-usable Photo Grid Component that you can use in your applications .

PhotoGrid : It will show a grid of thumbnails with Animations associated with Click of each thumbNail.

On Click of the ThumbNail , the ThumbNail will move to a specific location and Resize itself .

The PhotoGird will have the Following Features.

Ability Bind Data in JSON Format
Paging Functionality in Numbers and "Next" and "Prev" Links
Jump to a specific page
Support for Placing the Controls at Specified X and Y Locations
Support for Customising the Horizontal and Vertical Offset between thumbnails
Support for specifying the Number of images in each page.

It will be written as a Client Side Java Script Re-usable Component

Th JSON Data format will be like this

{
"ResultSet":{"totalResultsAvailable":"50014","totalResultsReturned":7,"firstResultPosition":1,
"Result" :
    [
     {
        "Title":"The-Incredibles-Poster-C10219976.jpeg",
        "Summary":"",
        "Url":"http://a1259.g.akamai.net/f/1259/5586/1d/images.art.com/images/-/The-Incredibles-Poster-C10219976.jpeg"

     }
     {
        "Title":"The-Incredibles-Poster-C10219976.jpeg",
        "Summary":"",
        "Url":"http://a1259.g.akamai.net/f/1259/5586/1d/images.art.com/images/-/The-Incredibles-Poster-C10219976.jpeg"

     }
    ]
}

The PhotoGrid Component will convert the Data into something that looks like this

On Clicking of a thumbnail  , it will resize itself automatically , then it will look like this

Now that I  have , hopefully, raised your curiosity . lets build this..

Creating the PhotoGrid Component using Microsoft AJAX Exntensions

1.Register the NameSpace

Type.registerNamespace("AtlasDemo");

2.Declare the Constructor for your class.

AtlasDemo.PhotoGrid = function ( leftPosition , topPosition ,parentControlId ,animatorGlobalIndex ,tableID, horizontalOffset,VerticalOffset ){ 
this._jsonString        = "";
this._gridData          ;
this._pageIndex         = 0;
this._firstImageIndex   = 0;
this._leftPosition      = leftPosition;
this._topPosition       = topPosition;
this._parentControlId   = parentControlId;
this._thumbNailTableId  = tableID;
this._horizontalOffset  = horizontalOffset;
this._loopIndex         = 0 ;
this._verticalOffset    = VerticalOffset;
this._pageSize          =7;
this._startIndex        =0;
this._initialStart      =0;

}

2. Define the functions of the PhotoGrid using the Prototype model .

Syntax:

AtlasDemo.PhotoGrid.prototype = {
  <functionName1>:function([arguments])
  {
    <FunctionBody>
  }
  ,
  <functionName2>:function([arguments])
  {
     <FunctionBody>
  }
}

The Code inside the JS function is specified in this  format , pretty neat  and organised

Actual Function Definitions:

Function Name    : pagesAvailable

Function Purpose : To Return the Number of Pages Available For Paging

Return Value     : JSON Object with the total Number of Pages, Pages available in the Forward Direction and Backward Direction

Input Parameters : None

Function Code:

pagesAvailable:function()
    {
        var totalPages    = parseInt(this._gridData.ResultSet.totalResultsReturned)/parseInt(this._pageSize);
        var pagesForward  = parseInt(totalPages) - ( parseInt(this._pageIndex) +1 ) ;
        var pagesBackWard = parseInt( totalPages - pagesForward ); 
        var jsonStringData = "{\"pagesData\":{\"totalPages\":\""+totalPages+"\",\"pagesForward\":\""+pagesForward+"\",\"pagesBackWard\":\""+pagesBackWard+"\"}}"
        return ( eval( '(' + jsonStringData + ')' ) );
    }

The following are functions inside the Prototype function Declaration, the code is omitted for the purpose of clarity.

    setPageSize:function(pageSize)
    {
        <Function Body>
    },
    setData:function(jsonString)
    {
        <Function Body>
    },
    resetPositions:function( leftPosition , topPosition , animatorGlobalIndex  )
    {
        <Function Body>
    },
    resetAll:function ( jsonString ,leftPosition , topPosition ,parentControlId ,animatorGlobalIndex ,tableID, horizontalOffset,VerticalOffset ){ 
        <Function Body>
    },
    clearResults : function( leftPosition , topPosition , horizontalOffset,VerticalOffset )
    {
        <Function Body>
        
    },
    
    ShowPager:function(shouldIShowThePager,pagerControlHolder,pagingFunctionName)
    {
        <Function Body>
    },
    PageForward:function()
    {
    
        <Function Body>
    },
    __pagingFunction:function()
    {
       <Function Body> 
    },
    CurrentPageIndex : function()
    {
        <Function Body>
    },
    PageBackward : function()
    {
        <Function Body>
    },
    AnimateElement:function( imgElement )
    {
        <Function Body>
                        
    },
    CreateNewPhotoCell:function( searchResultItem )
    {
        <Function Body>
    }, 
    BindGrid : function()
    {
         <Function Body>
    }

3. Once you have declared the functions supported by the PhotoGrid Class, lets Go ahead and register the class.

AtlasDemo.PhotoGrid.registerClass('AtlasDemo.PhotoGrid', null, Sys.IDisposable);

You can read all about the registerClass Here.

You are now done!

Lets go ahead and see how to use this component in our code.

ASPX Code:

1. Add the Mandatory Script Manager Control.

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

2. Include a reference to your script File in the <BODY> of the ASPX Page

<script type="text/javascript" src="ClientScripts/PhotoGrid.js"></script>

3. The Parent Control that will hold the ThumbNails

 <div id="divActualSize" style="left: 10px; overflow: auto; width: 90%; position: absolute;
            top: 18%; height: 650px" class="grey">
            <table id="tblThumbnails">
                <tbody>
                </tbody>
            </table>
 </div>

4. The Client Functions to the PhotoGrid Component

function CreateGrid( JSONDataToBeBound )
{
  //Create an instance of the PhotoGrid Control
  var gridElement = new AtlasDemo.PhotoGrid( leftPosition , topPosition,"",0,"tblThumbnails",horizontalOffset,VerticalOffset) ;
  //Set the Data for the PhotoGrid Control
  gridElement.setData(JSONDataToBeBound); 
  //Set the Number of images to be shown in one Page
  gridElement.setPageSize( pageSize );
  //Bind the Grid
  gridElement.BindGrid( );
  
}

we are done !

I have made a sample application that uses this control and shows off all the features possible .

Please let me know if this control is of any use to you .

 If yes, then how ?

 If No , then which features / options would make it useful ?

You can download the Sample Application here.