Handling JSON Arrays returned from ASP.NET Web Services with jQuery

Category > ASP.NET || Published on : Tuesday, November 3, 2015 || Views: 2269 || 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();
    //}
}