Alik Levin's : AJAX

ASP.NET Performance: Fast AJAX, Faster AJAX

alikl — Wed, 29 Oct 2008 00:43:52 GMT

AJAX improves significantly both user experience and performance. It can be further improved by using down level capabilities that .Net framework offers. Specifically, consuming Web Services and WCF directly from client script. The best part is that ASP.NET AJAX comes with built in libraries - server and client - that make coding fun while significantly improving the web application's performance.

Customer Case Study

The customer was using hand crafted XmlHttp requests from client scripts requesting the data from ASPX pages. While the goal was achieved - the amount of information sent to the server was minimal and the user interface was responsive - the coding was not really fun. Also, since the requests were sent to regular ASPX pages the whole ASPX pipeline was executing unnecessarily utilizing CPU for nothing. The customer did not want to use Update Panel control. Although it boosts coding productivity, it also adds some burden on the network. Network utilization should have been kept to the minimum.

Analysis

After quick research I found two great resources that directed me to the solution that would satisfy both requirements:

Coding productivity.
Minimum of data in transit on the wire.

The first one is from Chris Hay - remix08 UK ASP.NET Front End Performance Slides and the other one is from Jeff Prosise - Power ASP.NET AJAX Programming. They both outline the usage of Script-Callable Web Services. There are three simple steps to follow:

Declare your Web Service as Script-Callable by adding class level attribute:

[System.Web.Script.Services.ScriptService]
public class AJAXCallableWebService : System.Web.Services.WebService
{
    [WebMethod]
    public string HelloWorld(string name)
    {
        return "Hello, " + name;
    }
}

Declare service reference inside the ScriptManager:

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Services>
        <asp:ServiceReference InlineScript="true" Path="~/AJAXCallableWebService.asmx" />
    </Services>
</asp:ScriptManager>

Call a Web Service from the client script:

<script type="text/javascript" language="javascript">
function callAjax()
{
    var text = document.getElementById("Text1").value
    
    AJAXCallsWebService.AJAXCallableWebService.HelloWorld(text,onSuccess);
}
function onSuccess(result)
{
    document.getElementById("result").innerText = result;
}
</script>

    <span id="result"></span>
    <input id="Button1" type="button" value="button" onclick="callAjax()" />
    <input id="Text1" type="text" />

Sample Visual Studio Solution

Grab the sample solution implemented using Visual Studio 2008 form my SkyDrive here:

Related Materials

This template is made with PracticeThis.com plugin for Windows Live Writer

How To Consume WCF Using AJAX Without ASP.NET

alikl — Mon, 18 Feb 2008 23:35:21 GMT

How to consume WCF services directly from Html client? How to add AJAX-like functionally to application that does not natively support ASP.NET AJAX like classic ASP, ASP.NET 1.1, or PHP?

WCF that ships with .Net 3.5 provides capability to consume it from any JavaScript enabled client via XML or JSON encoding. There is new built in webHttpBinding that supports either JSON or XML encoded messages to be sent to WCF services.The functionality can dramatically improve performance and user experience.

This post summarizes the steps to create and consume basic WCF service using webHttpBinding binding.

Summary of Steps

Step 1 – Create WCF service.
Step 2 – Configure WCF end point.
Step 3 – Create JavaScript to invoke WCF service.
Step 4 – Test the solution.

Next section describes each and every step in details

Step 1 – Create WCF service

