نحوه ایجاد یک اسلایدشو به صورت داینامیک
نویسنده: پویا امینی
تاریخ: ۱۳۹۱/۰۴/۱۵ ۱۷:۲۹
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
در این آموزش قصد دارم نحوه ایجاد یک Slideshow به صورت داینامیک را با ASP.NET طراحی کنم(منظور از ایجاد Slideshow به صورت داینامیک این است که عکسها را به صورت داینامیک از DB بخواند).
اولین گام این است که Plugin مورد نظر را دریافت کنید که من از پلاگین Orbit استفاده کرده ام
ابتدا یک DataBase با نام DynamicSlideShow ایجاد و یک جدول با ساختار زیر با نام Picturesدرون آن ایجاد میکنیم
گام بعدی ایجاد یک پروژه Asp.Net با زبان C# و اضافه کردن فایلهای پلاگین به پروژه و ایجاد یک Handler برای بازیابی دادهها از DB است. ساختار Solutionما باید به صورت زیر باشد
برای اینکه بتوانیم با DB ارتباط برقرار کنیم از EF استفاده میکنیم به همین منظور ابتدا یک Model به نام DynamicSlideShowModel ایجاد میکنیم
در ادامه برای واکشی رکوردهای موجود در جدول Pictures کدهای زیر را درون Handler مینویسیم
var ctx = new DynamicSlideShowEntities(); var list = ctx.Pictures.ToList(); string str = JsonConvert.SerializeObject(list); context.Response.Write(str);
در این کدها تنها نکتهای که احتیاج به توضیح دارد این است که ابتدا یک لیست از
رکوردها را از جدول Pictures
واکشی میکنیم و برای پاس دادن به کلاینت ما آنها را به فرمت Json تبدیل کرده ایم که برای تبدبل از
کنابخانه آماده Newtonsoft.Json.dll
استفاده کرده ایم
حال باید با استفاده از jQuery کدهای درون Handler را اجرا کنیم؛ برای همین منظور یک صفحه با نام default.aspx ایجاد کرده و کدهای زیر را درون آن مینویسیم
<head runat="server">
<title>Dynamic SlideShow</title>
<link href="CSS/orbit-1.2.3.css" rel="stylesheet" type="text/css" />
<script src="Script/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Script/jquery.orbit-1.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.ajax({
url: "Handler.ashx",
contentType: "application/json; charset=utf-8",
success: function (data) {
$.each(data, function (i, b) {
var str = '<img src="' + b.PicturePath + '" alt="' + b.PictureText + '"/>';
$("#featured").append(str);
});
$('#featured').orbit();
},
dataType: "json"
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="featured">
</div>
</form>
</body>
در اینجا ابتدا با استفاده از متد ajax کتابخانه jQuery کدهای درون Handler را اجرا کرده و به ازای هر المان موجود در جدول یک تگ img به صفحه اضافه میکنیم.
<div id="featured">
<img src="img1.jpg" alt="img1" />
<img src="img2.jpg" alt="img2" />
<img src="img3.jpg" alt="img3" />
</div>
$('#featured').orbit();
عالی بود.
پاینده باشین.
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
public class GallerySite
{
int iD;
public int ID
{
get { return iD; }
set { iD = value; }
}
string imagePath;
public string ImagePath
{
get { return imagePath; }
set { imagePath = value; }
}
string imageText;
public string ImageText
{
get { return imageText; }
set { imageText = value; }
}
public List<GallerySite> GetImage()
{
List<GallerySite> _Gallery = new List<GallerySite>() { };
SqlConnection cnn = new SqlConnection("Data Source=.;Initial Catalog=RoshanZamirDataBase;Integrated Security=True");
cnn.Open();
SqlCommand cmd = new SqlCommand("Select * From Gallery", cnn);
SqlDataReader datareadfewr = cmd.ExecuteReader();
if (datareadfewr.HasRows)
{
while (datareadfewr.Read())
{
_Gallery.Add(new GallerySite()
{
ID = Convert.ToInt32(datareadfewr["ID"]),
ImagePath = (string)datareadfewr["ImagePath"],
ImageText=(string)datareadfewr["ImageText"]
});
}
}
return _Gallery;
}
}
.................................................................................................................................
<link href="orbit-1.2.3.css" rel="stylesheet" />
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.orbit-1.2.3.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
url: "Handler.ashx",
contentType: "application/json; charset=utf-8",
success: function (data) {
$.each(data, function (i, b) {
var str = '<img src="' + b.ImagePath + '" alt="' + b.ImageText + '"/>';
$("#featured").append(str);
});
$('#featured').orbit();
},
dataType: "json"
});
});
</script>
...........................................................................................................................
Handler :
public class Handler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
var _Gallery = new GallerySite();
var List = _Gallery.GetImage();
string str = JsonConvert.SerializeObject(List);
context.Response.Write(str);
}
public bool IsReusable {
get {
return false;
}
}
}var str = '<img src="' + b.ImagePath + '" alt="' + b.ImageText + '"/>';