Suggested Videos
Part 65 - Check if username exists in database with ajax
Part 66 - How to suggest available username
Part 67 - Calling aspx page method using jquery
(追記) (追記ここまで)
In this video we will discuss, how to call WCF Service using jQuery AJAX
(追記) (追記ここまで)
We want to retrieve data from the following database table tblEmployee
consuming wcf service using jquery
The retrieved data should be displayed as shown below
jquery call wcf service example
Step 1 : Create SQL Server table and insert employee data
Step 2 : Create a stored procedure to retrieve employee data by ID
Step 3 : Create new asp.net web application project. Name it Demo.
Step 4 : Include a connection string in the web.config file to your database.
Step 5 : Add a class file to the project. Name it Employee.cs. Copy and paste the following code.
Step 6 : Add a new WCF Service (Ajax-enabled). Name it EmployeeService.svc. Copy and paste the following code.
Step 7 : Add an HTML page to the ASP.NET project. Copy and paste the following HTML and jQuery code
jQuery tutorial for beginners
Part 65 - Check if username exists in database with ajax
Part 66 - How to suggest available username
Part 67 - Calling aspx page method using jquery
(追記) (追記ここまで)
In this video we will discuss, how to call WCF Service using jQuery AJAX
(追記) (追記ここまで)
We want to retrieve data from the following database table tblEmployee
consuming wcf service using jquery
The retrieved data should be displayed as shown below
jquery call wcf service example
Step 1 : Create SQL Server table and insert employee data
Create table tblEmployee
(
Id int primary
key identity,
Name nvarchar(50),
Gender nvarchar(10),
Salary int
)
GO
Insert into tblEmployee values ('Mark', 'Male', 50000)
Insert into tblEmployee values ('Sara', 'Female', 60000)
Insert into tblEmployee values ('John', 'Male', 45000)
Insert into tblEmployee values ('Pam', 'Female', 45000)
GO
Step 2 : Create a stored procedure to retrieve employee data by ID
Create procedure spGetEmployeeById
@Id int
as
Begin
Select ID, Name, Gender, Salary
from tblEmployee
where ID = @Id
End
Step 3 : Create new asp.net web application project. Name it Demo.
Step 4 : Include a connection string in the web.config file to your database.
<addname="DBCS"
connectionString="server=.;database=SampleDB;integrated security=SSPI" />
Step 5 : Add a class file to the project. Name it Employee.cs. Copy and paste the following code.
namespace Demo
{
publicclassEmployee
{
publicint ID { get; set; }
publicstring Name { get; set; }
publicstring Gender { get; set; }
publicint Salary { get; set; }
}
}
Step 6 : Add a new WCF Service (Ajax-enabled). Name it EmployeeService.svc. Copy and paste the following code.
using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.ServiceModel;
using System.ServiceModel.Activation;
namespace Demo
{
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode =
AspNetCompatibilityRequirementsMode.Allowed)]
publicclassEmployeeService
{
[OperationContract]
publicEmployee GetEmployeeById(int employeeId)
{
Employee employee = newEmployee();
string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
using (SqlConnection con = newSqlConnection(cs))
{
SqlCommand cmd = newSqlCommand("spGetEmployeeById", con);
cmd.CommandType = CommandType.StoredProcedure;
SqlParameter parameter = newSqlParameter();
parameter.ParameterName = "@Id";
parameter.Value = employeeId;
cmd.Parameters.Add(parameter);
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
employee.ID = Convert.ToInt32(rdr["Id"]);
employee.Name = rdr["Name"].ToString();
employee.Gender = rdr["Gender"].ToString();
employee.Salary = Convert.ToInt32(rdr["Salary"]);
}
}
return employee;
}
}
}
Step 7 : Add an HTML page to the ASP.NET project. Copy and paste the following HTML and jQuery code
<html>
<head>
<scriptsrc="jquery-1.11.2.js"></script>
<scripttype="text/javascript">
$(document).ready(function () {
$('#btnGetEmployee').click(function () {
var empId = $('#txtId').val();
$.ajax({
url: 'EmployeeService.svc/GetEmployeeById',
method: 'post',
contentType: "application/json;charset=utf-8",
data: JSON.stringify({
employeeId: empId }),
dataType: 'json',
success: function (data) {
$('#txtName').val(data.d.Name);
$('#txtGender').val(data.d.Gender);
$('#txtSalary').val(data.d.Salary);
},
error: function (err) {
alert(err);
}
});
});
});
</script>
</head>
<bodystyle="font-family:Arial">
ID :
<inputid="txtId"type="text"style="width: 86px"/>
<inputtype="button"id="btnGetEmployee"value="Get
Employee"/>
<br/><br/>
<tableborder="1"style="border-collapse: collapse">
<tr>
<td>Name</td>
<td><inputid="txtName"type="text"/></td>
</tr>
<tr>
<td>Gender</td>
<td><inputid="txtGender"type="text"/></td>
</tr>
<tr>
<td>Salary</td>
<td><inputid="txtSalary"type="text"/></td>
</tr>
</table>
</body>
</html>
jQuery tutorial for beginners
No comments:
Post a Comment
It would be great if you can help share these free resources
[フレーム]