Giới thiệu
Các trang web mà khách hàng thường yêu cầu chúng ta xây dựng phải có chứa thanh trượt hình ảnh trên trang chủ. Đây là yêu cầu phổ biến nhất của khách hàng ngày nay. Hôm nay tôi sẽ chia sẻ một hướng dẫn thú vị là binding hình ảnh với thanh trượt hình ảnh với control Upload Panel hình ảnh.
Nền tảng
Khi tính năng này là phổ biến để xây dựng trang web, chúng ta thấy rằng yêu cầu phổ biến để thay đổi thanh trượt hình ảnh trang nhà thường xuyên. Điều này có nghĩa là nếu chúng ta có một thanh trượt hình ảnh, chúng ta cần phải thay đổi mã để thêm hình ảnh nhiều hơn hoặc đổi tên chúng nếu những hình ảnh cần phải được thay thế. Đây là một công việc nhàm chán cho các lập trình viên. Vì vậy, tôi đã quyết định tải lên hình ảnh từ kết thúc trở lại và sau đó ràng buộc tất cả các hình ảnh đến các slide hình ảnh. Hôm nay tôi sẽ chỉ cách nào để giải quyết các vấn đề.
Các bước sử dụng code
Dưới đây là những bước đơn giản để giải quyết vấn đề.
Đầu tiên chúng ta cần phải tích hợp các thanh trượt hình ảnh. Có rất nhiều thanh trượt hình ảnh phổ biến. Trong số đó, tôi thích flexslider vì sự đáp ứng của nó và nó dễ dàng thực hiện.
Thực hiện theo các bước sau để tích hợp flex-slider với ASP.NET web projects.
Bước 1: Thêm các tập tin sau đây vào phần HEAD trang aspx.
<link href="css/flexslider.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2-min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.flexslider.js"></script>
Tập tin zip chứa các phần trên. Bạn tải về từ tài nguyên DNGAZ
Bước 2: Thêm các dòng code này vào dưới dòng code trên bước 1
<script type="text/javascript">
$(document).ready(function () {
InitializeImageSlider();
});
function InitializeImageSlider() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: true,
directionNav: true,
itemWidth: "100%",
itemHeight: 400
});
}
</script>
Dưới đây là phần bên trong thẻ HEAD:
Bước 3: Thêm các mã bên trong thẻ BODY.
<div>
<div id="divImageSlider" class="flexslider" runat="server">
</div>
</div>
Ở đây chúng ta có thể thấy thẻ div có class tên là "flexslider" đi kèm mặc định cho thanh trượt hình ảnh flex. ID qua đó chúng ta sẽ liên kết các hình ảnh từ các mã sau. Vì lý do này, chúng ta cần thêm runat="server" để truy cập vào div từ một trang cs..
Bước 4: Bây giờ thêm thư mục mới vào dự án và sau đó đặt tên cho nó là Upload. Trong thư mục bạn cũng có thể tạo thư mục với tên tùy ý. Ở đây tôi đặt tên nó là BannerImage .
Bây giờ chúng ta cần phải thêm mã từ trang cs. Để hoạt động thanh trượt.
Bước 5: Thêm mã sau đây vào trang cs.
Trong mã này, tôi đã nối các hình ảnh có sẵn từ thư mục "../Upload/BannerImage/". Trong bài viết, tôi đã sử dụng thanh trượt fleximage. Như flexslider, nó sử dụng <ul><li></li></ul>. Vì vậy, chúng ta chỉ cần thực hiện chuỗi như thế này và chèn vào chuỗi này là InnerHtml của div với id của nó.
Ở đây trong mã này, tôi vào thư mục ảnh sau đó chúng ta thêm các hình ảnh có sẵn với thẻ <img /> trong thẻ <li>. Theo đó, chúng ta sẽ nhận được một <li><img /></li> cho mỗi hình ảnh. Và chúng ta chỉ cần thêm thẻ <ul> . Thanh trượt đã sẵn sàng.
private void LoadImage()
{
try
{
string imagePath = "~/../Upload/BannerImage/";
string imageSource = SiteBaseUrl + "../Upload/BannerImage/";
string PhotoFilePath = Server.MapPath(imagePath);
string divSlider = @"<ul class='slides'>";
string fileSlide = string.Empty;
string fileName = string.Empty;
DirectoryInfo di = new DirectoryInfo(PhotoFilePath);
FileInfo[] rgFiles = di.GetFiles("*.*");
foreach (FileInfo fi in rgFiles)
{
fileSlide = @"<li><img src='";
fileSlide += imageSource + fi + "' /></li>";
divSlider += fileSlide;
}
divImageSlider.InnerHtml = divSlider + "</ul>";
}
catch (Exception ex)
{
//ShowErrorMsg("error", ex.Message);
}
}
Phương thức này sẽ cấu hình baseUrl và chúng ta có thể sử dụng phương thức này để xác định vị trí thư mục ảnh cho thanh trượt hình ảnh. Chúng ta fix cứng mã thư mục hình ảnh nếu chúng ta không sử dụng phương thức này, nhưng chúng ta sẽ lại cần phải sửa đổi mã nếu chúng ta thay đổi thư mục của thư mục dự án.
public static string SiteBaseUrl
{
get
{
//return ConfigurationManager.AppSettings["RootPath"].ToString();
string orginalUrl = HttpContext.Current.Request.Url.AbsoluteUri;
if (HttpContext.Current.Request.Url.Query.Length > 0)
orginalUrl = orginalUrl.Replace(HttpContext.Current.Request.Url.Query, string.Empty);
return orginalUrl.Replace(HttpContext.Current.Request.Url.AbsolutePath, string.Empty) +
((HttpContext.Current.Request.ApplicationPath == "/" ?
"" : HttpContext.Current.Request.ApplicationPath)) + '/';
}
}
Phần này để kiểm tra các tập tin hình ảnh hợp lệ chúng ta muốn thêm vào thư mục hình ảnh và lập map cột thư mục thực tế.
protected void btnUpload(object sender, EventArgs e)
{
if(CheckValidImage(fluImage))
{
fluImage.PostedFile.SaveAs(MapPath("~") + "/../Upload/BannerImage/" + fluImage.FileName);
ShowErrorMsg("success", "Image Uploaded Successfully");
}
}
private bool CheckValidImage(FileUpload FileUploadImage)
{
string contentType;
contentType = FileUploadImage.PostedFile.ContentType.ToLower();
if (contentType == "image/jpg" || contentType == "image/png" || contentType == "image/jpeg")
{
}
else
{
ShowErrorMsg("error", "Image format is not valid. Valid image formats are ( jpg, png, jpeg).");
return false;
}
return true;
}
Phần này dành cho việc thêm thông báo thành công / lỗi nếu bạn muốn hiển thị khi các tập tin hình ảnh được tải lên.
private void ShowErrorMsg(string _class, string _msg)
{
divMessage.Style.Value = "display:block;";
divMessage.Attributes.Add("class", _class);
divMessage.InnerHtml = _msg;
}