Dot Net Sea: call webservice using jquery

Thursday, 3 October 2013

call webservice using jquery

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CallWebService.aspx.cs" Inherits="CallWebService" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.5.1.js" type="text/javascript"></script>
<script src="jquery.xml2json.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function () { CallService(); });

function CallService() {

$.ajax({
url: "http://localhost/Service8sep2013/Service.asmx/HelloWorld",
type: 'post',
data: "{}",
contentType: 'text/xml;charset=utf-8',
dataType: 'xml',
success: function (amit) {
chkService(amit);
},
error: function (amit) {
chkService(amit);
}

});
}

function chkService(abc) {
//debugger;
var data = $.xml2json(abc); // we need to add this js file which will convert xml to json
FillEmployee(data.Employee);
// debugger;
}
function FillEmployee(EmpData) {
var table = "<table>"
+ "<tr>"
+ "<td style=width:100px;background-color:silver;color:navy;>Emp Id</td>"
+ "<td style=width:100px;background-color:silver;color:navy;>Emp Name</td>"
+ "<td style=width:100px;background-color:silver;color:navy;>Emp Salary</td>"
+ "<td style=width:100px;background-color:silver;color:navy;>Insertion</td>"
+ "</tr>";
var Row = "";
for (var indx in EmpData) {
Row += "<tr>"
+ "<td style=width:100px;background-color:silver;color:navy;>" +
EmpData[indx].EmpId + "</td>"
+ "<td style=width:100px;background-color:silver;color:navy;>" +
EmpData[indx].EmpName + "</td>"
+ "<td style=width:100px;background-color:silver;color:navy;>" +
EmpData[indx].EmpSalary + "</td>"
+ "<td style=width:100px;background-color:silver;color:navy;></td>"
+ "</tr>"
}
table += Row;

var RowFooter = "<tr>"
+ "<td style=width:100px;background-color:silver;color:navy;>" +
"<input id=txtEmpId type=text /> </td>"
+ "<td style=width:100px;background-color:silver;color:navy;>" +
"<input id=txtEmpName type=text /> </td>"
+ "<td style=width:100px;background-color:silver;color:navy;>" +
" <input id=txtEmpSalary type=text /> </td>"
+ "<td style=width:100px;background-color:silver;color:navy;>"
+ "<input id=btnSave onclick=saveData() type=button value=Save /> </td>"
+ "</tr>"
table += RowFooter;
table += "</table>";
$('#d1').html(table);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="d1" >

</div>
</form>
</body>
</html>

Dot Net Sea

Thursday, 3 October 2013

call webservice using jquery

No comments:

Post a Comment