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

جمعه 25 تیر 1395

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

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

 

فایل های ضمیمه

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید