Friday, June 11, 2010

JSON Calling from ASP.Net

HTML:

<body>
<form id="form1" runat="server">
No Of Doors :
<input id="txtNoOfDoor" type="text" /><br />
<input type="button" id="Button1" value="Get All Cars" />
<input type="button" id="Button2" value="Get Car By No Of Door" />
<div id="output">
</div>
</form>
</body>


Javascript:

<script type="text/javascript" language="javascript">
$(function() {
$('#Button1').click(getCars);
$('#Button2').click(getCarsByDoors);
});

function getCars() {
$.ajax({
type: "POST",
url: "CarService.asmx/GetAllCars",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var cars = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
$('#output').empty();
for (var i = 0; i < cars.length; i++) {
$('#output').append('<p><strong>' + cars[i].Make + ' ' +
cars[i].Model + '</strong><br /> Year: ' +
cars[i].Year + '<br />Doors: ' +
cars[i].Doors + '<br />Colour: ' +
cars[i].Colour + '<br />Price: £' +
cars[i].Price + '</p>');
}
},

failure: function(msg) {

$('#output').text(msg);

}
});
}

function getCarsByDoors() {
var data = '{doors: ' + $('#txtNoOfDoor').val() + ', Name : "Jayesh" }';
$.ajax({
type: "POST",
url: "CarService.asmx/GetCarsByDoors",
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var cars = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
$('#output').empty();
for (var i = 0; i < cars.length; i++) {
$('#output').append('<p><strong>' + cars[i].Make + ' ' +
cars[i].Model + '</strong><br /> Year: ' +
cars[i].Year + '<br />Doors: ' +
cars[i].Doors + '<br />Colour: ' +
cars[i].Colour + '<br />Price: £' +
cars[i].Price + '</p>');
}
},

failure: function(msg) {

$('#output').text(msg);

}
});
}

</script>


CarService.asmx:

/// <summary>
/// Summary description for CarService
/// </summary>
[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.
// [System.Web.Script.Services.ScriptService]
[ScriptService]
public class CarService : System.Web.Services.WebService
{
List<Car> objCarList = 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}
};

[WebMethod]
public List<Car> GetAllCars()
{
return objCarList;
}

[WebMethod]
public List<Car> GetCarsByDoors(int doors, string Name)
{
var query = from c in objCarList
where c.Doors == doors
select c;

return query.ToList();
}

[WebMethod]
public string GetAllCarsInString()
{
JavaScriptSerializer objJS = new JavaScriptSerializer();
return objJS.Serialize(objCarList);
}
}


Car Class:

public class Car
{
public string Make { get; set; }
public string Model { get; set; }
public int Year { get; set; }
public int Doors { get; set; }
public string Colour { get; set; }
public float Price { get; set; }
}

No comments: