Calling web
service from jquery ajax in asp.net
Arrange your file in solutions explorer in given below
manner.
File Hierarchy
wcUser.asmx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization;
using System.IO;
using System.Text;
using System.Web.Script.Services;
[WebService(Namespace
= "http://tempuri.org/")]
[WebServiceBinding(ConformsTo
= WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class wcUser : System.Web.Services.WebService
{
public List<User> objUser;
User user;
[WebMethod]
public string
HelloWorld()
{
return "Hello
World";
}
[WebMethod]
public List<User> getUserList()
{
try
{
objUser = new List<User>();
user= new User();
user.Username = "Manoj";
user.Password = "123";
objUser.Add(user);
user = new User();
user.Username = "Prashant";
user.Password = "456";
objUser.Add(user);
}
catch { }
return objUser;
}
}
Default.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"
src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
<script src="Scripts/Default.js"
type="text/javascript"></script>
</head>
<body style="margin:10px">
<form id="form1" runat="server"
autocomplete="off">
<div>
<table border="0" class="table-condensed"
cellpadding="0"
cellspacing="0">
<tr>
<td>
</td>
<td>
<asp:Button ID="btnWebService"
CssClass="btn
btn-danger" Text="Web Service" runat="server" />
</td>
</tr>
</table>
<hr />
<asp:GridView ID="gvUsers" runat="server" CssClass="table-condensed" HeaderStyle-BackColor="#3AC0F2"
HeaderStyle-ForeColor="White"
RowStyle-BackColor="#A1DCF2">
</asp:GridView>
</div>
<div>
<table id="gvUsersTable"
style="margin-left:10px;font-family:Courier New"
class="table-condensed
table-bordered">
</table>
</div>
</form>
</body>
</html>
User.cs
public class User
{
public string
Username { get; set;
}
public string
Password { get; set;
}
}
Default.js
$(function () {
$("[id*=btnWebService]").bind("click", function
() {
$(this).val("Please
Wait...");
$("#gvUsersTable").empty();
getUserListWebService();
$(this).attr('disabled',
'disabled');
return false;
});
});
function getUserListWebService() {
$.ajax({
type:
"POST",
contentType: "application/json;
charset=utf-8",
url: "WebService/wcUser.asmx/getUserList",
data:
"{}",
dataType: "json",
success: function (data) {
if (data.d.length > 0) {
$("#gvUsersTable").append("<tr
style='background-color:#3AC0F2'><th>UserName</th>
<th>Password</th><th>Delete</th></tr>");
for (var
i = 0; i < data.d.length; i++) {
$("#gvUsersTable").append("<tr><td>" +
data.d[i].Username + "</td><td>"
+ data.d[i].Password + "</td><td
align='center'>" + "<button
style='background-color:#F99292;border:0px none;border-radius:50px'
onclick='javascript:deleteUser(this.value);return false;' value='"
+ data.d[i].Username + "'>×</button>"
+ "</td></tr>");
}
}
resetForm();
},
error: function (request, status, error)
{ alert(request); alert(status); alert(error); }
});
}
function resetForm() {
//After Load
$("[id*=btnWebService]").removeAttr('disabled');
$("[id*=btnWebService]").val("Web Service");
}
Result:
No comments:
Post a Comment