Open Visual Studio and create new WCF service project by choosing "WCF Service Application" template under "Web" project type. Name it Wcf2Ajax. Open IService1.cs file and create OperationContract as follows:

        1: [ServiceContract]

       2:  public interface IService1

       3:  {

       4:  

       5:      [OperationContract]

       6:      string Sum2Integers(int n1, int n2);

Open Service1.svc.cs file and add public method that accepts to integers and returns the sum of it. This is the functionality that will be exposed by the WCF service and consumed by JavaScript enabled client:

       1: public class Service1 : IService1

       2: {

       3:     public string Sum2Integers(int n1, int n2)

       4:     {

       5:         int result = num1 + num2;

       6:  

       7:         return result.ToString();

       8:     }

Step 2 – Configure WCF end point

Open web.config file and add <binding> section to <system.serviceModel section. Add <webHttpBinding> to binding section:

<system.serviceModel>
  <bindings>
    <webHttpBinding>
      <binding name="AjaxBinding"/>
    </webHttpBinding>
  </bindings

Add AjaxBehavior to <behaviors> section to support WCF invocation via AJAX:

<behaviors>
  <endpointBehaviors>
    <behavior name="AjaxBehavior">
      <enableWebScript/>
    </behavior>

Configure WCF service's endpoint to use newly created binding:

<endpoint address="ajaxEndpoint" 
          behaviorConfiguration="AjaxBehavior" 
          binding="webHttpBinding" 
          bindingConfiguration="AjaxBinding" 
          contract="Wcf2Ajax.IService1">

Step 3 – Create JavaScript to invoke WCF service

Add Html file to the solution by right clicking on the solution node in solution explorer and choosing "New Item..." and then "HTML Page" template. Name it WCFConsumer.htm. Add few HTML controls - two text boxes to accept two integers, one pure HTML button to trigger WCF call, and <span> element to present the result:

<input type="text" id="num1" />
<input type="text" id="num2" />
<br>
<input type="button" onclick="CallWcfAjax()" value="Call WCF via AJAX" />
Result <span id="result"></span>

Add <script> block to <header> section and add JavaSctip that builds HTTP request and wires invocation function to some event, say button click:

    <script type="text/javascript">
    function CallWcfAjax()
    {
        var xmlHttp = new ActiveXObject("Microsoft.XmlHttp");

        var url = "Service1.svc/ajaxEndpoint/";
        url = url + "Sum2Integers";

        var body = '{"n1":';
        body = body + document.getElementById("num1").value + ',"n2":';
        body = body + document.getElementById("num2").value + '}';
          
        // Send the HTTP request
        xmlHttp.open("POST", url, true);
        xmlHttp.setRequestHeader("Content-type", "application/json");
        xmlHttp.send(body);

        // Create result handler 
        xmlHttp.onreadystatechange= function X()
        {
        
             if(xmlHttp.readyState == 4)
             {
                  result.innerText = xmlHttp.responseText;
             }
        }
    }
    </script>

Step 4 – Test the solution

Build the solution and navigate to WCFConsumer.htm. Provide two integers to both text boxes and hit "Call WCF via Ajax" button. You should expect for result similar as depicted below:

Parse the result to your needs.

My related post

Related resources

Creating WCF AJAX Services without ASP.NET

Download Visual Studio 2008 project with the sample from my SkyDrive

Profiling JavaScript With Ajax View Tool: Spot Poor Performance Client Script In No Time

alikl — Thu, 17 Jan 2008 07:19:09 GMT

Ever wondered why your application unreasonably slow? You have it all - most powerful hardware, your database is tuned, SQL queries are optimized, network is barely utilized, and .Net code is super efficient. So why on earth response time is so slow?

The answer might lie in recently developing area – client script. I’ve witnessed few over-AJAX’ed applications with poor performance and far from the best user experience. Quite the contrary what AJAX and other client script flavors are for…

In this post I will show how Ajax View – JavaScript profiler project from Microsoft Research – helped me to spot client side script bottlenecks in no time and make the customer happy.

Ajax View – the tool. Ajax View is available for download here. The tool's goal:

"The goal of the Ajax View project is to improve developer's visibility into and control over their web applications' behaviors on end-user's desktops."

Profiling process. The creators of the tool, Emre Kıcıman and Ben Livshits, provided simple and very useful walk through on how to install and use the tool.
Recommendations to improve client side script. Eric Lawrence, Fiddler tool creator, kindly pointed me to useful recommendations how to make JavaScript run faster:
Customer's story. During recent application performance review we identified in no time the following problems using Ajax View:

Issue	Recommendation
1200 lines of inline JavaScript	Make JavaScript and CSS External
Using XmlHttp object with its async property set to true while performing time consuming call to the server	Do not re-invent the wheel, use ready to-go, proven AJAX Libraries like ASP.NET AJAX
Manipulating large XML islands inefficiently	Do not use large XML documents - neither client side nor server side. Use lazy approach of downloading the data on demand.

My related posts

ASP.NET AJAX Control Toolkit - Basic Sample For DynamicPopulate Control

alikl — Mon, 31 Dec 2007 07:49:45 GMT

How to dynamically populate the content of a control based on Web Service call triggered by another control? DynamicPopulate extender to the rescue:

DynamicPopulate is a simple extender that replaces the contents of a control with the result of a web service or page method call. The method call returns a string of HTML that is inserted as the children of the target element.

This post to summarize basic steps of using AJAX Control Toolkit's DynamicPopulate extender. Plus customer's case study of how it was implemented with ASP.NET Masterpage for performance and UX improvement.

Summary of steps

Step 1 - Create ASP.NET Web Application
Step 2 - Add server side code
Step 3 - Add DynamicPopulate extender
Step 4 - Add client side script to use the extender behavior
Step 5 - Add client side event to invoke the client script
Step 6 - Test the solution

Following section describes each step in details.

"Then another ask came through - content page must update the sidebar that is part of the Master page...."

Step 1 - Create ASP.NET Web Application. Open Visual Studio 2008. Create new "ASP.NET Web Application" project, found under Web node in "New Project" dialog. Name it DynamicPopulateSample. Add site's Master Page by right clicking on the project in project explorer window, then "Add" -> "New Item...", then choose "Master Page" template from the "New Item" dialog. Leave its default name. Drag Label control on the Master page from the Tool Box. The Label will be dynamically updated. Add new ASPX page by right clicking on the project in project explorer window, then "Add" -> "New Item....", then choose "Web Content Form". Specify it's Master Page by choosing Site1.Master. Name it default.aspx. Add two pure Html radio buttons to default.aspx. These will serve as a trigger to update the Label on the Master Page. Add AjaxControlToolkit.dll to the project's bin folder and add reference to it.

Step 2 - Add server side code. Open default.aspx.cs code behind for default.aspx. Add the following function:

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static string GetHtml(string contextKey)
{
    // A little pause to mimic a latent call
    // This is the place to perform server side
    // code like DB access
    System.Threading.Thread.Sleep(350);

    return String.Format("Persona: {0}", contextKey);
}

Step 3 - Add DynamicPopulate extender. Register AjaxControlToolkit assembly inside the page. Add the following declaration right after <@Page...> directive

<%@ Register
    Assembly="AjaxControlToolkit"
    Namespace="AjaxControlToolkit"
    TagPrefix="ajaxToolkit"%>

Add AJAX Script Manager to the page:
<asp:ScriptManager ID="ScriptManager1"runat="server"/>

Add DynamicPopulateExtender control to the page:

<ajaxToolkit:DynamicPopulateExtender
          ID="dp"BehaviorID="dp1"runat="server"
          TargetControlID="form1$Label1"
          ClearContentsDuringUpdate="true"
          ServiceMethod="GetHtml" />

Notice TargetControlID is set to "form1$Label1". This is the Label control to be updated with the Html string returned by the server side code I described in Step 2. $ notation means nesting - read "Label1 control inside form1 control". It can be any nesting depth. Save your work and then view in browser to make sure that no exceptions generated.

Step 4 - Add client side script to use the extender behavior. So far, there is Label1 to be updated and it is sitting in the Mater page. There is DynamicPopulateExtender that defines the behavior. There is server side code to handle the request. Now add client script that makes the request to the server:

Notice initialization function call - the last row. It invokes the client side function to call into server side for the first time when the page is rendered into the browser for the first time.

Step 5 - Add client side event to invoke the client script. The last part is adding the event that triggers the client side code to be invoked and thus making call to the server. Locate Html radio buttons that were created during Step 1, add onclick events to call the client side function:

<input type="radio" 
       name="rbFormat" 
       id="r0" 
       value='alik'
       onclick="updateDateKey(this.value);" 
       checked="checked" />click to set 'alik'<br/>
<input type="radio" 
       name="rbFormat" 
       id="Radio1" 
       onclick="updateDateKey(this.value);"
       value='levin' />click to set 'levin'

Step 6 - Test the solution. Save your work and view in browser. Click on the radio buttons and you should see how the Label in master page gets updated with respective values. It all happens with small delays simulated on the server by Sleep function. I think it is cool.

Case Study

I was asked by a customer to offer a solution for very responsive UX [User Experience] while avoiding annoying refresh of the web page. Natural answer was AJAX. The customer also asked to provide the solution for common look and feel. Master pages was my answer. Then another ask came through - content page must update the sidebar that is part of the Master page.... hmm A-ha! Use DynamicPopulateExtender.

My Related posts

Sample VS2008 project that demonstrates DynamicPopulateExtender can be found on my SkyDrive:

Watch UX [User Experience] in the video below:

Video: DynamicPopulateExtender Demo

Enjoy.

ASP.NET 3.5 Extensions: Basic Steps To Create Dynamic Data Web Application - Focus On Security and Performance

alikl — Tue, 18 Dec 2007 13:08:01 GMT

This post walks through the steps I've taken to create simple Dynamic Data Web Application. I just loved the development model for DTO [Data Transfer Object] and Input Validation options.

Summary of steps

Step 1 - Download and install ASP.NET Extensions.
Step 2 - Create New Dynamic Data Web Application in VS2008
Step 3 - Add "LINQ to SQL Classes" file to the project
Step 4 - Test the project
Step 5 - Create Model Class and add validation rules

Following are detailed explanations for each step.

Step 1 - Download and install ASP.NET Extensions. ASP.NET Extensions can be found here - http://asp.net/downloads/3.5-extensions/. I installed it on my Vista machine that has Visual Studio 2008 installed.

Step 2 - Create New Dynamic Data Web Application in VS2008. Open Visual Studio 2008 and choose "Dynamic Data Web Application" template found under Web node. Make sure that the project references System.Web.Extensions assembly version 3.6. If not then remove it and reference the assembly from "C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\ASP.NET 3.5 Extensions\System.Web.Extensions.dll".

Step 3 - Add "LINQ to SQL Classes" file to the project. Right click on the project and choose "Add"->"New Item..." and then choose "LINQ to SQL Classes" template from "Data" node. In server Explorer expand "Data Connections" node, expand desired database, and then expand "Tables" node. Highlight desired tables and then drag them onto "LINQ to SQL Classes" component [double click file with .dbml extension].

Step 4 - Test the project. Right click on default.aspx page and choose "View in Browser". The page should look similar to the picture below. Click on the tables names to see the actual values and master-child view.

Step 5 - Create Model Class and add validation rules. Adding validation rules can be accomplished using .Net attributes declaratively or using partial methods. Create new class. Add "using System.Web.DynamicData;" declaration. Delete the default constructor. Add partial class with the name of desired table, say "Item" or/and "Product".

Attribute based input validation. Add attribute to the class, for example to check range for ListPrice field/column and add the following declaration:
Partial method input validation. Add partial method for desired field change [intelliSense really rocks at this part] and then add validation logic:

Validation rules propagated to both client [for usability] and server [for security], this is how violation of input validation looks in it default view:

Heaven.

Focus on Security

I can create data driven web pages using GridView and DataSets. The drawback is that validation is not that straightforward. On other hand I can create custom collections and manually data bind it - the code is much nicer and cleaner and validation rules are easy to add but there is the need of writing extra code. In the case of Dynamic Data there is fantastic combination of design time productivity and also clean code where validation rules are applied directly to the model. Less room for mistake to introduce security vulnerability.

Focus on Performance

Ready to go templates that are generated with the default Dynamic Data projects already implement AJAX and paging. It reduces dramatically amount of data that round trips over the wire. Large HTML output - including ViewState - is one of the biggest performance vulnerabilities I've noticed recently. AJAX and paging is a great way to overcome this issue.

My related posts

Related materials

The post was inspired and based on David Ebbo's fantastic screencast
ASP.NET 3.5 Extensions Quickstarts
Keeping View State on the Server
Performance Threats

AJAX Security - Client Side Validation Is For Usability Only, Not For Security

alikl — Wed, 03 Oct 2007 15:29:39 GMT

“As to methods there may be a million and then some, but principles are few. The man who grasps principles can successfully select his own methods. The man who tries methods, ignoring principles, is sure to have trouble.”
Ralph Waldo Emerson

AJAX is another technique among myriads of others to present information and to send it back to server.

In Driver's Guide vs. Owner's Manual JD Meier provides great run down about the difference between "How things work" vs. "How to get most out of it".

Here is an example of how to apply it in practice:

In ASP.NET AJAX Role Application Service – Visual Studio 2008 (Orcas) David walks through new feature introduced in Orcas - AJAX Roles service. It provides also some sample. This is Owner's Manual explaining how things work:

function onLoadRolesCompleted(result, userContext, methodName){ if (Sys.Services.RoleService.isUserInRole("Administrator")){ $get("adminView").style.display = "block"; } }

In ASP.NET AJAX Roles and Security Michael comments on the above features pointing out the importance of server side role membership validation. This is Driver's Guide for safe and secure driving:

"You have to test ALWAYS on the server-side code if the user has the needed user rights to execute your code."

Some server side techniques to test server side code:

Here is another example for not following core security principle of server side validation:

How To Hack WCF - New Technology, Old Hacking Tricks