barzin144
شنبه 26 بهمن 1392, 17:54 عصر
با سلام ، خودم خیلی وقت بود که دنبال استفاده از ajax بودم بعد از جستجو زیاد تونستم خودم یاد بگیرم خیلی ساده و خیلی سبک و کارآمد هست ایجکسِ جی کوئری .
برای شروع ما نیاز به یک صفحه اصلی که اجرا کننده ایجکس است و یه صفحه که فقط عملیاتی که ما میخوایم را انجام میده و خروجی را به ما میدهد که تو این روش خروجی را با فرمت Json به ما تحویل میدهد.
خوب اول با صفحه دوم شروع میکنیم این صفحه در بخش html با aspx هیچ کدی ندارد پس Code C# را بررسی میکنیم.
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;
using System.Web.Script.Services;
using System.Web.Script.Serialization;
public partial class Json : System.Web.UI.Page
{
public class Comment
{
public int ID { get; set; }
public string Name { get; set; }
public string CommentText { get; set; }
public string Image { get; set; }
}
[WebMethod()]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string TestJSON(string ID)
{
int idNum = Convert.ToInt32(ID);
DataSet.CommentDataTable oCommentDataTable =
new DataSet.CommentDataTable();
DataSetTableAdapters.CommentTableAdapter oCommentTableAdapter =
new DataSetTableAdapters.CommentTableAdapter();
oCommentTableAdapter.FillCommentById(oCommentDataT able, idNum);
Comment[] e = new Comment[oCommentDataTable.Count];
Random rnd = new Random();
for (int i = 0; i < oCommentDataTable.Count; i++)
{
e[i] = new Comment();
int Photo = rnd.Next(1, 9);
e[i].ID = oCommentDataTable[i].ID;
e[i].Image = "../Images/"+Photo+".png";
e[i].Name = oCommentDataTable[i].Name;
e[i].CommentText = oCommentDataTable[i].Comment;
}
return new JavaScriptSerializer().Serialize(e);
}
protected void Page_Load(object sender, EventArgs e)
{
}
}
اول از همه به using های System.Web.Services;System.Web.Script.Services;Sys tem.Web.Script.Serialization; دقت داشته باشید.
اسم این صفحه رو Json گذاشتم، برای گرفتن خروجی با فرمت Json باید برای خروجی کلاس بسازیم پس یه کلاس به اسم Comment ساختم که دقیقا همانند جدول دیتا بیسم است(به غیر از Image که کلا بهش توجه نکنید یه کار اضافه است که انجام دادم)
حالا تابعی که قرار است با ایجکس صدا زده بشه رو نوشتم (به دستورهای [WebMethod()] و [ScriptMethod(ResponseFormat = ResponseFormat.Json)] دقت کنید،خروجی تابع String است،به static هم دقت کنید) ورودی هم ID است که ID رو به این تابع میدهم و از دیتابیس همه رکورد هایی که ای دی شون از ورودی بیشتر است را در oCommentDataTable قرار میدهد، حالا به تعداد رکوردها شی از کلاس ساختم و مقادیر را از دیتابیس درش قرار دادم و در آخر خروجی رو به صورت Json برگردوندم.(return new JavaScriptSerializer().Serialize(e);)
فرمت Json اینجوریه: [{"ID":151,"Name":"barzin","CommentText":"salam","Image":"../Images/1.png"}]
خوب حالا میریم سراغ صفحه اصلی :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Json</title>
<script src="jquery-1.9.1.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
var idno = 0;
$(document).ready(function () {
testJson();
});
function testJson() {
$.ajax({
type: "POST",
url: "Json.aspx/TestJSON",
data: "{ID:" + idno + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var jsonobj = eval(msg.d);
var htmlvar="";
jQuery.each(jsonobj, function (rec) {
htmlvar += "<div class='Container'>" +
"<img class='Image' src=" + this.Image + " alt='Image'/>" +
"<div class='divText'><a class='Name'>" + this.Name+ "</a>"+
"<a class='Comment'>"+this.CommentText+"</a>"+
"</div>"+
"</div>";
});
$(".jsonDiv").after(htmlvar);
},
error: function (msg) {
}
});
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="jsonDiv">
</div>
</form>
</body>
</html>
در تابع testJson ایجکس رو صدا میزنیم، در قسمت url اسم صفحه و تابعی که قبلا نوشتیم رو قرار میدیم، data هم ای دی که قرار هست ورودی تابع TestJson اون صفحه مون باشه رو اینجوری مینویسیم، ID دقیقا همون جوری نوشته باید بشه که در ورودی تابع اون صفحه نوشتیم.
success: function (msg) وقتی ajax موفقیت امیز بود خروجی را در msg در اختیار ما میزاره حالا باید از فرمت Json خارجش کنیم و استایل بهش بدیم.
jQuery.each(jsonobj, function (rec) { به ازای هر رکوردی که در jsonobj باشه تکرار میشه.
حالا برای نمایش html ی که از خروجی ساختیم رو بعد از یک دیو که در صفحه هست قرار میدیم که میتونیم دقیقا جای اون دیو با دستور $(".jsonDiv").html(htmlvar); هم قرار بدیم. فقط قسمت هایی که توضیح دادم شما نیاز دارید تا تغییر بدهید بقیه کد میتونه مانند همین بمونه.
شما میتونید یک نمونه کامل رو اینجا (http://barzin.somee.com/) ببنید.
برای شروع ما نیاز به یک صفحه اصلی که اجرا کننده ایجکس است و یه صفحه که فقط عملیاتی که ما میخوایم را انجام میده و خروجی را به ما میدهد که تو این روش خروجی را با فرمت Json به ما تحویل میدهد.
خوب اول با صفحه دوم شروع میکنیم این صفحه در بخش html با aspx هیچ کدی ندارد پس Code C# را بررسی میکنیم.
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;
using System.Web.Script.Services;
using System.Web.Script.Serialization;
public partial class Json : System.Web.UI.Page
{
public class Comment
{
public int ID { get; set; }
public string Name { get; set; }
public string CommentText { get; set; }
public string Image { get; set; }
}
[WebMethod()]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string TestJSON(string ID)
{
int idNum = Convert.ToInt32(ID);
DataSet.CommentDataTable oCommentDataTable =
new DataSet.CommentDataTable();
DataSetTableAdapters.CommentTableAdapter oCommentTableAdapter =
new DataSetTableAdapters.CommentTableAdapter();
oCommentTableAdapter.FillCommentById(oCommentDataT able, idNum);
Comment[] e = new Comment[oCommentDataTable.Count];
Random rnd = new Random();
for (int i = 0; i < oCommentDataTable.Count; i++)
{
e[i] = new Comment();
int Photo = rnd.Next(1, 9);
e[i].ID = oCommentDataTable[i].ID;
e[i].Image = "../Images/"+Photo+".png";
e[i].Name = oCommentDataTable[i].Name;
e[i].CommentText = oCommentDataTable[i].Comment;
}
return new JavaScriptSerializer().Serialize(e);
}
protected void Page_Load(object sender, EventArgs e)
{
}
}
اول از همه به using های System.Web.Services;System.Web.Script.Services;Sys tem.Web.Script.Serialization; دقت داشته باشید.
اسم این صفحه رو Json گذاشتم، برای گرفتن خروجی با فرمت Json باید برای خروجی کلاس بسازیم پس یه کلاس به اسم Comment ساختم که دقیقا همانند جدول دیتا بیسم است(به غیر از Image که کلا بهش توجه نکنید یه کار اضافه است که انجام دادم)
حالا تابعی که قرار است با ایجکس صدا زده بشه رو نوشتم (به دستورهای [WebMethod()] و [ScriptMethod(ResponseFormat = ResponseFormat.Json)] دقت کنید،خروجی تابع String است،به static هم دقت کنید) ورودی هم ID است که ID رو به این تابع میدهم و از دیتابیس همه رکورد هایی که ای دی شون از ورودی بیشتر است را در oCommentDataTable قرار میدهد، حالا به تعداد رکوردها شی از کلاس ساختم و مقادیر را از دیتابیس درش قرار دادم و در آخر خروجی رو به صورت Json برگردوندم.(return new JavaScriptSerializer().Serialize(e);)
فرمت Json اینجوریه: [{"ID":151,"Name":"barzin","CommentText":"salam","Image":"../Images/1.png"}]
خوب حالا میریم سراغ صفحه اصلی :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Json</title>
<script src="jquery-1.9.1.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
var idno = 0;
$(document).ready(function () {
testJson();
});
function testJson() {
$.ajax({
type: "POST",
url: "Json.aspx/TestJSON",
data: "{ID:" + idno + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var jsonobj = eval(msg.d);
var htmlvar="";
jQuery.each(jsonobj, function (rec) {
htmlvar += "<div class='Container'>" +
"<img class='Image' src=" + this.Image + " alt='Image'/>" +
"<div class='divText'><a class='Name'>" + this.Name+ "</a>"+
"<a class='Comment'>"+this.CommentText+"</a>"+
"</div>"+
"</div>";
});
$(".jsonDiv").after(htmlvar);
},
error: function (msg) {
}
});
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="jsonDiv">
</div>
</form>
</body>
</html>
در تابع testJson ایجکس رو صدا میزنیم، در قسمت url اسم صفحه و تابعی که قبلا نوشتیم رو قرار میدیم، data هم ای دی که قرار هست ورودی تابع TestJson اون صفحه مون باشه رو اینجوری مینویسیم، ID دقیقا همون جوری نوشته باید بشه که در ورودی تابع اون صفحه نوشتیم.
success: function (msg) وقتی ajax موفقیت امیز بود خروجی را در msg در اختیار ما میزاره حالا باید از فرمت Json خارجش کنیم و استایل بهش بدیم.
jQuery.each(jsonobj, function (rec) { به ازای هر رکوردی که در jsonobj باشه تکرار میشه.
حالا برای نمایش html ی که از خروجی ساختیم رو بعد از یک دیو که در صفحه هست قرار میدیم که میتونیم دقیقا جای اون دیو با دستور $(".jsonDiv").html(htmlvar); هم قرار بدیم. فقط قسمت هایی که توضیح دادم شما نیاز دارید تا تغییر بدهید بقیه کد میتونه مانند همین بمونه.
شما میتونید یک نمونه کامل رو اینجا (http://barzin.somee.com/) ببنید.