Calling WebService Asynchronously using ScriptManager in just 3 Steps.

This is one the most simple method to call a WebService asynchronously. It is not only simple but its fast and upto the performance is performance is issue. We all know that how webserices pulls data fast from server to client.

Using such asynchronous methods, its help to avoid getting much of the payload we use to get in normal postbacks.So its fast and easy.

I am here showing most simple way to do so.

Step 1: Get one Textbox and Button on form.

<div>
        <asp:TextBox runat="server" ID="name"></asp:TextBox>
        <asp:Button ID="cmd" runat="server" OnClientClick="javascript:return hello();" Text="Click Me" />  
</div>

You can see that I have added a Javascript function hello(), Now lets see what is that function is going to do.

But before that we need to add WebService to our application. So add a simple WebService like we add it normally.

[Note : I have taken simple WebService and not the WCF one.]

Step 2: Add a WebService to the application.

Go to WebService.cs file, Make sure that you had called the Namespace System.Web.Script.Services either with Imports [if VB.NET or Using if C#, I am using C#]

using System.Web.Script.Services;  

Then make sure that you un-comment following line :

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]

This is already uncommented in Visual Studio 2008, I think this is not the case with Visual Studio 2005, I think there you explicitly need to write it.

I have written my own WebMethod for demo, you can replace that with anything you want it as webmethod.

[WebMethod]
    public string Vikram(String str)
    {
        return "Hello "+ str;
    }

Step 3: Consuming WebService in application.

This is most important and final step towards getting a call to webservice asynchronously.

Usually we create a proxy of service either by WSDL tool or in code we simply make object of that. But here we not going to implement any of this. We are going to achieve this by using ScriptManager, like a AJAX call. So we will now look at the final piece of code.

<asp:ScriptManager runat="server">
        <Services>
            <asp:ServiceReference Path ="~/WebService.asmx" />
        </Services>
    </asp:ScriptManager>

This is how I am going to call my Service using Script Manager.I guess many of us till the day used Script Manager for just sake of implementing AJAX. Hope this will encourage all of us to explore more.

<script type="text/javascript">
    function Callback(result)
    {
        alert(result);
    }
    function hello()
    {
        WebService.Vikram($get('name').value,Callback);
    }
   </script> 

This is the final Script which we have, here you can see I have used another function as Callback as we expect a asynchronous call so we need to have some kind of checksum sort of thing to make sure its getting called asynchronously.

In function hello() I have just created a proxy for my service. Well be frank to you. while programming this demo, I saw once name of this service in Intellisense but I never again saw the same..surprise or bug in Visual Studio 2008..I don't know.

I have just passed control id to script as $get statement shows followed by call to Callback function and we are done with it.

This is how you can call any webservice asynchronously, I think this way life will be easier as its very very simple to implement.

Vikram.

Test post from Microsoft Windows Live Writer

Testing another awesome tool by Microsoft. Live Writer.

I think this will encourage me more now to do postings on blog :)

Vikram.

Ink Presenter using Microsoft Silverlight

Hello Everyone !!

After a long gap...office work and all..I am back again.

Here is the sample Silverlight demo, which will be like paintbrush kind of thing.

This will surely give vision to all developers who are planning to do some programming on Silverlight.

Demo is created using following Tools.

1. Windows Vista (OS)

2. Visual Studio 2008 (Beta 2)

3. Silverlight SDK 1.1

Initial Setup : First you need to install Visual Studio 2008 (Beta 2) . You can download it from Microsoft Web site. Then you need to install Silverlight SDK 1.1, Once you installed Silverlight SDK . You can see that a Template will get placed in New Project section of Visual Studio as shown below.

Once you create a Silverlight Project with appropriate name and location, You can see the Silverlight Project structure in Solution Explorer of Visual Studio. It contents “Silverlight.js” file which is responsible to Run any silverlight application. First job of Silverlight.js is to check whether the current system is capable of running silverlight application or not. If Silverlight support is not there for current system then appropriate error will be hand

