در این مقاله به آموزش نمایش داده ها با استفاده از Grid MVC با قابلیت مرتب سازی داده ها خواهیم پرداخت.
ابتدا یک پروژه از نوع Empty mv با زبان C# ایجاد نمایید و نام آنرا UsingGridMvc قرار دهید.
سپس بر روی پروژه کلیک راست نمایید و گزینه Manage Nuget Packages را انتخاب نمایید .(با توجه به شکل زیر)
- Entity Framework را بر روی سیستم خود نصب نمایید.
- سپس grid.mvc را نصب نمایید.
- بر روی پوشه Controller کلیک راست نمایید و گزینه Add و سپس Controller را انتخاب نمایید.
- در مرحله بعد نام آنرا DisplayDataController انتخاب نمایید
پس از مشاهده کنترلر ایجاد شده بر روی اکشن index کلیک راست نمایید و گزینه Add view را انتخاب نمایید.
- بر روی پوشه Models کلیک راست نمایید و گزینه Add class را انتخاب نمایید و سپس نام کلاس را Person انتخاب نمایید.و محتویات کلاس را بصورت زیر ویرایش کنید.
namespace UsingGridMvc.Models
{
public class Person
{
public string Fname { get; set; }
public string Lname { get; set; }
public int Age { get; set; }
public DateTime Bdate { get; set; }
}
}
- محتویات اکشن index را بصورت زیر ویرایش نمایید
var person = new List<Person>();
var data1 = new Person
{
Fname = "mohammad",
Lname = "mahdavi",
Age = 34,
Bdate = DateTime.Parse("05/11/1982")
};
person.Add(data1);
var data2 = new Person
{
Fname = "Bill",
Lname = "Cuber",
Age = 26,
Bdate = DateTime.Parse("01/11/1990")
};
person.Add(data2);
var data3 = new Person
{
Fname = "John",
Lname = "Wane",
Age = 26,
Bdate = DateTime.Parse("02/26/1988")
};
person.Add(data3);
return View(person.ToList());
- در این مرحله به نمایش داده ها در Index.cshtml با استفاده از grid.mvc خواهیم پرداخت . بنابراین محتویات Index.cshtml را بصورت زیر ویرایش نمایید.
- @using GridMvc.Html
- @model List<UsingGridMvc.Models.Person>
- <h2>نمایش داده با قابلیت مرتب سازی در Grid MVC</h2>
- @Html.Grid(Model).Columns(columns =>
- {
- columns.Add(data => data.Fname).Titled("نام").SetWidth(110);
- columns.Add(data => data.Lname).Titled("نام خانوادگی").SetWidth(110);
- columns.Add(data => data.Age).Titled("سن").Sortable(true);
- columns.Add(data => data.Bdate).Titled("تاریخ تولد").Sortable(true);
- }).WithPaging(20)
با توجه به کدهای بالا فیلدهای age و Bdate قابلیت مرتب سازی را دارند.
اکنون برنامه را اجرا نمایید.
