(Cách tạo Slide động bằng file XML trong Asp.net) - Trong bài viết “Sử dụng Bootstrap để tạo Slide lấy dữ liệu từ SQL Server trong Asp.net”, thủ thuật lập trình đã giới thiệu với các bạn cách tạo Slide lấy dữ liệu từ SQL Server có sử dụng các thư viện Boottrap. Hôm nay thủ thuật lập trình sẽ giới thiệu cách tạo các Slide được lấy dữ liệu từ file XML. Với việc sử dụng Data bằng file XML sẽ giúp người lập trình thuận tiện hơn trong việc phát triển cũng như triển khai.
- B1: Tạo File XML Carousels có cấu trúc phía dưới và đặt file trong thư mục App_Data
<?xml version="1.0" standalone="yes"?>
<root>
<items>
<Title>Slide 1</Title>
<Description>First slide label</Description>
<URL></URL>
<CarouselImage></CarouselImage>
<SortOrder>1</SortOrder>
<IsVisible>1</IsVisible>
</items>
<items>
<Title>Slide 2</Title>
<Description>
Second slide label
</Description>
<URL></URL>
<CarouselImage></CarouselImage>
<SortOrder>2</SortOrder>
<IsVisible>1</IsVisible>
</items>
<items>
<Title>Slide 3</Title>
<Description>
Third slide label
</Description>
<URL></URL>
<CarouselImage></CarouselImage>
<SortOrder>3</SortOrder>
<IsVisible>1</IsVisible>
</items>
<items>
<Title>Slide 4</Title>
<Description>
Four slide label
</Description>
<URL></URL>
<CarouselImage></CarouselImage>
<SortOrder>4</SortOrder>
<IsVisible>1</IsVisible>
</items>
<items>
<Title>Slide 5</Title>
<Description>
Five slide label
</Description>
<URL></URL>
<CarouselImage></CarouselImage>
<SortOrder>5</SortOrder>
<IsVisible>1</IsVisible>
</items>
</root>
- B4: Mở file Site.Master dưới dạng HTML, nhập thêm các thông tin phía dưới thẻ <head runat="server">
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style type="text/css">
h2{
margin: 0;
color: #666;
padding-top: 90px;
font-size: 52px;
font-family: "trebuchet ms", sans-serif;
}
.item{
background: #333;
text-align: center;
height: 300px !important;
}
.carousel{
margin-top: 20px;
}
.bs-example{
margin: 20px;
}
</style>- B5: Mở file Default.aspx dưới dạng HTML và bổ xung Control <asp:Label ID="lblCarousels" runat="server"></asp:Label>
- B6: Viết Code cho file Default.aspx
C# Code
//Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials
using Microsoft.VisualBasic;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using System.IO;
using System.Diagnostics;
using System.Web.UI;
using System.Web;
namespace BootstrapCarousel
{
public partial class _Default : System.Web.UI.Page
{
#region"Create Carousel"
private voidCreateCarousel()
{
DataSet objBind = newDataSet();
int iCount = 0;
int i = 0;
objBind = BindData();
if (objBind != null)
{
if (objBind.Tables[0].Rows.Count > 0)
{
iCount = objBind.Tables[0].Rows.Count;
lblCarousels.Controls.Add(new LiteralControl("<div class=\"bs-example\">"));
lblCarousels.Controls.Add(new LiteralControl("<div id=\"myCarousel\" class=\"carousel slide\" data-interval=\"3000\" data-ride=\"carousel\">"));
lblCarousels.Controls.Add(new LiteralControl("<!-- Carousel indicators -->"));
lblCarousels.Controls.Add(new LiteralControl("<ol class=\"carousel-indicators\">"));
for (i = 0; i <= iCount; i++)
{
//Active
if (i == 0)
{
lblCarousels.Controls.Add(new LiteralControl("<li data-target=\"#myCarousel\" data-slide-to=" + i + " class=\"active\"></li>"));
}
else
{
lblCarousels.Controls.Add(new LiteralControl("<li data-target=\"#myCarousel\" data-slide-to=" + i + "></li>"));
}
}
lblCarousels.Controls.Add(new LiteralControl("</ol>"));
lblCarousels.Controls.Add(new LiteralControl("<!-- Carousel items -->"));
lblCarousels.Controls.Add(new LiteralControl("<div class=\"carousel-inner\">"));
i = 0;
foreach (DataRowrow in objBind.Tables[0].Rows)
{
//Active
if (i == 0)
{
lblCarousels.Controls.Add(new LiteralControl("<div class=\"active item\">"));
}
else
{
lblCarousels.Controls.Add(new LiteralControl("<div class=\"item\">"));
}
//==============Title===============
lblCarousels.Controls.Add(new LiteralControl("<h2>"));
lblCarousels.Controls.Add(new LiteralControl(row["Title"].ToString()));
lblCarousels.Controls.Add(new LiteralControl("</h2>"));
//==========Description=============
lblCarousels.Controls.Add(new LiteralControl("<div class=\"carousel-caption\">"));
lblCarousels.Controls.Add(new LiteralControl(row["Description"].ToString()));
lblCarousels.Controls.Add(new LiteralControl("</div>"));
lblCarousels.Controls.Add(new LiteralControl("</div>"));
i = i + 1;
}
lblCarousels.Controls.Add(new LiteralControl("</div>"));
//Carousel nav
lblCarousels.Controls.Add(new LiteralControl("<!-- Carousel nav -->"));
//Left
lblCarousels.Controls.Add(new LiteralControl("<a class=\"carousel-control left\" href=\"#myCarousel\" data-slide=\"prev\">"));
lblCarousels.Controls.Add(new LiteralControl("<span class=\"glyphicon glyphicon-chevron-left\"></span>"));
lblCarousels.Controls.Add(new LiteralControl("</a>"));
//Right
lblCarousels.Controls.Add(new LiteralControl("<a class=\"carousel-control right\" href=\"#myCarousel\" data-slide=\"next\">"));
lblCarousels.Controls.Add(new LiteralControl("<span class=\"glyphicon glyphicon-chevron-right\"></span>"));
lblCarousels.Controls.Add(new LiteralControl("</a>"));
lblCarousels.Controls.Add(new LiteralControl("</div>"));
lblCarousels.Controls.Add(new LiteralControl("</div>"));
}
}
}
private DataSetBindData()
{
DataSet objBind = newDataSet();
objBind.ReadXml(Server.MapPath("App_Data\\Carousels.xml"));
return objBind;
}
#endregion
#region"Event Handles"
protected voidPage_Load(object sender, System.EventArgs e)
{
try
{
if (!IsPostBack)
{
CreateCarousel();
}
}
catch
{
}
}
#endregion
}
}
VB.NET Code
Namespace BootstrapCarousel
Public Class _Default
Inherits System.Web.UI.Page
#Region "Create Carousel"
Private SubCreateCarousel()
Dim objBind As New DataSet
Dim iCount As Integer = 0
Dim i As Integer = 0
objBind = BindData()
If Not objBind Is Nothing Then
If objBind.Tables(0).Rows.Count > 0 Then
iCount = objBind.Tables(0).Rows.Count
lblCarousels.Controls.Add(New LiteralControl("<div class=""bs-example"">"))
lblCarousels.Controls.Add(New LiteralControl("<div id=""myCarousel"" class=""carousel slide"" data-interval=""3000"" data-ride=""carousel"">"))
lblCarousels.Controls.Add(New LiteralControl("<!-- Carousel indicators -->"))
lblCarousels.Controls.Add(New LiteralControl("<ol class=""carousel-indicators"">"))
For i = 0 ToiCount
'Active
If i = 0 Then
lblCarousels.Controls.Add(New LiteralControl("<li data-target=""#myCarousel"" data-slide-to="& i & " class=""active""></li>"))
Else
lblCarousels.Controls.Add(New LiteralControl("<li data-target=""#myCarousel"" data-slide-to="& i & "></li>"))
End If
Next
lblCarousels.Controls.Add(New LiteralControl("</ol>"))
lblCarousels.Controls.Add(New LiteralControl("<!-- Carousel items -->"))
lblCarousels.Controls.Add(New LiteralControl("<div class=""carousel-inner"">"))
For i = 0 ToiCount
Dim row As DataRow = objBind.Tables(0).Rows(i)
'Active
If i = 0 Then
lblCarousels.Controls.Add(New LiteralControl("<div class=""active item"">"))
Else
lblCarousels.Controls.Add(New LiteralControl("<div class=""item"">"))
End If
'==============Title===============
lblCarousels.Controls.Add(New LiteralControl("<h2>"))
lblCarousels.Controls.Add(New LiteralControl(row("Title").ToString))
lblCarousels.Controls.Add(New LiteralControl("</h2>"))
'==========Description=============
lblCarousels.Controls.Add(New LiteralControl("<div class=""carousel-caption"">"))
lblCarousels.Controls.Add(New LiteralControl("<h3>"))
lblCarousels.Controls.Add(New LiteralControl(row("Description").ToString))
lblCarousels.Controls.Add(New LiteralControl("</h3>"))
lblCarousels.Controls.Add(New LiteralControl("</div>"))
lblCarousels.Controls.Add(New LiteralControl("</div>"))
Next
lblCarousels.Controls.Add(New LiteralControl("</div>"))
'Carousel nav
lblCarousels.Controls.Add(New LiteralControl("<!-- Carousel nav -->"))
'Left
lblCarousels.Controls.Add(New LiteralControl("<a class=""carousel-control left"" href=""#myCarousel"" data-slide=""prev"">"))
lblCarousels.Controls.Add(New LiteralControl("<span class=""glyphicon glyphicon-chevron-left""></span>"))
lblCarousels.Controls.Add(New LiteralControl("</a>"))
'Right
lblCarousels.Controls.Add(New LiteralControl("<a class=""carousel-control right"" href=""#myCarousel"" data-slide=""next"">"))
lblCarousels.Controls.Add(New LiteralControl("<span class=""glyphicon glyphicon-chevron-right""></span>"))
lblCarousels.Controls.Add(New LiteralControl("</a>"))
lblCarousels.Controls.Add(New LiteralControl("</div>"))
lblCarousels.Controls.Add(New LiteralControl("</div>"))
End If
End If
End Sub
#End Region
#Region "Bind Data"
Private FunctionBindData() As DataSet
Dim objBind As DataSet = New DataSet()
objBind.ReadXml(Server.MapPath("App_Data\Carousels.xml"))
Return objBind
End Function
#End Region
#Region "Event Handles"
Protected SubPage_Load(ByVal sender AsObject, ByVal e As System.EventArgs) Handles Me.Load
Try
If Page.IsPostBack = False Then
CreateCarousel()
End If
Catch ex As Exception
End Try
End Sub
#End Region
End Class
End Namespace
Chạy Project, các bạn sẽ có một danh sách các slide được lấy từ file XML với các thông tin được lấy từ CSDL, người sử dụng có thể dễ dàng bổ xung hoặc chỉnh sửa thông tin cho các Slide nhanh chóng và dễ dàng hơn.
Chúc các bạn thành công!
Quang Bình
0 comments Blogger 0 Facebook
Post a Comment