پیاده سازی گالری در ASP.NET

دراین مقاله ما قصد داریم بدون استفاده از پلاگین های مختلف مانند jQuery و.. که هر قسمت از گالری به صورت تصادفی و با ارتفاع های مختلف ایجاد میکنیم.

پیاده سازی گالری در ASP.NET

کد های صفحه 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 در صفحه اصلی قرار می دهیم  و در آخر خروجی برنامه:

شما میتوان به جای رنگها از عکس استفاده کنید.

 

فایل های ضمیمه
دانلود نسخه ی PDF این مطلب