ساخت یک GridView با استفاده از Grid.MVC

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

یکی از گزینه هایی که می توان برای نمایش داده های از آن استفاده نمود ، GridMVC می باشد که دارای امکانات خوبی از جمله :

صفحه بندی ، مرتب کردن بر اساس فیلد مورد نظر ، ایجاد فیلتر بر اساس مقدار و... می باشد .

در این مقاله قصد داریم به نحوه استفاده از Grid.MVC بپردازیم .

ابتدا یک پروژه جدید ایجاد (basic) نمایید . برای نمایش داده ها ابتدا نیاز به یک کلاس داریم پس کلاسی به اسم Client با مشخصات زیر ایجاد نمایید :

public class Client
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
}

در مرحله بعد یک کنترلر با اسم دلخواه (Client)  ایجاد نمایید . در کنترلری که ایجاد کردیم ابتدا یک لیست از کلاس Client ایجاد میکنیم و در متد Index کنترلر به View پاس می دهیم :

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 را جستجو کرده و بعد از یافتن ، آن را نصب نمایید .

Grid.MVC

همچنین به کتابخانه بوت استرپ هم نیاز خواهیم داشت ، پس از طریق NUget اقدام به دانلود این کتابخانه نمایید و آن را به پروژه خود اضافه نمایید :

bootstrap_package

بعد از نصب پکیج  Grid.Mvc دو View به پوشه shared مربوط به روت اصلی سایت اضافه خواهد شد :

Grid.Mvc

همچنین یک فایل CSS به اسم GridMvc به پوشه Content پروژه اضافه خواهد شد .

در صورتی که هنوز View مربوط به متد Index را ایجاد نکرده اید ، ابتدا View را ایجاد نمایید و موارد زیر را انجام دهید :

ابتدا

@using GridMvc.Html

 

به View اضافه نمایید ، همچنین رفرنس های زیر را جهت فایل های JS,CSS به قسمت Head پروزه اضافه نمایید :

 <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  زیر  استفاده خواهیم کرد :

 @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)

خروجی حاصل گرید به صورت زیر خواهد بود :

grid

از خصوصیات مهم این Html Helper :

Titled : عنوان ستون مورد نظر را تعیین میکند .

Filterable : برای فیلتر کردن گریدمورد استفاده قرار می گیرد ( در صورتی که ستون مورد نظر امکان فیلتر شدن داشته باشد) .

Sortable :  برای مرتب بندی مورد استفاده قرار می گیرد ( در صورتی که ستون مورد نظر امکان مرتب شدن داشته باشد) .

WithPaging : برای تعیین صفحه بندی مورد استفاده قرار می گیرد . عددی را برای نمایش تعداد رکورد در هر صفحه از ورودی می گیرد .


توسط : عثمان رحیمی  1 ماه قبل ، سه شنبه 15 اردیبهشت 1394 ساعت 02:33  2  2307

نظر شما برای ما مهم است و به ما در بهبود سایت کمک میکند.


ارسال نظر
  • نام (اختیاری ) :
  • پست الکترونیک :
  • توضیحات :

مطالب مرتبط

نظرات خوانندگان

کاربر مهمان (سینا)  در تاریخ : 5 ماه قبل ، یکشنبه 7 آذر 1395 ساعت 00:00

من این پکیج رو نصب می کنم ولی بعد از اجرا وقتی صفحه می خواد باز بشه این پیغام رو میده : Could not load file or assembly 'System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040) لطفاً اگه می دونید چطوری حل میشه کمک کنید. ممنون

کاربر مهمان (عثمان رحیمی)  در تاریخ : 5 ماه قبل ، سه شنبه 9 آذر 1395 ساعت 00:00

ورژن کتابخانه mvc شما چند است ؟