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

3 Comments | 943 Views | Post by: Admin | Tags: Handling JSON Arrays returned from ASP.NET Web Services with jQuery


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();
    //}
}

 


Post Comments

if you have some suggestion, question, request on Handling JSON Arrays returned from ASP.NET Web Services with jQuery.

Please use the comment box to express your views.

 

Comments:

loading...