در این مقاله قصد داریم آموزشی درباره ی نمایش اطلاعات به صورت تو در تو درگریدویو که قابلیت بسته شدن گریدویو داخلی نیز وجود دارد ر ابا استفاده ازMVC پیاده سازی کنیم

در این مقاله قصد داریم به نمایش اطلاعات به صورت تو در تو درگریدویو ،با استفاده ازMVC  بپردازیم

در مرحله اول ابتدا شروع به ساختن بانک اطلاعاتی در Sql Server  میکنیم
دراین مرحله پس از ایجاد بانک اطلاعاتی به نام TestDB یک جدول به نام Project ایجاد میکنیم
   

        [ProjectID] [int] IDENTITY(1,1) NOT NULL,  
        [ProjectName] [nvarchar](50) NULL,  
        [ProjectLeader] [nvarchar](50) NULL,  
     CONSTRAINT [PK_Project] PRIMARY KEY CLUSTERED   
    (  
        [ProjectID] ASC  
    )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]  
    ) ON [PRIMARY]  
      
    GO  
    SET ANSI_PADDING OFF

حال در این مرحله جدول دیگری به نام Employee ایجاد میکنیم

 CREATE TABLE [dbo].[Employee](  
        [ID] [int] IDENTITY(1,1) NOT NULL,  
        [Name] [nvarchar](50) NULL,  
        [Email] [nvarchar](500) NULL,  
        [Country] [nvarchar](50) NULL,  
        [ProjectID] [int] NULL,  
     CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED   
    (  
        [ID] ASC  
    )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]  
    ) ON [PRIMARY]  
      
    GO  
    SET ANSI_PADDING OFF  
    GO  

و به صورت دستی در جدول خود داده  ثبت میکنیم

داده های ثبت شده در جدول Project:

و داده های ثبت شده در جدولEmployee:

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

حال دراین مرحله بایستی بانک اطلاعاتی خود را از طریق Add>NewItem>DO.NET Entity Data Model    به برنامه اضافه کنیم.

در این مرحله گزینه ADO.NET Entity Data Model  را انتخاب میکنیم

در این پارت از آموزش اسم بانک اطلاعاتی که در SQL ساخته ایم را  انتخاب میکنیم

در این مرحله با دو گزینه روبه رو هستیم که مفهوم کلی هر دو  آن  این است  که کلمه عبور و نام کاربری وارد شده  برای برقرای ارتباط با Sql Server (که در مرحله قبل انجام دادیم) را در   Connection stringایجاد کنم؟
که گزینه اول این اجازه را نمیدهد ولی در گزینه دوم این اجازه داده میشود و ما در این مرحله گزینه دوم را انتخاب میکنیم.
فقط این نکته را یادآوری کنم که  برای این که امکانات بالا در  Connection stringاضافه شود کافی است تیک گزینه Save Entity…زده شده باشد .

و در مرحله آخر جدول های مربوط به این بانک اطلاعلاتی را اضافه میکنیم

در این  تصویر جدول های اتخاب شده  را در ORM  مشاهده میکنیم

