Sử dụng Bootstrap để tạo Slide lấy dữ liệu từ XML trong Asp.net
(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 void
CreateCarousel()
{
DataSet objBind = new
DataSet();
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 (DataRow
row 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 DataSet
BindData()
{
DataSet objBind = new
DataSet();
objBind.ReadXml(Server.MapPath("App_Data\\Carousels.xml"));
return objBind;
}
#endregion
#region
"Event Handles"
protected void
Page_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 Sub
CreateCarousel()
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 To
iCount
'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 To
iCount
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 Function
BindData() 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 Sub
Page_Load(ByVal sender As
Object, 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
Share This:
bạn oqi có thể giải thích không ạ
ReplyDelete