Calling ASP.NET Web Service Using Jquery - Part III - Fetch Data From SQL Server

11. March 2010 01:29

ASP.NET Jquery 

My previous two posts on using Jquery for calling ASP.NET web service takes you to the basics of calling a web service using Jquery AJAX. In this last post of the series I will show hot to fetch data from the SQL Server through a web service.

In this example I am going to show on how we can fetch data from SQL Server. I am using pretty well known Adventure Works database for this example. I am using Person.Contact table for this example. I will show on how to fetch data i.e. first name, last name and e-mail address on the basis of the ContactID.
So first, as usual create a normal ASP.NET project and add the required files. Create a new web service, I have named my web service “AdvService.asmx”. You can name your web service as you like. This time we are fetching data from the SQL Server by passing a parameter to the web service method. I am using the very same, basic way of fetching record from the SQL Server. You can also use LINQ here to fetch data.

I have used a delay of few seconds to how the animation, rest in the code is self explanatory. Just passing a parameter and fetching the details of the person from the Adventure Works database.Below are the screenshots for the sample application.

Download: JqueryAjaxSQLDemo.zip (97.86 kb)

Currently rated 5.0 by 7 people

Calling ASP.NET Web Service Using Jquery - Part II - Passing Parameters

5. March 2010 18:35

ASP.NET Jquery 

In my previous post I have shown with a simple example on how you call an ASP.NET web service using JQuery. In this post I will show how you on how can you pass parameters to the web method and get the result using the web service.
If you have read my previous post, you have seen that we have just called a web method which returns a simple string back to us. In this example, instead of returning a plain simple string back to the client, we will ask the user to enter two numbers and the call the web service which in turn add the two numbers and returns the result back to the client.

First start up with the design of the page. As we are going to add two numbers, we will add a label, textboxes and a button as shown in the below screenshot:

Add a web service to your project as I have described in my previous post. Follow the same steps to add a web service to your project. The only change that you have to make is to add a method which accepts two numbers as parameters and return the sum of the two numbers. For your convenience, the method is as follows.

[WebMethod]
public int Add(int num1, int num2)
{
	return num1 + num2;
}

The script which I am using here to call the web service is the same as I have shown in my previous post, but the data parameter in the ajax function needs to be changed. When we are calling a web service which returns a normal string to us we can set the data parameter to blank. But this is not the case when we have to pass parameters to the web service to return the result. The data parameter in the Jquery ajax script goes something like this:

data: "{'num1': " + $("#txt_num1").val() + ", 'num2': " + ("#txt_num2").val() + "}"

In this parameter the ‘num1’ and ‘num2’ are the name of the parameters in the web service which we have to fulfill if we want the result from the web service. The parameter variable name should always remains the same as defined in the web service method. The parameters and their values are separated by a ‘:’( colon) and a ‘,’ (comma) is used to separate the parameters. The Jquery script $(“txt_num1”).val() will set the value to the parameter and then pass it to the web service method to get the result.

The code for Jquery script to call a web service in this example goes like this:

function CallService() {
            $("#lblResult").addClass("loading");
            $("#lblResult").html('');
            $.ajax({
                type: "POST",
                url: "Service.asmx/Add",
                data: "{'num1': " + $("#txt_num1").val() + ", 'num2': " + $("#txt_num2").val() + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                error: OnError
            });

            function OnSuccess(data, status) {
                $("#lblResult").removeClass("loading");
                $("#lblResult").html(data.d);
            }

            function OnError(request, status, error) {
                $("#lblResult").removeClass("loading");
                $("#lblResult").html(request.statusText);

            }
        }

I have added a bit of CSS to show ajax loading style animation. I am not covering it here but sure I will in the later Jquery posts. In my next post I will cover on how to fetch data from the SQL Server using a web service.

Download: JqueryAjaxParams.zip (94.76 kb)

Currently rated 4.8 by 12 people

Calling ASP.NET Web Service Using Jquery - Part I

5. March 2010 01:27

ASP.NET Jquery 

Jquery is now one of the most favorite JavaScript frameworks to play around. It offers some more advance feature to the developers and UI designers to accomplish their task easily and more conveniently. Take an example of AJAX and think where you can face the problems when you have to deal with different browsers who support XMLHTTP request and the one who don’t. I remember, I use to initialize the AJAX’s XMLHTTP object keeping in mind what will be my client’s browser. So, on the first go I have to detect the client’s browser and then set the XMLHTTP object and then process requests.
But Jquery gives us a tons of features to be happy and so as with handling data. In Jquery we have not to worry about what will our client’s browser and what will be the request object. Jquery handles all this for us and makes its pretty easy to use.

So start up with creating a new ASP.NET website project.

When you create a new project a new page named Default.aspx is added by default. I am going to use the same page in this example. If you wish you can change the name of the page. Add a button on the page and a label to show text.

Right-Click the project and add choose New Item. Add a new Web Service.

After this add the below code to the web service code behind file. But before you do that there are some things we need to keep in mind. Let’s talk about a normal web service which we are going to consume in a normal way i.e. using the server-side code. But this is not the case I am explaining here. What we are going to do is to consume the web service on the client-side using Jquery.

Now the changes that you have to made in the code-behind file to allow the web service to be consumed by the client-side script is as follows:
First you have to add or un-comment the attribute above of the web service class. This attribute allows the web service to be called from the client-side script (Jquery or other client-side scripts).

[System.Web.Script.Services.ScriptService]

After this you can write your method the same way you use to write with attribute [WebMethod]. I am just writing a simple method which will return a string.

[WebMethod]
Public string Hello()
{
	Return “Welcome to ASP.NET Web Services and Jquery”;
}

We have our web service ready and now we have to write client-side script to consume this webservice. The method in our web service will return only a plain simple string to the client. First I have added a button and a label to the page. On button click I have called the method (Jquery method) which will call the web service. The response of the web service is then shown on the label. On the page from where we are calling the web service, add the following Jquery script to call the web service.

function CallService()
        {
            $.ajax({
                type: "POST",
                url: "Service.asmx/Hello",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                error: OnError
            });
        }

        function OnSuccess(data, status) 
        {
            $("#lblResult").html(data.d);
        }

        function OnError(request, status, error)
        {
            $("#lblResult").html(request.statusText);
        }

In the above code I have created a method and named it CallService(). Inside this method there are several parameters that we have to set to call the web service.

  • type: Can be POST or GET. Web Services do not work with "GET" by default, as to prevent cross-site request forgeries. (Thanks Lee Dumond for pointing this out to me)
  • url: Name of the web service. In the above code you can see I have called the web method ‘Hello’ from the web service named ‘Service’. If you are consuming or calling other web service which is not a part of your project or solution then you need to enter the fully qualified name of the web service with method name you are going to call.
  • data: In this example the data will remain empty, as we are only calling a method which return a simple string and don’t accept any parameter. If the method has some parameters then we will pass the parameters. I will explain on passing parameters in my coming posts.
  • contentType: Should remain the same.
  • datatype: Should remain as it is.
  • success: Here I have called the OnSuccess when the call is complete successfully. If you check the OnSuccess method you will see that I have set the returned result from the web service to the label. In the OnSuccess method body you see ‘data.d’. The ‘d’ here is the short form of data.
  • Error: Same as I have done with OnSuccess. If any error occurred while retrieving the data then the OnError method is invoked.

Run the project and see it in action.

In my coming post on calling web service in ASP.NET using Jquery I will show on how to pass parameters to a web service and get the result and on how can we interact with SQL Server to fetch data and lots of other stuff in Jquery and ASP.NET.

Download: JqueryAjaxDemo.zip (87.55 kb)

Currently rated 4.5 by 10 people

Lightbox extension for BlogEngine.NET

29. January 2010 21:27

BlogEngine.NET Jquery 

While adding images to the post for illustration purposes, most of the time the resolution of the image is quite bigger then the presentable area. So I decided to install the lightbox extension and therefore I searched all over the net found many lightbx extensions for Blog Engine, but they are not like the one I wanted to have for my blog. So after a bit workaround and after studying different extensions I got it working.

Here check this example.

Installation of the extension: Download the extension from the download link below and follow the below steps to get the extension working.

  1. Place the CSS and JS folder in the root of your BlogEngine setup.
  2. Place AddLightBox.cs and LightBox.cs under Extensions folder (App_Code\Extensions).

The main LightBox extension was taken from http://blog.data-worx.de (site down). A small problem was then reported by MrWize for which he provide the solution by writing another extension AddLightBox.cs. If you want to know more then read here.

The files for this extensions are presented as it is as I have found on the net. I have just assembled them from the net and make it worked for my blog.

Download: LightBox.zip (45.30 kb)

Currently rated 5.0 by 2 people

Enable intellisense Jquery in Visual Studio 2008

15. January 2010 18:16

Jquery Visual Studio 

Microsoft with Jquery team have added the intellisense support for VS2008. I am using Jquery for the past few months, but never thought that it would be great if there would be intellisense support for Jquery. I read Scott Gu’s post of enable intellisense support for Jquery in Visual Studio. The new Visual Studio 2010 comes pre-packed with Jquery intellisense support.

 No Rating

«1234»