فقط این نکته را یاداوری کنم که درآخر یک بار برنامه را (Bulid (Ctrl+Alt+Bمیکنیم
 حال یک  روی پروژه راست کلیک کرده و یک کلاس به نام EmpProject ایجاد میکنیم

وکدهای زیر را داخل کلاس زیر اضافه میکنیم

    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
      
    namespace ShowingNestedDataDisplayInMVC4.Models  
    {  
        public class EmpProject  
        {  
            public Project project { get; set; }  
            public List<Employee> projectEmployee { get; set; }  
        }  
    }  

یک کنترلر از نوع Empty   ایجاد کرده و کد های زیر را داخل کنترلر مینویسیم

همان طور که از کد ها مشخص است ابتدا یک list از جنس EmpProject ایجاده کردیم  ویک نمونه برای برقراری ارتباط با بانک اطلاعاتی از مدل خود ساختیم

    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using System.Web.Mvc;  
    using ShowingNestedDataDisplayInMVC4.Models;  
      
    namespace ShowingNestedDataDisplayInMVC4.Controllers  
    {  
        public class ProjectController : Controller  
        {  
            //  
            // GET: /Project/  
            public ActionResult Index()  
            {  
                List<EmpProject> prjEMPReport = new List<EmpProject>();  
      
                // here MyDatabaseEntities is our data context  
                using (EmployeeProjectEntities dc = new EmployeeProjectEntities())  
                {  
                    var prjRecords = dc.Project.OrderByDescending(a => a.ProjectID);  
                    foreach (var i in prjRecords)  
                    {  
                        var empPrjDTL = dc.Employee.Where(a => a.ProjectID == (i.ProjectID)).ToList();  
                        prjEMPReport.Add(new EmpProject { project = i, projectEmployee = empPrjDTL });  
                    }  
                }  
                return View(prjEMPReport);  
            }  
        }  
    }  

حال در این مرحله یک View از جنس کلاس EmpProject  ایجاد میکنیم

.

و حال در این مرحله کد های زیر را در قسمت View  خود اضافه کنید

    @model IEnumerable<ShowingNestedDataDisplayInMVC4.Models.EmpProject>  
      
    @{  
        ViewBag.Title = "Displaying Data In Nested Grid View In MVC4";  
        WebGrid grid = new WebGrid(source: Model, canSort: false);  
    }  
      
    <style>  
        #gridT, #gridT tr {  
            border: 1px solid #0D857B;  
        }  
     
        #nestedT, #nestedT tr {  
            border: 1px solid #f3f3f3;  
        }  
     
        #nestedT {  
            margin: 0px 0px 0px 10px;  
            padding: 5px;  
            width: 95%;  
        }  
     
            #nestedT th {  
                font-size: 14px;  
                font-weight: bold;  
                background-color: green;  
            }  
      
        .recordHoverEffect {  
            cursor: pointer;  
        }  
      
            .recordHoverEffect:hover {  
                background-color: rgb(248, 242, 242);  
            }  
      
        .expandRecordRecord {  
            background-image: url(/Images/ShowHideImage.png);  
            background-position-x: -22px;  
            background-repeat: no-repeat;  
        }  
      
        .collapseRecordRecord {  
            background-image: url(/Images/ShowHideImage.png);  
            background-position-x: -2px;  
            background-repeat: no-repeat;  
        }  
    </style>  
    @section Scripts{  
        <script>  
            $(document).ready(function () {  
                var size = $("#main #gridT > thead > tr >th").size();  
                $("#main #gridT > thead > tr >th").last().remove();  
                $("#main #gridT > thead > tr").prepend("<th></th>");  
                $("#main #gridT > tbody > tr").each(function (i, el) {  
                    $(this).prepend(  
                            $("<td></td>")  
                            .addClass("expandRecord")  
                            .addClass("recordHoverEffect")  
                            .attr('title', "Show Hide Details")  
                        );  
      
      
                    var table = $("table", this).parent().html();  
      
                    $(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='" + (size - 1) + "'>" + table + "</td></tr>");  
                    $("table", this).parent().remove();  
      
                    $(".recordHoverEffect", this).live("click", function () {  
                        $(this).parent().closest("tr").next().slideToggle(100);  
                        $(this).toggleClass("expandRecord collapseRecord");  
                    });  
                });  
 
      
                $("#main #gridT > tbody > tr td.expandRecord").each(function (i, el) {  
                    $(this).toggleClass("expandRecord collapseRecord");  
                    $(this).parent().closest("tr").next().slideToggle(100);  
                });  
      
            });  
        </script>  
    }  
    <div id="main" style="padding: 25px; background-color: yellow;">  
        @grid.GetHtml(  
                    htmlAttributes: new { id = "gridT", width = "900px", style = "background-color:skyblue; color:blue; font-size:14pt; font-family:TimesNewRoman;" },  
                    columns: grid.Columns(  
                            grid.Column("project.ProjectID", "Project ID"),  
                            grid.Column("project.ProjectName", "Project Name"),  
                            grid.Column("project.ProjectLeader", "Project Leader"),  
      
                            grid.Column(format: (item) =>  
                            {  
                                WebGrid subGrid = new WebGrid(source: item.projectEmployee);  
                                return subGrid.GetHtml(  
                                    htmlAttributes: new { id = "nestedT", style = "background-color:red; color:white; font-size:12pt; font-family:verdana;" },  
                                    columns: subGrid.Columns(  
                                            subGrid.Column("ID", " Employee ID"),  
                                            subGrid.Column("Name", "Name"),  
                                            subGrid.Column("Email", "Email"),  
                                            subGrid.Column("Country", "Country")  
                                        )  
                                    );  
                            })  
                        )  
                    )  
    </div>  

و حال اگر از برنامه اجرا بگیریم با تصویر زیر روبه رومیشویم: