GrideView کنترلی برای نمايش اطلاعات دريافت شده از پايگاه داده های مختلف، در قالب جداول منظم و ساختار يافته است. در این مقاله با نحوه ساخت GrideView تودرتو به صورت مرحله به مرحله در ASP.NET آشنا می شویم.

این مثال از گریدویو تودرتو شامل دو کنترل gridview می باشد. یکی برای استان ها و دیگری برای شهرستان های آنها هستند.

شروع

ساخت بانک

ابتدا یک بانک اطلاعاتی با نام NestedGridDB ساخته و دو جدول زیر را برای آن بسازید.

جدول Iran_State که شامل استان ها می باشد.

    Create table Iran_State  
    (  
       S_id int identity(1,1) primary key,  
       S_code nvarchar(3),  
       S_name nvarchar(30)  
    )  

سپس جدول را با رکوردهای زیر مانند شکل پر نمایید.

جدول City که شامل شهرها می باشد.

    create table City  
    (  
       City_id int identity(1,1) primary key,  
       City_code nvarchar(3),  
       City_name nvarchar(30),  
       S_id int foreign key references Iran_state(S_id)  
    )  

سپس جدول را با رکوردهای زیر مانند شکل پر نمایید.

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

حال ویژوال استادیو را باز کرده و یک پروژه webform ایجاد نمایید.

کدهای css زیر برای استایل دادن به کنترل های گریدویو می باشند.

    <style type="text/css">  
        body  
        {  
            font-family: Times New Roman;  
            font-size: 10pt;  
        }  
        .Grid th  
        {  
            background-color: #DF7401;  
            color: White;  
            font-size: 10pt;  
            line-height:200%;  
        }  
        .Grid td  
        {  
            background-color: #F3E2A9;  
            color: black;  
            font-size: 10pt;  
            line-height:200%;  
            text-align:center;  
        }  
        .ChildGrid th  
        {  
            background-color: Maroon;  
            color: White;  
            font-size: 10pt;  
        }  
        .ChildGrid td  
        {  
            background-color: Orange;  
            color: black;  
            font-size: 10pt;  
            text-align:center;  
        }  
    </style>   

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

<div>  
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
    <script type="text/javascript">  
        function StateCity(input) {  
            var displayIcon = "img" + input;  
            if ($("#" + displayIcon).attr("src") == "../image/Detail.jpg") {  
                $("#" + displayIcon).closest("tr")  
                .after("<tr><td></td><td colspan = '100%'>" + $("#" + input)  
                .html() + "</td></tr>");  
                $("#" + displayIcon).attr("src", "../image/hide.jpg");  
            } else {  
                $("#" + displayIcon).closest("tr").next().remove();  
                $("#" + displayIcon).attr("src", "../image/Detail.jpg");  
            }  
        }  
    </script>  
</div> 

همچنین برای وصل شدن به بانک اطلاعاتی لازم است که رشته اتصال را نسبت به سیستم خود تنظیم نماییم.

    <add name="نام دلخواه" connectionString="Data Source=.;Initial Catalog=نام بانک اطلاعاتی;User ID=نام کاربری;Password=کلمه عبور" providerName="System.Data.SqlClient"/>

کدهای زیر برای ساخت گریدویو های تودرتو می باشد. گریدویویی که استان ها را نمایش می دهد GridState و گریدویویی که شهر ها را نمایش می دهد GridCity نامگذاری کردیم.

        <div>
            <asp:GridView ID="GridState" runat="server" AutoGenerateColumns="false" DataKeyNames="S_id"
                CssClass="Grid" OnRowDataBound="GridState_RowDataBound">
                <Columns>
                    <asp:TemplateField ItemStyle-Width="20px">
                        <ItemTemplate>
                            <a href="JavaScript:StateCity('div<%# Eval("S_id") %>');">
                                <img alt="City" id="imgdiv<%# Eval("S_id") %>" src="../image/Detail.jpg" />
                            </a>
                            <div id="div<%# Eval("S_id") %>" style="display: none;">
                                <asp:GridView ID="GridCity" runat="server" AutoGenerateColumns="false" DataKeyNames="S_id"
                                    CssClass="ChildGrid">
                                    <Columns>
                                        <asp:BoundField ItemStyle-Width="150px" DataField="City_code" HeaderText="کد شهر" />
                                        <asp:BoundField ItemStyle-Width="200px" DataField="City_name" HeaderText="نام شهر" />
                                    </Columns>
                                </asp:GridView>
                            </div>
                        </ItemTemplate>
                    </asp:TemplateField>

                    <asp:BoundField ItemStyle-Width="100px" DataField="S_Code" HeaderText="کد استان" />
                    <asp:BoundField ItemStyle-Width="150px" DataField="S_Name" HeaderText="نام استان" />
                </Columns>
            </asp:GridView>
        </div>