led by this file.

You can see the initialization of Silverlight in javascript function named as “function createSilverlight()” which resides in your Test.html.js file, This function get called from

tag in Test.html Page.

<div id="SilverlightControlHost" class="silverlightHost" >

<script type="text/javascript">

createSilverlight();

script> div>

And reference is get crated in Header tag as

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

<script type="text/javascript" src="TestPage.html.js">script>

This is how the first initialization of Silverlight is done.

Ink Presenter :

This demo will show how to implement the simple Ink Presenter feature using Silverlight.For this one need to add Ink Presenter in Page.xaml as follows.

<InkPresenter Height ="600" Width ="600" Background ="Pink"

x:Name="inkP" />

Once you placed Ink Presneter inside xaml file. Then rest of the coding is need to be done from code behind, because one need to handle mouse events which will be better handled from code behind, either C# or VB.NET

For that once should first need to go at Page.xaml.cs file.Then first we need to create object of Stroke class which will help us to draw free hand on web page.Create object “s” for Stroke class as shown below.

namespace MySilverlightInkDemo

{

public partial class Page : Canvas

{

Stroke s;

public void Page_Loaded(object o, EventArgs e)

{

// Required to initialize variables

Point to be noted here that you can see the namespace get consumed here is

System.Windows.Ink. Syntax is

using System.Windows.Ink;

After this,First job is to generate event to draw free han

d lines using Ink.So we need to handle mouse events. For this we will add event handler inside Page_Loaded event as shown below.

public partial class Page : Canvas

{

Stroke s;

public void Page_Loaded(object o, EventArgs e)

{

// Required to initialize variables

InitializeComponent();

inkP.MouseLeftButtonDown += new MouseEventHandler(inkP_MouseLeftButtonDown);

inkP.MouseMove += new MouseEventHandler(inkP_MouseMove);

inkP.MouseLeftButtonUp += new MouseEventHandler(inkP_MouseLeftButtonUp);

}

Note : You just need to type inkP.MouseLeftButtonDown += ..and then Press “Tab” key twice,The event will get generated.

inkP is nothing but name given to InkPresneter in xaml file as shown below.

<InkPresenter Height ="600" Width ="600" Background ="Pink" x:Name="inkP" />

You can see the last attribute x:Name=”inkP”

Here now we will first handle the MouseLeftButtonDown as this is supposed to be get fire first.

void inkP_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

inkP.CaptureMouse();

s = new Stroke();

s.StylusPoints.AddStylusPoints(e.GetStylusPoints(inkP));

s.DrawingAttributes.Color = Colors.Black;

inkP.Strokes.Add(s);

}

You can see the CaptureMouse(); method of inkP.Though is does not take any parameter,Signature of this method is as bool Visual.CaptureMouse();,Object “s” is get instanciated in statment s=new Stroke();

Then we need to add StylusPoints to s, This is nothing but the initialization process of Ink Presenter.Then we need to add this Stroke to inkP by statement inkP.Strokes.Add(s);

Next event to be handle is MouseMove.

void inkP_MouseMove(object sender, MouseEventArgs e)

{

if (s != null)

{

s.StylusPoints.AddStylusPoints(e.GetStylusPoints(inkP));

}

}

This will simply check whether s is null or not,if s is not null then it will keep on adding StylusPoint,Hence we get continious drawing untill we release the mouse button.Finally in MouseLeftButtonUp event, we will make s as null.

void inkP_MouseLeftButtonUp(object sender, MouseEventArgs e)

{

s = null;

}

Hence this is sort of continous process,The same cycle will be again roll on when MouseLeftButtonDown event will get fire.

Build the application and Press “F5”,you should get following output,a sort of board in your browser where you can do free hand drawing.

Above is the default blank canvas ready for drawing, and once you apply strokes using mouse button click like we do in PaintBrush we can gets similar output shown below.

Thats it !!..done with it..Hope you all will like it..This demo was inspired from one of the silverlight videos which I came across few months back.

Vikram Pendse.