ساخت یک GridView با استفاده از Grid.MVC
یکی از مواردی که در اکثر پروزه هایمان به آن نیاز خواهیم داشت ، نمایش داده ها به کاربر طبق یک ساختار مشخص می باشد . روش های مختلفی برای انجام این کار وجود دارد ، بعضی از برنامه نویسان اکثر اوقات ترجیح می دهند خود یک گرید بسازند و گرید را مطبق میل خود سفارشی بنویسند و بعضی دیگر از برنامه نویسان ترجیح می دهند از نمونه های اماده استفاده کنند .
یکی از گزینه هایی که می توان برای نمایش داده های از آن استفاده نمود ، GridMVC می باشد که دارای امکانات خوبی از جمله :
صفحه بندی ، مرتب کردن بر اساس فیلد مورد نظر ، ایجاد فیلتر بر اساس مقدار و… می باشد .
در این مقاله قصد داریم به نحوه استفاده از Grid.MVC بپردازیم .
ابتدا یک پروژه جدید ایجاد (basic) نمایید . برای نمایش داده ها ابتدا نیاز به یک کلاس داریم پس کلاسی به اسم Client با مشخصات زیر ایجاد نمایید :
|
1 2 3 4 5 6 |
public class Client { public int Id { get; set; } public string Name { get; set; } public string Email { get; set; } } |
در مرحله بعد یک کنترلر با اسم دلخواه (Client) ایجاد نمایید . در کنترلری که ایجاد کردیم ابتدا یک لیست از کلاس Client ایجاد میکنیم و در متد Index کنترلر به View پاس می دهیم :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
public class ClientController : Controller { private readonly List clients = new List() { new Client { Id = 1, Name = "Julio Avellaneda", Email = "julito_gtu@hotmail.com" }, new Client { Id = 2, Name = "Juan Torres", Email = "jtorres@hotmail.com" }, new Client { Id = 3, Name = "Oscar Camacho", Email = "oscar@hotmail.com" }, new Client { Id = 4, Name = "Gina Urrego", Email = "ginna@hotmail.com" }, new Client { Id = 5, Name = "Nathalia Ramirez", Email = "natha@hotmail.com" }, new Client { Id = 6, Name = "Raul Rodriguez", Email = "rodriguez.raul@hotmail.com" }, new Client { Id = 7, Name = "Johana Espitia", Email = "johana_espitia@hotmail.com" } }; public ActionResult Index() { return View(clients); } } |
برای استفاده از Grid.MVC می بایست پکیج آن را از Nuget دانلود و به پروژه اضافه نمایید . برای اینکار در Nuget عبارت Grid.Mvc را جستجو کرده و بعد از یافتن ، آن را نصب نمایید .
همچنین به کتابخانه بوت استرپ هم نیاز خواهیم داشت ، پس از طریق NUget اقدام به دانلود این کتابخانه نمایید و آن را به پروژه خود اضافه نمایید :
بعد از نصب پکیج Grid.Mvc دو View به پوشه shared مربوط به روت اصلی سایت اضافه خواهد شد :
همچنین یک فایل CSS به اسم GridMvc به پوشه Content پروژه اضافه خواهد شد .
در صورتی که هنوز View مربوط به متد Index را ایجاد نکرده اید ، ابتدا View را ایجاد نمایید و موارد زیر را انجام دهید :
ابتدا
|
1 |
@using GridMvc.Html |
به View اضافه نمایید ، همچنین رفرنس های زیر را جهت فایل های JS,CSS به قسمت Head پروزه اضافه نمایید :
|
1 2 3 4 |
<link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" /> <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" /> <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")"></script> <script src="@Url.Content("~/Scripts/gridmvc.min.js")"></script> |
و در پایان برای ایجاد گرید از HTML Helper زیر استفاده خواهیم کرد :
|
1 2 3 4 5 6 |
@Html.Grid(Model).Columns(columns => { columns.Add(c => c.Id).Titled("Client ID"); columns.Add(c => c.Name).Titled("Name").Filterable(true); columns.Add(c => c.Email).Titled("Email"); }).WithPaging(3).Sortable(true) |
خروجی حاصل گرید به صورت زیر خواهد بود :
از خصوصیات مهم این Html Helper :
Titled : عنوان ستون مورد نظر را تعیین میکند .
Filterable : برای فیلتر کردن گریدمورد استفاده قرار می گیرد ( در صورتی که ستون مورد نظر امکان فیلتر شدن داشته باشد) .
Sortable : برای مرتب بندی مورد استفاده قرار می گیرد ( در صورتی که ستون مورد نظر امکان مرتب شدن داشته باشد) .
WithPaging : برای تعیین صفحه بندی مورد استفاده قرار می گیرد . عددی را برای نمایش تعداد رکورد در هر صفحه از ورودی می گیرد .
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.