Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > ASP/ASP.Net > Tạo Image Slider với Asp.net có sử dụng Image Upload Panel
Tạo Image Slider với Asp.net có sử dụng Image Upload Panel
Nguyễn Trung Hiếu
Share Code Web Company 2013

Tạo Image Slider với Asp.net có sử dụng Image Upload Panel

Bạn muốn cho website của mình thêm sinh động hơn với Image Slider nhưng không biết làm thế nào cho đơn giản. Vậy hãy theo dõi bài viết này, mình sẽ chỉ cho bạn.

Bắt tay vào code nào

Đầu tiên là để có thể tạo một image slider thì chúng ta phải sử dụng một jquery nào đó để giúp cho image hoạt động. Ở bài viết này của tác giả, chúng ta sử dụng Flex-Slider cho project Asp.net

Bước 1:

Thêm đoạn mã sau vào phần đầu của project

Bước 2:

Tiếp theo là thêm đoạn mã sau vào bên dưới

Khi đó chúng ta được
Image slider with asp.net

Bước 3:

Tiếp theo trong thẻ body, chúng ta thêm 2 thẻ div sau

Chú ý: runat=”server” phải có để có thể lấy dữ liệu từ file .cs

Bước 4:

Tạo một folder để chứa ảnh chúng ta upload lên. Ở đây đặt tên là BannerImage

Bước 5:

Tiếp theo là viết hàm load image để lấy đường dẫn ảnh, sau đó bind ra HTML ở bên ngoài

Đoạn code bên trên có sử dụng một biến là SiteBaseURL được định nghĩa như sau

Tiếp theo là viết thêm một số hàm làm nhiệm vụ check định dạng ảnh và hàm upload ảnh lên server cũng như thông báo lỗi như sau

Tổng kết

Nếu chưa hiểu, bạn có thể download 2 bộ code bên dưới đây để tham khảo cho project của mình, việc sử dụng linh hoạt code để tạo image slider cho linh động sẽ làm website thêm mượt mà và sinh động hơn. CHúc bạn thành công!

Download code demo

Bài viết được chia sẻ bởi
Sharecodeweb.net

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

http://sharecodeweb.net/?s={search_term_string}