Step 1:- JavaScript Code
<script type="text/javascript">
function SearchById()
{
$.ajax({
type: "POST",
url: "Default.aspx/GetName",
data: '{Id:
"' + $("#txtSearchById").val()
+ '" }',
contentType: "application/json;
charset=utf-8",
dataType: "json",
success:
OnSuccess,
failure: function (response)
{
alert(response.d);
}
});
}
function OnSuccess(response)
{
if (response.d.length
> 0) {
$.each(response.d, function (index,
item) {
if (item.FirstName
!= null) {
$("#txtFName").val(item.FirstName);
$("#txtMName").val(item.MiddleName);
$("#txtLName").val(item.LastName);
}
else {
$("#txtFName").val("No
record Found!");
$("#txtMName").val("No
record Found!");
$("#txtLName").val("No
record Found!");
}
});
}
else {
$("#txtFName").val("No
record Found!");
$("#txtMName").val("No
record Found!");
$("#txtLName").val("No
record Found!");
}
}
</script>
Step
2:- Design Code
<table>
<tr>
<td>Search By
Id</td>
<td>
<asp:TextBox ID="txtSearchById" runat="server" ClientIDMode="Static" onkeyup="SearchById();"></asp:TextBox></td>
</tr>
<tr>
<td>First Name</td>
<td>
<asp:TextBox ID="txtFName" runat="server" ClientIDMode="Static"></asp:TextBox></td>
</tr>
<tr>
<td>Middle
Name</td>
<td>
<asp:TextBox ID="txtMName" runat="server" ClientIDMode="Static"></asp:TextBox></td>
</tr>
<tr>
<td>Last Name</td>
<td>
<asp:TextBox ID="txtLName" runat="server" ClientIDMode="Static"></asp:TextBox></td>
</tr>
</table>
Step
3:- Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Demo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Call
Server Side Function</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function SearchById()
{
$.ajax({
type: "POST",
url: "
Default.aspx/GetName",
data: '{Id:
"' + $("#txtSearchById").val()
+ '" }',
contentType: "application/json;
charset=utf-8",
dataType: "json",
success:
OnSuccess,
failure: function (response)
{
alert(response.d);
}
});
}
function OnSuccess(response)
{
if (response.d.length
> 0) {
$.each(response.d, function (index,
item) {
if (item.FirstName
!= null) {
$("#txtFName").val(item.FirstName);
$("#txtMName").val(item.MiddleName);
$("#txtLName").val(item.LastName);
}
else {
$("#txtFName").val("No
record Found!");
$("#txtMName").val("No
record Found!");
$("#txtLName").val("No
record Found!");
}
});
}
else {
$("#txtFName").val("No
record Found!");
$("#txtMName").val("No
record Found!");
$("#txtLName").val("No
record Found!");
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<table>
<tr>
<td>Search By
Id</td>
<td>
<asp:TextBox ID="txtSearchById" runat="server" ClientIDMode="Static" onkeyup="SearchById();"></asp:TextBox></td>
</tr>
<tr>
<td>First Name</td>
<td>
<asp:TextBox ID="txtFName" runat="server" ClientIDMode="Static"></asp:TextBox></td>
</tr>
<tr>
<td>Middle
Name</td>
<td>
<asp:TextBox ID="txtMName" runat="server" ClientIDMode="Static"></asp:TextBox></td>
</tr>
<tr>
<td>Last Name</td>
<td>
<asp:TextBox ID="txtLName" runat="server" ClientIDMode="Static"></asp:TextBox></td>
</tr>
</table>
</div>
</form>
</body>
</html>
Step
4:- Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
namespace Demo
{
public class Name
{
public string FirstName
{ get; set; }
public string MiddleName
{ get; set; }
public string LastName
{ get; set; }
}
public partial class Default :
System.Web.UI.Page
{
static DataTable dt;
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindData();
}
}
protected void BindData()
{
dt = new DataTable();
dt.Columns.Add("ID", typeof(int));
dt.Columns.Add("FirstName", typeof(string));
dt.Columns.Add("MiddleName", typeof(string));
dt.Columns.Add("LastName", typeof(string));
DataRow dr;
dr = dt.NewRow();
dr[0] = 1;
dr[1] = "Ravi";
dr[2] = "Ramprakash";
dr[3] = "Goel";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = 2;
dr[1] = "Gopal";
dr[2] = "Krishnan";
dr[3] = "Iyer";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = 3;
dr[1] = "Ramesh";
dr[2] = "Dwarika";
dr[3] = "Prasad";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = 4;
dr[1] = "Albert";
dr[2] = "Janny";
dr[3] = "D'Costa";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = 5;
dr[1] = "Sidharth";
dr[2] = "Sunil";
dr[3] = "Patel";
dt.Rows.Add(dr);
}
[WebMethod]
public static List<Name>
GetName(string Id)
{
List<Name>
listName = new List<Name>();
Name name
= new Name();
try
{
string expression
= "Id = '" + Id + "'";
DataRow[] dr =
dt.Select(expression);
for (int i =
0; i < dr.Count(); i++)
{
name.FirstName = dr[i].ItemArray[1].ToString();
name.MiddleName
= dr[i].ItemArray[2].ToString();
name.LastName = dr[i].ItemArray[3].ToString();
}
listName.Add(name);
}
catch (Exception ex)
{
ex.Message.ToString();
}
return listName;
}
}
}
Step
5:- Output
Step 6:-Explanation
type: "POST", =>
Request Type
url: " Default.aspx/GetName", =>
Page URL/Method Name
data: '{Id: "' +
$("#txtSearchById").val()
+ '" }', =>
Method Parameter Or Value
contentType: "application/json;
charset=utf-8",
dataType: "json",
success: OnSuccess, => Success Method
No comments:
Post a Comment