در این مقاله قصد داریم نشان دهیم که چگونه می توان از MVC Grid در پروژه های MVC خود استفاده کنیم. Grid های زیادی برای استفاده در MVC وجود دارند که بسیار کارآمد هستند . در اینجا قصد داریم از یکی از این ابزارها به نام MVC Grid استفاده کنیم که از Bootstrap و jQuery استفاده میکند.

در این مقاله قصد داریم نشان دهیم که چگونه می توان از  MVC Grid  در پروژه های  MVC خود استفاده کنیم.  Grid  های زیادی برای استفاده در  MVC وجود دارند که بسیار کارآمد هستند . در اینجا قصد داریم از یکی از این ابزارها به نام  MVC Grid  استفاده کنیم که از Bootstrap و jQuery  استفاده میکند. برای این کار لیستی از داده های داینامیک ایجاد خواهیم کرد و به  MVC Grid  خواهیم فرستاد.

با ایجاد یک پروژه  MVC شروع میکنیم.  پس از ایجاد پروژه ،  MVC Grid  را در پروژه خود نصب میکنیم. برای این کار به قسمت  Manage Nuget Pakage بروید. 

در پنجره باز شده  MVC Grid  را جستجو  و آن را نصب کنید.

  بعد از نصب آن می توانید فایل های reference  که اضافه شده اند را ببینید. همچنین دو  View  با نام های Grid.cshtml_ و  GridPager.cshtml_ و یک فایل  CSS و بعضی اسکریپتها را مشاهده میکنید.

همانطور که گفته شد  MVC Grid  برای طراحی از  Bootstrap  استفاده میکند ، پس لازم است که  Bootstrap  نیز به پروژه اضافه شود. باز هم به پنجره مدیریت  NuGet  رفته و این بار  Bootstrap  را جستجو کنید.

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

اکنون می توانیم کنترل جدیدی را با نام  HomeController  ایجاد کنیم. در این کنترلر مدلی را فراخوانی خواهیم کرد که بعضی داده های داینامیک را بازمیگرداند.

public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            Test t = new Test();
            var myList= t.GetData();
            return View(myList);
        }
    }

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

مدلی با نام  Test  ایجاد کرده و بعضی داده های داینامیک را با استفاده از حلقه For  و انتساب آنها به یک لیست در نظر میگیریم.

namespace AsyncActions.Models
{
    public class Test
    {
        public List<Customer> GetData()
        {
            try
            {
                List<Customer> cst = new List<Customer>();
                for (int i = 0; i < 100; i++)
                {
                    Customer c = new Customer();
                    c.CustomerID = i;
                    c.CustomerCode = "CST" + i;
                    cst.Add(c);
                }
                return cst;
            }
            catch (Exception)
            {
                throw new NotImplementedException();
            }

        }
    }
    public class Customer
    {
        public int CustomerID { get; set; }
        public string CustomerCode { get; set; }
    }
}

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

یک  view  از نوع  Strongly  را به صورت زیر ایجاد میکنیم.

اگر از  View  های  Strongly  استفاده کنید ،درون header  آن باید به صورت زیر تنظیم شود.

@model List

 ابتدا باید  reference  های مورد نیاز را در View قرار دهیم.  همچنین می توانید آنها را در فایل  Layout.cshtml قرار دهید.

<link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<link href="~/Content/Gridmvc.css" rel="stylesheet" />
<script src="~/Scripts/gridmvc.min.js"></script>

فضای نام  Grid  را نیز به صورت زیر در آن قرار می دهیم .

@using GridMvc.Html

برای اضافه کردن  MVC Grid  کدهای زیر را استفاده کنید. 

@Html.Grid(Model).Columns(columns =>
           {
               columns.Add(foo => foo.CustomerID).Titled
		("Customer ID").SetWidth(50).Sortable(true).Filterable(true);
               columns.Add(foo => foo.CustomerCode).Titled
		("Customer Code").SetWidth(50).Sortable(true).Filterable(true);
           }).WithPaging(20)

همانطور که میبینید از ستونهای  Customer.CustomerID  و  Customer.CustomerCode  استفاده کرده ایم.

خروجی به صورت زیر خواهد بود.