Different methods to call 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:

<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:

<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:

<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)

About the Author

Gyan Jadal

Architect

United States

Member

Software Architect

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

My vote of 5

Member 7689978

23:22 3 Dec '11

How to get the value of the dropdownlist and update the database

xrf_mail

23:59 31 Oct '10

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" %>

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

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Create

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

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

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 cascadingValues = new List();
datamodelDataContext dm = new datamodelDataContext();
List 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();
}
}
}
}