استفاده از jQuery AJAX برای ارسال و دریافت اشیا JSON به روش وب سرویس در Asp.net
با سلام در این مقاله، نحوه ارسال و دریافت جاوا اسکریپت JSON به روش های وب با استفاده از jQuery AJAX در ASP.Net توضیح خواهیم داد.
کلاس شیء سفارشی
ابتدا یک کلاس ویژگی شهر ایجاد می کنیم که دو ویژگی ساده دارد :
1. نام - نام شهر
2. جمعیت - جمعیت شهر.
این کلاس به عنوان شی JSON برای ارسال و دریافت اطلاعات بین مشتری و سرور عمل می کند.
C #
public class City
{
private string name;
public string Name
{
get
{
return name;
}
set
{
name = value;
}
}
private int population;
public int Population
{
get
{
return population;
}
set
{
population = value;
}
}
}
VB.Net
Public Class City
Private _name As String
Public Property Name As String
Get
Return _name
End Get
Set(ByVal value As String)
_name = value
End Set
End Property
Private _population As Integer
Public Property Population As Integer
Get
Return _population
End Get
Set(ByVal value As Integer)
_population = value
End Set
End Property
End Class
کد HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<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://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script type="text/javascript">
$("#btnCity").live("click", function () {
var city = {};
city.Name = "Mumbai";
city.Population = 2000;
$.ajax({
type: 'POST',
url: 'MyPage.aspx/GetCity',
data: "{city:" + JSON.stringify(city) + "}",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (r) {
alert(r.d.Name);
alert(r.d.Population);
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id = "btnCity" value="Get City" />
</div>
</form>
</body>
</html>
در بالا، رویداد کلیک btnCity بر روی دکمه HTML ، ارتباط جی کوئری AJAX را به ASP.NET WebMethod GetCity می گیریم که یک شیء سفارشی JSON را با استفاده از 2 ویژگی (نام و جمعیت) می پذیرد. این تابع همچنین یک شی JSON از نوع شهر را با همان 2 ویژگی (نام و جمعیت) باز می کند.
کد Server side
در زیر روش های وب را شرح می دهیم که درخواست های دریافت شده توسط ارتباط جی کوئری AJAX را پردازش می کند.
C #
[System.Web.Services.WebMethod]
public static City GetCity(City city)
{
return city;
}
VB.Net
<System.Web.Services.WebMethod()> _
Public Shared Function GetCity(ByVal city As City) As City
Return city
End Function
روش های وب فوق به سادگی کلاس City را قبول می کنند و آن را به مشتری منتقل می کنند.
عکسها
در تصویر زیر نشان داده شده است که چگونه شی جاوا اسکریپت JSON به سرور از طریق جی کوئری AJAX ارسال شده توسط روش وب server side دریافت می شود.
در تصویر زیر نشان داده شده است که چگونه شی جاوا اسکریپت JSON از سرور از طریق رویداد موفقیت AJAX جی کوئری دریافت می شود.
