Wednesday, September 1, 2010

Calling a webservice from javascript in ASP.NET 2.0...

Prerequisite:
In Visual Studio 2005, to make a web project template available, you need to upgrade to SP1. The "other alternative" is to install VS80-KB915364-X86-ENU.exe and WebApplicationProjectSetup.msi. If you choose SP1 than ignore the "alternative" way.

1) For Ajax-Enabled Web Site, install ASP.NET Ajax 1.0.

2) Create new ASP.NET Ajax-Enabled Web Site.

3) Add reference System.Web.Extensions ver 1.0.61025.0.

4) On server side, create new WebService, add System.Web.Script.Services namespace and add ScripService attribute to your webservice class.
    ...
using System.Web.Script.Services;
...

[ScriptService]
public class MyWebService : WebService
{
public MyWebService()
{
//Uncomment the following line if using designed components
//InitializeComponent();
}

[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
}
5) On client side, create new web form and add ScriptManager to the aspx file that pointing to your webservice (MyWebService.asmx).
    ...
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference InlineScript="true" Path="~/MyWebService.asmx" />
</Services>
</asp:ScriptManager>
...
6) Add an html button and its eventhandler.
    ...
<input id="btnOk" type="button" value="Ok" onclick="javascript:btnOk_Click();" />
...

<script language="javascript" type="text/javascript">
function btnOk_Click()
{
try
{
MyWebService.HelloWorld(OnHelloWorldComplete);
}
catch(e)
{
alert("error " + e);
}
}

function OnHelloWorldComplete(result)
{
alert(result);
}
</script>
Done!!! Your first Ajax-Enabled Web Site.

Here's the full source code:
MyWebService.asmx.cs
    using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;

///
/// Summary description for MyWebService
///

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class MyWebService : WebService
{
public MyWebService()
{
//Uncomment the following line if using designed components
//InitializeComponent();
}

[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
}
Default.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<!-- to include webservice proxy, set inlinescript=true, it's much more easier compare to adding script src=webservice.asmx/js -->
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference InlineScript="true" Path="~/MyWebService.asmx" />
</Services>
</asp:ScriptManager>

<div>
<input id="btnOk" type="button" value="Ok" onclick="javascript:btnOk_Click();" />
</div>
</form>
</body>
</html>

<script language="javascript" type="text/javascript">
function btnOk_Click()
{
try
{
MyWebService.HelloWorld(OnHelloWorldComplete);
}
catch(e)
{
alert("error " + e);
}
}

function OnHelloWorldComplete(result)
{
alert(result);
}
</script>

No comments:

Post a Comment