پیاده سازی گالری در ASP.NET
جمعه 25 تیر 1395دراین مقاله ما قصد داریم بدون استفاده از پلاگین های مختلف مانند jQuery و.. که هر قسمت از گالری به صورت تصادفی و با ارتفاع های مختلف ایجاد میکنیم.
کد های صفحه aspx
1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
2. <!DOCTYPE html>
3. <html xmlns="http://www.w3.org/1999/xhtml">
4.
5. <head runat="server">
6. <title></title>
7. <style>
8. .inner-tr td {
9. vertical-align: top;
10. }
11.
12. .one-tiles {
13. height: 170px !important;
14. background-color: #d77575;
15. }
16.
17. .two-tiles {
18. height: 130px !important;
19. background-color: #dcbc4c;
20. }
21.
22. .three-tiles {
23. background-color: #a3ca3b;
24. height: 300px !important;
25. }
26.
27. .four-tiles {
28. background-color: #3daee3;
29. height: 150px !important;
30. }
31.
32. .five-tiles {
33. background-color: #bb8ed8;
34. height: 270px !important;
35. }
36.
37. .six-tiles {
38. background-color: #baafb1;
39. height: 230px !important;
40. }
41. </style>
42. </head>
43.
44. <body>
45. <form id="form1" runat="server">
46. <div id="divmain" runat="server" class="box">
47. </div>
48. </form>
49. </body>
50.
51. </html>
در تصویر بالا ما در تگ head صفحه، شش کلاس با رنگ و ارتفاع گوناگون ایجاد کرده ایم و در سرور به آنها درسترسی داریم.
1. using System.Collections.Generic;
2. using System.Linq;
3. using System.Threading;
4. using System.Web;
5. using System.Web.UI;
6. using System.Web.UI.WebControls;
7. public partial class Default2: System.Web.UI.Page
8. {
9. protected void Page_Load(object sender, EventArgs e)
10. {
11. String strGallery = String.Empty;
12. strGallery = strGallery + "<table style='width:100%;height:800px; border-collapse: collapse;'><tr>";
13. for (Int32 i = 0; i < 5; i++)
14. {
15. strGallery = strGallery + "<td style='vertical-align: top;'><table style='width:100%;' cellspacing='1'>";
16. for (Int32 j = 0; j <= 5; j++)
17. {
18. Thread.Sleep(10);
19. Int32 rndnumber = RandomNumber();
20. String ClassName = String.Empty;
21. if (rndnumber == 1)
22. {
23. ClassName = "one-tiles";
24. }
25. else if (rndnumber == 2)
26. {
27. ClassName = "two-tiles";
28. }
29. else if (rndnumber == 3)
30. {
31. ClassName = "three-tiles";
32. }
33. else if (rndnumber == 4)
34. {
35. ClassName = "four-tiles";
36. }
37. else if (rndnumber == 5)
38. {
39. ClassName = "five-tiles";
40. }
41. else
42. {
43. ClassName = "six-tiles";
44. }
45. strGallery = strGallery + "<tr class='inner-tr'><td class='" + ClassName + "'></td></tr>";
46. }
47. strGallery = strGallery + "</table></td>";
48. }
49. strGallery = strGallery + "</tr></table>";
50. divmain.InnerHtml = strGallery;
51. }
52. public Int32 RandomNumber()
53. {
54. Random _r = new Random();
55. Int32 number = _r.Next(1, 7);
56. return number;
57. }
58. }
درکد بالا شما طریقه ایجاد گالری را مشاهده میکنید. ما جدول های داینامیکی را با استفاده از HTML ایجاد کرده ایم و یک رشته در آن قرار داده ایم و دو حلقه را ایجاد کرده ایم که یکی از آنها که حلقه For در نظر گرفته شده و آن وظیفه دارد تعداد ستون های جدول که میخواهیم نمایش دهیم را محاسبه می کتد و دیگری حلقه For است که تعداد سطر های گالری را محاصبه می کند.
ما یک تابع ایجاد کننده عدد که اعداد بین 1 تا 6 کلاس ها را به طور تصادفی با توجه به اعداد تصادفی و با استفاده از else if هربار یک عدد تصادفی تولید میکند. در اخر یک div با runat=server در صفحه اصلی قرار می دهیم و در آخر خروجی برنامه:
شما میتوان به جای رنگها از عکس استفاده کنید.
- ASP.net
- 2k بازدید
- 6 تشکر