Different methods to call Web Services from AJAX

Gyan Jadal

Rate me:

2.28/5 (8 votes)

25 Oct 2007CPOL2 min read

212K

1.1K

Different methods of calling Web Services from AJAX.

Download source code - 1.6 KB

Introduction

This article briefly explains the various ways in which a Web Service method can be called using AJAX.

Background

Lots of articles are out there explaining how AJAX and Web Services interact together while trying to solve various problems. I have put together just the interaction ways. In short, here are the different ways to call a Web Service from AJAX.

Using the code

The code below demonstrates the different methods starting with the traditional approach of No AJAX as the base.

The code snippets are arranged as:

Web Service
ASPX and
C# code-behind

Before AJAX

This section can just be glanced over to see how a Web Service method used to be called on postback from a server control like a button.

No JavaScript - Postback required to populate Label1

//WebService

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class MyService : System.Web.Services.WebService
{
    [WebMethod]
    public string HelloWorld()
    {
        return "Hello World " + DateTime.Now.ToString();
        //Or call the method on the real webservice traditional way
    }
}

Client ASPX:

ASP.NET

<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:Button ID="Button1" runat="server" 
  OnClick="Button1_Click" Text="Button" />
</form>
</body>

Client code-behind:

public partial class _Default : System.Web.UI.Page
{
    protected void Button1_Click(object sender, EventArgs e)
    {
        MyService myService = new MyService();
        Label1.Text = myService.HelloWorld();
    }
}

Using AJAX

Method 1

This section explains how a Web Service can be called by modifying the ScriptManager.

Using AJAX - Postback not required to populate Label1

Add the ScriptService() attribute to the Service class.
Add the <Services> tag to the ScriptManager.
Convert the server controls "Label" and "Button" to HTML controls.
Call the Web Service method from JavaScript which is actually a proxy call.
Remove the Click handler from the code-behind.

//WebService

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService()]
public class MyService : System.Web.Services.WebService
{
    [WebMethod]
    public string HelloWorld()
    {
        return "Hello World " + DateTime.Now.ToString();
        //Or call the method on the real webservice traditional way
    }
}

Client ASPX:

ASP.NET

<script language="javascript" >
function onClick(){
    MyAjaxApplication.MyWebService.HelloWorld(OnComplete, 
                      OnTimeOut, OnError);
    return true;
}
function OnComplete(args) {
    document.getElementById('Label1').innerHTML = args;
}
function OnTimeOut(args) {
    alert("Service call timed out.");
}

function OnError(args) {
    alert("Error calling service method.");
}</script><body>

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" >
<Services>
<asp:ServiceReference Path="MyService.asmx" />
</Services>
</asp:ScriptManager>
<label id="Label1" style="width: 318px"></label>
<input id="Button1" type="button" 
  value="button" onclick="return onClick();" />
</form></body>

Client code-behind:

public partial class _Default : System.Web.UI.Page
{
    //empty
}

Method 2

This section explains how a Web Service can be called from a CascadingDropDown Toolkit control with or without the intermediate page method.

Using AJAX page method and the CascadingDropDown control from the Toolkit- Postback not required to populate the combo

Add a new method to the service to return the CascadingDropDownValue[] collection. This will act as the data source for the dropdownlists.
Remove the <Services> tag from the ScriptManager.
Remove EnablePageMethods from the ScriptManager.
Remove the label and the textbox controls.
Add two DropDownList server controls and two CascadingDropDowns (from the Toolkit) to the client page.
Set the service name and method of the first CascadingDropDown.
Set the page method only for the second Cascadingdropdown.

//WebService

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService()]
public class MyWebService : System.Web.Services.WebService
{
    [WebMethod]
    public string HelloWorld()
    {
        return "Hello World " + DateTime.Now.ToString();
    }
    [WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public CascadingDropDownNameValue[] GetHelloList(
            string knownCategoryValues, string category)
    {
        string result = HelloWorld();
        List<CascadingDropDownNameValue> values = 
              new List<CascadingDropDownNameValue>();
        values.Add(new CascadingDropDownNameValue("Hello", result)); 
        return values.ToArray();
    }

Client ASPX:

ASP.NET

<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
From Direct Service call
<asp:DropDownList ID="DropDownList1" 
  runat="server" Width="285px" />
<br />
Through Page Method
<asp:DropDownList ID="DropDownList2" 
  runat="server" Width="285px" />
<br />
<cc1:CascadingDropDown ID="CascadingDropDown1" 
  runat="server" Category="Hello"
  TargetControlID="DropDownList1" 
  ServicePath="MyService.asmx" 
  ServiceMethod="GetHelloList">
</cc1:CascadingDropDown>

Client code-behind:

public partial class _Default : System.Web.UI.Page
{
    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static CascadingDropDownNameValue[] 
      GetHelloListPageMethod(string knownCategoryValues, string category){
    return new MyWebService().GetHelloList(knownCategoryValues, category);
}
}
//Note: If this PageMethod is used, the servicepath attribute 
//on the Cascadingdropdown in aspx should be removed

Points of interest

Hope this clears out a lot of confusion especially for people trying to work out how to access Web Services. I am open to comments.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Gyan Jadal

Architect

United States

Software Architect

hello Gyan,

I use webservices+ajax and I don't know how to get the value of the DropDownList(rightdd) in the controler,

can you help me ?

the code as following:

aspx:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<website.viewmodels.employeerightviewmodel>" %>

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

<asp:content id="Content1" contentplaceholderid="TitleContent" runat="server">
Create

<asp:content id="Content2" contentplaceholderid="MainContent" runat="server">

function validate() {
var rightdd = document.getElementById("<%=rightdd.ClientID %>");
// Session["name"] = rightdd.value;
alert(rightdd.value);
}

Create

<% using (Html.BeginForm()) {%>
<%: Html.ValidationSummary(true) %>

Employeeright

<%: Html.LabelFor(model => model.employeeright.menuid)%>

<%:Html.DropDownList("menuid", new SelectList(Model.menus as IEnumerable, "id", "name", Model.employeeright.menuid), new { id = "menudd" })%>

<%: Html.LabelFor(model => model.employeeright.rightid)%>

<asp:dropdownlist id="rightdd" visible="true" runat="server">
<asp:cascadingdropdown id="CascadingDropDown1" category="menuid" runat="server"
="" servicepath="~/Services/MenuService.asmx" servicemethod="getright" parentcontrolid="menudd" targetcontrolid="rightdd" prompttext="请选择权限" loadingtext="正在加载权限信息...">

<%: Html.LabelFor(model => model.employeeright.employeeid)%>

<%:Html.DropDownList("employeeid", new SelectList(Model.employees as IEnumerable, "id", "name", Model.employeeright.rightid))%>

<%: Html.LabelFor(model => model.employeeright.falg) %>

<%: Html.TextBoxFor(model => model.employeeright.falg) %>
<%: Html.ValidationMessageFor(model => model.employeeright.falg) %>

<%: Html.LabelFor(model => model.employeeright.fieldname) %>

<%: Html.TextBoxFor(model => model.employeeright.fieldname)%>
<%: Html.ValidationMessageFor(model => model.employeeright.fieldname)%>

<%: Html.LabelFor(model => model.employeeright.more) %>

<%: Html.TextBoxFor(model => model.employeeright.more) %>
<%: Html.ValidationMessageFor(model => model.employeeright.more) %>

<% } %>

<%: Html.ActionLink("Back to List", "Index") %>

Services:

using System;
using System.Data;
using System.Collections;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using AjaxControlToolkit;
using System.Collections.Specialized;
using System.Data.SqlClient;
using website.Models;
using System.Linq;
namespace website.Services
{
///

/// Summary description for MainLandService
///

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
//http://www.cnblogs.com/timchiang/archive/2008/05/28/1208819.html 关于ajax toolkit中的下拉菜单method error 500问题
[System.Web.Script.Services.ScriptService]
public class MainLandService : System.Web.Services.WebService
{

//[WebMethod]
public MainLandService()
{
//return "Hello World";
}

[WebMethod]
public CascadingDropDownNameValue[] getright(string knownCategoryValues, string category)
{
// Split the knownCategoryValues on ":" with ";" delimiter
// For the first dropdownlist, the values will be "undefined: id of the dropdownelement"
// ex: "undefined: 13;"
// The string at index 1 will be the ontinentId selected in the dropdownlist.

string[] _categoryValues = knownCategoryValues.Split(':', ';');
// Convert the element at index 1 in the string[] to get the mainlandID
int menuid = Convert.ToInt32(_categoryValues[1]);

List<cascadingdropdownnamevalue> cascadingValues = new List<cascadingdropdownnamevalue>();
datamodelDataContext dm = new datamodelDataContext();
List<right> aa = dm.rights.AsQueryable().Where(a => a.menuid == menuid).ToList();
foreach (right b in aa)
{
cascadingValues.Add(new CascadingDropDownNameValue(b.code.ToString(),b.id.ToString()));
}
//if (cascadingValues.Count == 0)
//{
// cascadingValues.Add(new CascadingDropDownNameValue("中国", "000"));
//}
return cascadingValues.ToArray();
}
}
}

Controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using website.Models;
using website.ViewModels;
using website.Helpers;

namespace website.Controllers
{
public class EmployeerightController : Controller
{
//
// GET: /Employeeright/
datamodelDataContext dm = new datamodelDataContext();

public ActionResult Index()
{
return View(dm.employeerights.ToList());
}

//
// GET: /Employeeright/Details/5

public ActionResult Details(int id)
{
return View();
}

//
// GET: /Employeeright/Create

public ActionResult Create()
{

var employeerighttoadd = new EmployeerightViewModel
{
employeeright = new employeeright(),
companys = dm.companies.ToList(),
rights = dm.rights.ToList(),
employees = dm.employees.ToList(),
menus=dm.menus.AsQueryable().Where(a=>a.type==2).ToList()
};
return View(employeerighttoadd);
}

//
// POST: /Employeeright/Create

[HttpPost]
public ActionResult Create(FormCollection collection)
{
try
{
var aa=Request.Form.AllKeys.GetValue(6).ToString();

// TODO: Add insert logic here
var employeerighttoadd = new employeeright();
employeerighttoadd.companyid = int.Parse(Session["companyid"].ToString());
employeerighttoadd.rightid = int.Parse(aa);
TryUpdateModel(employeerighttoadd, "employeeright", new string[] {"rightid", "employeeid", "falg", "more","menuid","fieldname" }, collection.ToValueProvider());
if (ModelState.IsValid)
{
dm.employeerights.InsertOnSubmit(employeerighttoadd);
dm.SubmitChanges();
return RedirectToAction("Index");
}
return RedirectToAction("Index");
}
catch
{
return View();
}
}

//
// GET: /Employeeright/Edit/5

public ActionResult Edit(int id)
{
var employeerighttoedit = new EmployeerightViewModel
{
employeeright = dm.employeerights.Single(a=>a.id==id),
companys = dm.companies.ToList(),
rights = dm.rights.ToList(),
employees = dm.employees.ToList(),
menus = dm.menus.AsQueryable().Where(a => a.type == 2).ToList()
};
return View(employeerighttoedit);
}

//
// POST: /Employeeright/Edit/5

[HttpPost]
public ActionResult Edit(int id, FormCollection collection)
{
try
{
// TODO: Add update logic here
var employeerighttoedit =dm.employeerights.Single(a=>a.id==id);
TryUpdateModel(employeerighttoedit, "employeeright", new string[] { "rightid", "employeeid", "falg", "more", "menuid","fieldname" }, collection.ToValueProvider());
if (ModelState.IsValid)
{
dm.SubmitChanges();
return RedirectToAction("Index");
}
return RedirectToAction("Index");
}
catch
{
return View();
}
}

//
// GET: /Employeeright/Delete/5

public ActionResult Delete(int id)
{
return View();
}

//
// POST: /Employeeright/Delete/5

[HttpPost]
public ActionResult Delete(int id, FormCollection collection)
{
try
{
// TODO: Add delete logic here

return RedirectToAction("Index");
}
catch
{
return View();
}
}
}
}

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Different methods to call Web Services from AJAX

Introduction

Background

Using the code

Before AJAX

No JavaScript - Postback required to populate Label1

Using AJAX

Method 1

Using AJAX - Postback not required to populate Label1

Method 2

Using AJAX page method and the CascadingDropDown control from the Toolkit- Postback not required to populate the combo

Points of interest

License

Comments and Discussions

Create