Guidelines on developing WPF and Silverlight Applications

Microsoft has recently released the guidelines for developing composite WPF and Silverlight applications. The guidelines are supported with sample source code and documentation. The Composite Application Guidance for WPF and Silverlight is designed to help you more easily build enterprise-level Windows Presentation Foundation (WPF) and Silverlight client applications. It will help you design loosely coupled, independently evolvable pieces that work together in the overall application.

The guidance includes a reference implementation, reusable library code (named the Composite Application Library), documentation, QuickStart tutorials, and hands-on labs.

You can download the guidelines here.

How to use <asp:chart> Chart Control in ASP.NET

Microsoft has released the Free Chart Controls (which are based on the Dundas Chart Controls). Chart and graphs play an important role when modeling and analyzing the data. These chart controls provide rich user experience with a wide variety of advance functionality such as drill down charts, Click events on charts and it's components etc. Another best thing is it works fine with ASP.NET MVC. You can find the screen shots of these rich controls below:





Download links for the ASP.NET Charts:

* Download the Free Microsoft Chart Controls
* Download the VS 2008 Tool Support for the Chart Controls
* Download the Microsoft Chart Controls Samples
* Download the Microsoft Chart Controls Documentation

Steps to make it work:
Edit the Web.Config
To enable the controls you have to edit the web.config file.
Add this under the controls tag (path: "<system.web><pages><controls>") :

<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting"
assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"/> 

And add this httpHandler (under "<httphandlers>") :

<add path="ChartImg.axd" verb="GET,HEAD"
type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler,
System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" validate="false"/>

You are set to Go!!!
Hope this helps you!

Ajax "Processing" modal window with CSS

Ajax which means Asynchronous JavaScript And XML is a technology in which you can refresh the web page without having the flickering effect. Thus it gives a rich user experience. Now, when implementing Ajax in our web application we always thing of using some dazzy logo/animation which will indicate the user that some processing is happening in the background. At the same time we want to prevent the user from clicking other links/buttons on the web page. Here is some thing that we want to achieve:

Ajax Processing Panel

We generally have multiple web pages in our web application. In each of those pages we use the UpdatePanel control of asp.net to enable Ajax processing. The display of such a processing panel can be achieved using the UpdateProgress control of asp.net. The aspx code will look as shown below:

<asp:UpdatePanel ID="updateGrid" runat="server" ChildrenAsTriggers="true"
UpdateMode="Conditional">
<ContentTemplate>
  <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="updateGrid"
   runat="server" DynamicLayout="true" DisplayAfter="0">
         <ProgressTemplate>
               <asp:Panel ID="pnlAjaxProcessing" CssClass="ajaxProcessingContainerDiv"
       runat="server">
          <table class="ajaxProcesingTable">
              <tr>
                  <td class="ajaxProcesingImageTD">
                      <br />
                      <asp:Image ID="imgProgressBar" ImageUrl="~/Images/ajaximage.gif"
                  runat="server" />
                      <br />
                  </td>
              </tr>
              <tr>
                  <td class="ajaxProcesingTextTD">
                      Processing...
                      <br />
                  </td>
              </tr>
          </table>
      </asp:Panel>  
      </ProgressTemplate>
   </asp:UpdateProgress>

...
...
...

</ContentTemplate>
</asp:UpdatePanel>

The CSS Class are given below:

.ajaxProcessingContainerDiv
{
border: 0;
height: 10%;
width: 20%;
position: fixed;
_position: absolute;
left: 40%;
top: 40%;
color: black;
z-index: 100;

}

.ajaxProcesingTable
{
width :100%;
height: 100%;
border: 1px solid LightBlue;
background-color : White;
}

.ajaxProcesingImageTD
{
text-align :center ;
}

.ajaxProcesingTextTD
{
text-align :center;
color: #0067a2;
font-size :medium;
}

Here we can have one improvement. Instead of using the Ajax Processing Panel (pnlAjaxProcessing) in every page, we can create a user control for it and use that user control in all the pages. The advantage is, if in future we want to change the ajax processing image or the text displayed, then we will have to make changes in the user control and it will get reflected in all other pages.

Hope this helps!

Exception handling in Ajax

Exception handling plays an important role in any application development. The way we present our exceptions to the user decides the quality of our software. The way we design a pattern for exception handling in C#, ASP.NET we should also design a similar pattern for implementing Ajax exceptions. If an Ajax exception is not caught, then it should as a pop-up directly on the screen showing the exact technical error message with a code. A layman/user will never know what went wrong behind the scene.

Ajax Exception Message

Different ways of handling exception in Ajax
1. Using the AsyncPostBackErrorMessage property of the Script Manager class
You can set the exception message that needs to be shown to the user to the AsyncPostBackErrorMessage property of the ScriptManager object. This can be achieved in the following way:

scriptManager.AsyncPostBackErrorMessage = "Oops..\nAn error occurred while processing";

Set the above exception message in the catch block of the method. When an exception occurs, this message will be shown to the user in a pop-up window.

2. Using the above method will show the exception message to the user as a pop-up window. It is not a good practice to show a pop-up on error. Better way to do is to add a Label field to the web page and set the text of that label field with the exception message. For more clarity to the user, the exception message can be shown in Red color. Ajax inherently exposes an event OnAsyncPostBackErrorHandler. This event is invoked when an exception occurs in your web page. It is better to set the exception message in this event as shown below:

 protected void OnAsyncPostBackErrorHandler(object sender, AsyncPostBackErrorEventArgs e)
{
  scriptManager.AsyncPostBackErrorMessage = "Oops..\nAn error occurred while processing";
}

Is this going to suffice? The answer it NO. Here we have just handled an event and set the required exception message to the AsyncPostBackErrorMessage property of the scriptManager class. We have to handle another event at client side to set this message to the Label control and inform the Ajax manager to not show the ugly pop-up. Following code will be inserted at the client side:

 <script language="javascript" type="text/javascript">
    // Register the EndRequest Ajax event
      Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

   // Here the Ajax EndRequest event is used to supress any ALERT error message and
      // show them in the lblStatus instead.
      function EndRequestHandler(sender, args) {
          if (args.get_error()) {
              var msg = args.get_error().description;
              msg = msg.replace('Sys.WebForms.PageRequestManagerTimeoutException:', '');
              msg = msg.replace('Sys.Webforms.PageRequestManagerServerErrorException:', '');
              document.getElementById('ctl00_mainPlaceHolder_lblStatus').innerText = msg;
      // This will avoid the pop-up
              args.set_errorHandled(true);
          }
      }

</script>

Hope this helps. Your comments are welcome!