Once I knew how to call a webservice from javascript in ASP.NET (regardless of version). I've search google to check whether it's possible to pass an object as a parameter to webservice method. Indeed it is possible to do that, but I must make sure that the object should be simple enough without any business logic and with limited behaviour. The object known as Data Transfer Object or in short DTO. Now here's the step by step on how to do it.
1) Using Visual Studio 2008, create new web site. Select ASP.NET Web Site.
2) To create DTO object, add new class under App_Code folder. Lets name it as Student. Paste the code below.
using System;3) Create new webservice call MyWebService. Add System.Web.Script.Services namespace then add GenerateScriptType and ScriptService attribute to the webservice class. Notice that what I did here is almost the same as my previous post. The only extra code is at line 7 which is to expose Student class to javascript.
///
/// Summary description for Student
///
public class Student
{
public Student()
{
}
public string Id
{
get;
set;
}
public string Name
{
get;
set;
}
}
...4) Add two methods call GetStudents and TestSubmit. GetStudents method will return a list of students to the caller. Since I want to return it as a JSON object, I've set the ResponseFormat to JSON.
using System.Web.Script.Services;
///
/// Summary description for MyWebService
///
[GenerateScriptType(typeof(Student))]
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class MyWebService : System.Web.Services.WebService
{
...
}
...5) Go to Default.aspx, add ScriptManager (again another same step as my previous post in ASP.NET 2.0).
[WebMethod]
[ScriptMethod(ResponseFormat=ResponseFormat.Json)]
public List<Student> GetStudents()
{
var students = new List<Student>();
for (int x = 0; x < 10; x++)
{
students.Add(new Student
{
Id = x.ToString(),
Name = "Name" + x.ToString()
});
}
return students;
}
[WebMethod]
public string TestSubmit(Student student)
{
return String.Format("You've submitted Student object with Id: {0} and Name: {1}", student.Id, student.Name);
}
...6) Now add the html control
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference InlineScript="true" Path="~/MyWebService.asmx" />
</Services>
</asp:ScriptManager>
...
...7) and the javascript
<div>
<input id="btnLoad" type="button" value="Get Students" onclick="javascript:btnLoad_Click();" />
<input id="txtId" type="text" /><input id="txtName" type="text" />
<input id="btnSubmit" type="button" value="Submit" onclick="javascript:btnSubmit_Click();" />
<table id="myTable" border="1" cellpadding="1" cellspacing="1"></table>
</div>
...
...Now I have a web site that can call a webservice and passing an object as a parameter via javascript.
<script language="javascript" type="text/javascript">
function btnLoad_Click()
{
try
{
MyWebService.GetStudents(OnGetStudentsComplete);
}
catch(e)
{
alert("error " + e);
}
}
function OnGetStudentsComplete(result)
{
var htmlVal = "";
for(var x=0; x<result.length; x++)
{
htmlVal += "<tr><td>" + result[x].Id + "</td><td>" + result[x].Name + "</td></tr>";
}
$get("myTable").innerHTML = htmlVal;
}
function btnSubmit_Click()
{
try
{
var stu = new Student();
stu.Id = $get("txtId").value;
stu.Name = $get("txtName").value;
MyWebService.TestSubmit(stu, OnTestSubmitComplete);
var htmlVal = $get("myTable").innerHTML;
htmlVal += "<tr><td>" + stu.Id + "</td><td>" + stu.Name + "</td></tr>";
$get("myTable").innerHTML = htmlVal;
}
catch(e)
{
alert(e);
}
}
function OnTestSubmitComplete(result)
{
alert(result);
}
</script>
