Implement dynamic content on web page using Web method in form of Json object

Introduction

Json is a lightweight interchange format, it is easily understood by human and machine also. Json is a platform independent data format, it is compatible for all platform, with the help of Ajax call, we will get Json object data through web method to create dynamic pages content without post back on server.

Here I am describing the details how to get Json object from asp.net web services which reduce the synchronous call load through asynchronous call.

Step 1: Create a property class as per requirement, for example here is an employee details class:

    public class EmployeeDetails  {

public string EmpId { get; set; }

public string EmpName { get; set; }

public string Gender { get; set; }

public string Department { get; set; }

      }

 Step 2: Create a Web-services in Asp.net and develop a web method, which is returning a Json object:

       [WebMethod]

public List<EmployeeDetails> GetEmployeeDetials() {

List<EmployeeDetails> EmpDetails = new List<EmployeeDetails>();

EmployeeDetails emp1 = new EmployeeDetails();

emp1.EmpId = “1”;

emp1.EmpName = “Harsh Verma”;

emp1.Gender = “Male”;

emp1.Department = “Tech”;

EmpDetails.Add(emp1);

EmployeeDetails emp2 = new EmployeeDetails();

emp2.EmpId = “2”;

emp2.EmpName = “Vishwadeep Maheshwari”;

emp2.Gender = “Male”;

emp2.Department = “Tech”;

EmpDetails.Add(emp2);

EmployeeDetails emp3 = new EmployeeDetails();

emp3.EmpId = “3”;

emp3.EmpName = “Manish”;

emp3.Gender = “Female”;

emp3.Department = “HR”;

EmpDetails.Add(emp3);

return EmpDetails;

}

 Step 3: Call Web method from Java-script script with help of Ajax call to get all employee details

<script  type=”text/javascript”>

$(document).ready(function () {

GetEmployeeDetials();

});

function GetEmployeeDetials() {

$.ajax({

url: ‘<%=ResolveUrl(“~/Service.asmx/GetEmployeeDetials”) %>’,

data: “{ }”,

dataType: “json”,

type: “POST”,

contentType: “application/json; charset=utf-8″,

success: function (data) {

CreateEmployeeSection(data.d);

},

error: function (response) {

alert(response.responseText);

},

failure: function (response) {

alert(response.responseText);

}

});

}

function CreateEmployeeSection(empValues){

var divEmpContianer = ‘<div class=”employeeContainer”>’;

divEmpContianer= divEmpContianer+'<div>EmpId</div>’;

divEmpContianer=divEmpContianer+'<div>EmpName</div>’;

divEmpContianer= divEmpContianer+'<div>Gender</div>’;

divEmpContianer= divEmpContianer+'<div>Department</div>’;

divEmpContianer = divEmpContianer + ‘</div>’;

for (var i = 0; i < empValues.length; i++) {

divEmpContianer = divEmpContianer + ‘<div class=”employeeContainer”>’;

divEmpContianer = divEmpContianer + ‘<div>’+empValues[i].EmpId+'</div>’;

divEmpContianer = divEmpContianer + ‘<div>’ + empValues[i].EmpName +

‘</div>’;

divEmpContianer = divEmpContianer + ‘<div>’ + empValues[i].Gender + ‘</div>’;

divEmpContianer = divEmpContianer + ‘<div>’ + empValues[i].Department +

‘</div>’;

divEmpContianer = divEmpContianer + ‘</div>’;

}

document.getElementById(‘divEmpdetials’).innerHTML = divEmpContianer;

}

</script>

Container div (divEmpdetials) will have all employee details which have sent from web services.

I think, This blog is helpful for you