Follow Three Steps for Implementation
Step 1: Add below section to Head Tag
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function () {
//Use of Post Method
$(“input[id$=btnSearch]”).click(function () {
$(“#bindData”).html(“”);
var tableString = “”;
var tableHead = “<thead style=’background-color: orange;’><tr><th>ID </th><th>Name</th><th>Price</th><th>Actions</th></tr></thead>”;
var id = $(“input[id$=txtID]”).val();
var data = JSON.stringify({ “id”: id });
$(“#bindData”).html(“”);
$.ajax({
type: “POST”,
url: “WebService.asmx/GetRecords”,
data: data,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (res) {
if (res.d.length > 0) {
var results = eval(‘(‘ + res.d + ‘)’);
$.each(results, function (index, myObject) {
var id = myObject.id;
var name = myObject.name;
var price = myObject.price;
var strInner = GetElementDetail(id, name, price);
tableString = tableString + strInner;
});
$(“#bindData”).append(tableHead + tableString);
}
else {
alert(“No Results Found”);
}
},
error: function () {
alert(“Failed.”)
}
});
return false;
});
});
//Function For Create Table
function GetElementDetail(id, name, price) {
var detail = “<tr>”;
detail += “<td>”;
detail += “” + id + “</td>”;
detail += “<td>”;
detail += “” + name + “</td>”;
detail += “<td>”;
detail += “” + price + “</td>”;
detail += “<td>”;
detail += “” + “<a href=’javascript:Edit(” + id + “)’ title=’Edit Item’ >Edit</a><a href=’javascript:Delete(” + id + “)’ title=’Delete Item’ onclick=’javascript:if(!confirm(\”Are you sure you want to delete ?\”)) return false’ >Delete</a></td>”;
detail += “</tr>”;
return detail;
}
//Use of Get Method
function GetAllRecords() {
$(“#bindData”).html(“”);
var tableString = “”;
var tableHead = “<thead style=’background-color: orange;’><tr><th>ID </th><th>Name</th><th>Price</th><th>Actions</th></tr></thead>”;
$.ajax({
type: “GET”,
dataType: “json”,
url: “WebService.asmx/GetAllRecord”,
data: “{null}”,
contentType: “application/json; charset=utf-8”,
success: function (data) {
if (data.d.length > 0) {
var results = eval(‘(‘ + data.d + ‘)’);
$.each(results, function (index, myObject) {
var id = myObject.id;
var name = myObject.name;
var price = myObject.price;
var strInner = GetElementDetail(id, name, price);
tableString = tableString + strInner;
});
$(“#bindData”).append(tableHead + tableString);
}
else {
alert(“No Results Found”);
}
},
error: function () {
alert(“Failed”);
return false;
}
});
return false;
}
function Edit(obj) {
alert(“Perform Edit Operation by ID ” + obj + “”)
}
function Delete(obj) {
alert(“Perform Delete Operation by ID” + obj + “”);
}
</script>
Step 2: Add below section to Design Page or Aspx Page
<div>
Get All Records
</div>
<div>
<input value=”GetRecords” onclick=”GetAllRecords();” type=”button” />
</div>
<div>
Search By UserID by 1,2,3,4,5
</div>
<div>
<asp:TextBox ID=”txtID” runat=”server”></asp:TextBox><asp:Button ID=”btnSearch” runat=”server”
Text=”Search” />
<div id=”bindData”>
</div>
</div>
Step 3: Add code to your Webservice or .asmx file
[WebService(Namespace = “https://dotnettricks-abdul.in”)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
public WebService()
{
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public string GetAllRecord()
{
// Add your operation implementation here
DataTable dt = GetProductDataTable();
List<GetDetails> objGet = new List<GetDetails>();
for (int i = 0; i < dt.Rows.Count; i++)
{
objGet.Add(new GetDetails()
{
id = Convert.ToInt32(dt.Rows[i][“ID”]),
name = dt.Rows[i][“NAME”].ToString(),
price = Convert.ToInt32(dt.Rows[i][“PRICE”])
});
}
System.Web.Script.Serialization.JavaScriptSerializer oSerializer =
new System.Web.Script.Serialization.JavaScriptSerializer();
string sJSON = oSerializer.Serialize(objGet);
return sJSON;
}
[WebMethod]
[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
public string GetRecords(int id)
{
DataTable dt = GetProductDataTable();
DataRow[] UserDetail = dt.Select(“ID=” + id);
List<GetDetails> objGet = new List<GetDetails>();
foreach (DataRow row in UserDetail)
{
objGet.Add(new GetDetails()
{
id = Convert.ToInt32(row[“ID”]),
name = row[“NAME”].ToString(),
price = Convert.ToInt32(row[“PRICE”])
});
}
System.Web.Script.Serialization.JavaScriptSerializer oSerializer =
new System.Web.Script.Serialization.JavaScriptSerializer();
string sJSON = oSerializer.Serialize(objGet);
return sJSON; ;
}
public struct GetDetails
{
public int id { get; set; }
public string name { get; set; }
public int price { get; set; }
}
public DataTable GetProductDataTable()
{
// Here we create a DataTable with three columns.
DataTable dtproduct = new DataTable();
dtproduct.Columns.Add(“ID”, typeof(int));
dtproduct.Columns.Add(“NAME”, typeof(string));
dtproduct.Columns.Add(“PRICE”, typeof(int));
// Here we add five DataRows.
dtproduct.Rows.Add(1, “Product1”, 100);
dtproduct.Rows.Add(2, “Product2”, 110);
dtproduct.Rows.Add(3, “Product3”, 120);
dtproduct.Rows.Add(4, “Product4”, 130);
dtproduct.Rows.Add(5, “Product5”, 140);
return dtproduct;
}
}
Download Code
Jquery WebService
