Category >
ASP.NET
|| Published on :
Tuesday, November 3, 2015 || Views:
2419
||
Handling JSON Arrays returned from ASP.NET Web Services with jQuery
Handling JSON Arrays returned from ASP.NET Web Services with jQuery
Step 1: Create a asp.net page with below codes:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="Manage_test_test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script type="text/javascript">
$(function () {
$('#Button1').click(getCars);
});
function getCars() {
$.ajax({
type: "POST",
url: "test.asmx/GetAllCars",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var cars = response.d;
$('#output').empty();
$.each(cars, function (index, car) {
$('#output').append('<p><strong>' + car.Make + ' ' +
car.Model + '</strong><br /> Year: ' +
car.Year + '<br />Doors: ' +
car.Doors + '<br />Colour: ' +
car.Colour + '<br />Price: £' +
car.Price + '</p>');
});
},
failure: function (msg) {
$('#output').text(msg);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" id="Button1" value="Get Cars" />
<div id="output"></div>
</form>
</body>
</html>
Step 2: Create a web service with the following codes:-
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
using System.Collections.Generic;
using System.Linq;
public class Car
{
public string Make;
public string Model;
public int Year;
public int Doors;
public string Colour;
public float Price;
}
/// <summary>
/// Summary description for CarService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class test : System.Web.Services.WebService
{
[WebMethod]
public List<Car> GetAllCars()
{
List<Car> Cars = new List<Car>{
new Car{Make="Audi",Model="A4",Year=1995,Doors=5,Colour="Red",Price=2995f},
new Car{Make="Ford",Model="Focus",Year=2002,Doors=5,Colour="Black",Price=3250f},
new Car{Make="BMW",Model="5 Series",Year=2006,Doors=4,Colour="Grey",Price=24950f},
new Car{Make="Renault",Model="Laguna",Year=2000,Doors=5,Colour="Red",Price=3995f},
new Car{Make="Toyota",Model="Previa",Year=1998,Doors=5,Colour="Green",Price=2695f},
new Car{Make="Mini",Model="Cooper",Year=2005,Doors=2,Colour="Grey",Price=9850f},
new Car{Make="Mazda",Model="MX 5",Year=2003,Doors=2,Colour="Silver",Price=6995f},
new Car{Make="Ford",Model="Fiesta",Year=2004,Doors=3,Colour="Red",Price=3759f},
new Car{Make="Honda",Model="Accord",Year=1997,Doors=4,Colour="Silver",Price=1995f}
};
Car newcar = new Car();
newcar.Make = "Merc";
newcar.Model = "M8";
newcar.Year = 2012;
newcar.Doors = 2;
newcar.Colour = "green";
newcar.Price = 20.3f;
Cars.Add(newcar);
return Cars;
}
//[WebMethod]
//public List<Car> GetCarsByDoors(int doors)
//{
// var query = from c in Cars
// where c.Doors == doors
// select c;
// return query.ToList();
//}
}