Home »

Hướng dẫn tạo Slideshow control với Jquery và XML trong asp.net

3 thg 9, 2013

Bài viết hướng dẫn bạn tạo một user control Slideshow trình diễn ảnh, sử dụng jquery và xml trong asp.net. Ứng dụng của bài này thì rất đa dạng và phong phú. Hy vọng có thể giúp ích cho việc lập trình của bạn.

Hướng dẫn tạo Slideshow control với Jquery và XML trong asp.net

Bài viết hướng dẫn bạn tạo một user control Slideshow trình diễn ảnh, sử dụng jquery và xml trong asp.net. Ứng dụng của bài này thì rất đa dạng và phong phú. Hy vọng có thể giúp ích cho việc lập trình của bạn.

Để làm được cái này, trước tiên bạn cần download những thứ sau:
  • Simple Gallery
  • Reading XML with Jquery
  • jquery 1.3.2
Sau khi download xong bạn để vào thư mục như bên dưới:

I. SlideShow.ascx.cs
Đầu tiên bạn thêm một user control mới, và đặt tên là Slideshow. Trong code behind bạn thêm một thuộc tính như sau:
?
1
2
3
4
5
//slide div
public string WrapperID
{
get { return this.ClientID + "Div"; }
}
WrapperID sẽ trả về giá trị ID của user control. Với mỗi lần bạn thực hiện kéo thả user control này vào trong website của bạn thì nó sẽ tự động tạo ra trường ID này. Ví dụ bạn tạo tag name của user control là “SlideShow”, thì WrapperId sẽ trả về giá trị là SlideShow1Div, SlideShow2Div…..
?
1
2
3
4
5
6
7
8
9
10
11
12
13
private int _width =728;
[DefaultValue(728)]
public int Width
{
set { this._width = value; } get { return this._width; }
}
//height of the slide
private int _height = 95;
[DefaultValue(95)]
public int Height
{
set { this._height = value; }  get { return this._height; }
}
Thêm thuộc tính wight và height cho phép user control có thể được điều chỉnh độ rộng, độ cao tùy ý.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// autoplay true|false
private bool _autoPlay = true;
[DefaultValue(true)]
public bool AutoPlay
{
get { return this._autoPlay; }  set { this._autoPlay = value; }
}
// Show Navigation Control true|false
private bool _showNavigation = true;
[DefaultValue(true)]
public bool ShowNavigation
{
get { return this._showNavigation; } set{ this._showNavigation = value; }
}
private int _delay_btw_slide = 10000;
/// delay between slide in miliseconds
[DefaultValue(10000)]
public int Delay_btw_slide
{
set { this._delay_btw_slide = value; }   get { return this._delay_btw_slide; }
}
private int _fadeDuration = 2000;
/// transition duration (milliseconds)
[DefaultValue(2000)]
public int FadeDuration
{
set { this._fadeDuration = value; }  get { return this._fadeDuration; }
}
private int _cycles_before_stopping = 99;
/// cycles befote stopping
[DefaultValue(99)]
public int Cycles_before_stopping
{
set { this._cycles_before_stopping = value; }
get { return this._cycles_before_stopping; }
}
// previous button
private string _btnPrevious = "~/images/previous.gif";
[Category("Appearance"), Localizable(true)]
[Description("Previous button"),
DefaultValue("~/images/previous.gif"), Bindable(true)]
[Editor("System.Web.UI.Design.ImageUrlEditor,
System.Design, Version=2.0.0.0, Culture=neutral,
PublicKeyToken=b03f5f7f11d50a3a", typeof(UITypeEditor))]    [UrlProperty]
public string BtnPrevious
{
get { return this._btnPrevious; } set { this._btnPrevious = value;}
}
// Next button
// Play button
// Pause button
  • AutoPlay – true = tự khởi động slideshow
  • ShowNavigation – true = cho phép hiển thị 2 nút prev và next
  • Delay_btw_slide = cho phép thiết lập chế độ delay giờ 2 lần load ảnh
  • FadeDuration = cho phép thời gian 1 bức ảnh chạy
  • Cycles_before_stopping = số vòng xoay của 1 bức ảnh
  • BtnPrevious, BtnNext, BtnPlay, BtnPause = Các nút điều khiển slideshow
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//xml file
private string _xmlSource = "~/xml/sites.xml";
[UrlProperty]
[Bindable(true)]
[DefaultValue("~/xml/sites.xml")]
public string XMLSource
{
get { return this._xmlSource; } set { this._xmlSource = value; }
}
//xPath
private string _xPath = "site";
[DefaultValue("site")]
public string xPath
{
get { return this._xPath; }  set { this._xPath = value; }
}
Thêm các thuộc tính để lấy đường dẫn file XML. Đường dẫn mặc định là ~/xml/sites.xml
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
void CreateScript()
{
StringBuilder ssScript = new StringBuilder(string.Empty);
string arrName = "myArray" + this.WrapperID;
//read XML
ssScript.Append("var " + arrName+ "= [];");
ssScript.Append("$(document).ready(function() {");
ssScript.Append(" $.ajax({");
ssScript.Append("type: \"GET\",");
ssScript.Append("url: '" + ResolveUrl(XMLSource) + "',");
ssScript.Append("cache: true,");
ssScript.Append("dataType: \"xml\",");
ssScript.Append("success: function(xml) {");
ssScript.Append("var count = 0;");
ssScript.Append("$(xml).find('" + xPath + "').each(function() {");
ssScript.Append(" var url = $(this).find('url').text();");
ssScript.Append("var target = $(this).find('target').text();");
ssScript.Append("var imageURL = $(this).find('imageURL').text();");
ssScript.Append("var alt = $(this).find('alt').text();");
ssScript.Append(arrName + "[parseInt(count)] =
new Array(imageURL, url, target, alt); ");
ssScript.Append("count++;");
ssScript.Append("});");
//slide-shows
ssScript.Append(" var mygallery"+this.WrapperID+" = new simpleGallery({");
ssScript.Append(" wrapperid: '" + this.ClientID +
"_" + this.WrapperID + "',");
//width/height of gallery in pixels.
//Should reflect dimensions of the images exactly
ssScript.Append("dimensions: [" + Width.ToString() +
","+ Height.ToString()+"],");
ssScript.Append("imagearray: "+arrName+","); //array of images
ssScript.Append("navimages: ['" + ResolveUrl(BtnPrevious) + "', '" +
ResolveUrl(BtnPlay) + "', '" + ResolveUrl(BtnNext) +
"', '" + ResolveUrl(BtnPause) + "'],");
ssScript.Append("showpanel: '" + ShowNavigation.ToString().ToLower() + "',");
ssScript.Append(" autoplay: [" + AutoPlay.ToString().ToLower() + "," +
Delay_btw_slide.ToString() + "," +
Cycles_before_stopping.ToString() + "],");
//[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
ssScript.Append(" persist: true,");
//transition duration (milliseconds)
ssScript.Append(" fadeduration:" + FadeDuration.ToString() + ",");
//event that fires when gallery has initialized/ ready to run
ssScript.Append(" oninit: function() {");
ssScript.Append("  },");
//event that fires after each slide is shown
ssScript.Append("  onslide: function(curslide, i) {");
//curslide: returns DOM reference to current
// slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection
//   being shown (0=1st image, 1=2nd etc)
ssScript.Append("   }");
ssScript.Append("  })");
ssScript.Append("  }");
ssScript.Append("   });");
ssScript.Append(" });");
ClientScriptManager jScript = Page.ClientScript;
jScript.RegisterClientScriptBlock(this.GetType(),
Guid.NewGuid().ToString(), ssScript.ToString(), true);
}
Sau đó, add thêm phương thức để bind javascript ra
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
void CreateDiv()
{
System.Web.UI.HtmlControls.HtmlGenericControl ssDivWrapper =
new System.Web.UI.HtmlControls.HtmlGenericControl("div");
ssDivWrapper.ID = this.WrapperID;
ssDivWrapper.Style.Add("background", "white none repeat scroll 0% 0%");
ssDivWrapper.Style.Add(HtmlTextWriterStyle.Overflow, "hidden");
ssDivWrapper.Style.Add(HtmlTextWriterStyle.Position, "relative");
ssDivWrapper.Style.Add(HtmlTextWriterStyle.Visibility, "visible");
ssDivWrapper.Style.Add(" -moz-background-clip", "border");
ssDivWrapper.Style.Add("-moz-background-origin", "padding");
ssDivWrapper.Style.Add("-moz-background-inline-policy", "continuous");
this.Controls.Add(ssDivWrapper);
}
Phương thức trên sẽ thực hiện bind tự động thẻ div ra mã HTML
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//load the javascript
internal void LoadJScript()
{
ClientScriptManager script = Page.ClientScript;
//prevent duplicate script
if (!script.IsStartupScriptRegistered(this.GetType(), "JQuerySlideShowJS"))
{
script.RegisterClientScriptBlock(this.GetType(), "JQuerySlideShowJS",
"<script src="%22%20+%20ResolveUrl%28%22%7E/" +
"SlideShowControl/js/jquery-1.3.2.min.js%22%29%20+" +
"%20%22" type="text/javascript"></script>");
}
if (!script.IsStartupScriptRegistered(this.GetType(), "SimpleGalleryJS"))
{
script.RegisterClientScriptBlock(this.GetType(), "SimpleGalleryJS",
"<script src="%22%20+%20ResolveUrl%28%22%7E/" +
"SlideShowControl/js/simplegallery.js%22%29%20+%20%22" type="text/" +
"javascript"></script>");
}
}
Phương thức này dùng để đăng ký script để có thể sử dụng 2 cái file js mà chúng ta đã down về.
II.simplegallery.js
Tôi sẽ không nêu ra các đoạn mã js trong bài viết này, bạn tự tạo ra hoặc có thể download mã ở cuối bài viết nhé.
III. Sử dụng code
Bạn sử dụng Slideshow control này một cách bình thường như bao control khác đó thêm đoạn mã sau vào chỗ nào mà bạn muốn nó hiển thị
?
1
<uc1:SlideShow ID="SlideShow2" runat="server" />

Sau đó tiền hành cài đặt các thuộc tính cho user Control này như dưới đây:

Vậy là xong. Chúng ta đã có một user control để sử dụng cho project của chúng ta rồi. Thật tuyệt phải không nào
Tags:

Comments[ 0 ]


Đăng nhận xét