Wednesday, September 22, 2010

Call Web services From Javascript in ASP.NET

There is two ways to call web services in your web site using java-script(j Query).

I am writing an example for both:--

This is First Method :Need to include j Query Library file
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function()
{
/*First Method to retriving data*/
$.ajax({
type: "POST",
url: "EmployeeService.asmx/GetEmployeeList",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(list) {
$("#Something").append("<ul id='bullets'></ul>");
for (i = 0; i < list.d.length; i++) {
$("#bullets").append("<li>" + list.d[i].Title + " : " + list.d[i].FirstName + " : " + list.d[i].LastName + " : " + list.d[i].BirthDate + "</li>");
}
},
error: function(e) {
$("#Something").html("There is an error retriving records 1");
}
});
</script>

This is Second Method :-
Need to include j Query Library file
And jmsajax.js File
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"/>
<script src="Scripts/jquery.jmsajax.js" type="text/javascript"/>


<script type="text/javascript">
/*Second Method to retriving data*/
$.jmsajax({
url: "EmployeeService.asmx",
method: "GetEmployeeList",
dataType: "msjson",
success: function(list) {
$("#Something").append("<ul id='bullets'></ul>");
for (i = 0; i < list.length; i++) {
$("#bullets").append("<li>" + list[i].FirstName + " : " + list[i].LastName + " : " + list[i].BirthDate + "</li>");
}
},
error: function(e) {
$("#Something").html("There was an error retreiving records 2");
}
});


});
</script>

Common Content For Both Methods
This is common body content Need to place in your body section

<body>
<form id="form1" runat="server">
<div id="Something">
</div>
</form>
</body>

This is Web service must be in your project..

This is Webservice page (EmployeeService.asmx)

<%@ WebService Language="C#" CodeBehind="~/App_Code/EmployeeService.cs" Class="EmployeeService" %>

And in the Code file you need to create your own code for ex:-

I am coping the entire code file here

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;
using System.Web.Script.Services;
using System.Data;
using System.Data.SqlClient;

///
/// Summary description for EmployeeService
///

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class EmployeeService : System.Web.Services.WebService {

public EmployeeService () {

//Uncomment the following line if using designed components
//InitializeComponent();
}


[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
[System.Web.Services.WebMethod]
public List GetEmployeeList()
{
string Con = System.Configuration.ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
var empList = new List();
using (SqlConnection Sqlcon = new SqlConnection(Con))
{
Sqlcon.Open();

string Sql = "Select top 5 Title,FirstName,LastName,BirthDate from tblEmployee";
using (SqlCommand Sqlcmd = new SqlCommand(Sql, Sqlcon))
{
SqlDataReader Sqldr = Sqlcmd.ExecuteReader(CommandBehavior.CloseConnection);
if (Sqldr != null)
{
while (Sqldr.Read())
{
var emp = new Employee
{
Title = Sqldr.GetString(0),
FirstName = Sqldr.GetString(1),
LastName = Sqldr[2].ToString(),
BirthDate = Sqldr.GetDateTime(3)
};
empList.Add(emp);
}
}
return empList;
}
}
}

public class Employee
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string Title { get; set; }
public DateTime BirthDate { get; set; }
}
}

No comments:

Post a Comment