در این مقاله نحوه استفاده از WebGrid برای نمایش محتوا در قالب Grid در ASP.NET MVC را توضیح می دهیم .

مرحله اول

ابتدا یک پروژه از نوع ASP.NET MVC با نام “Web Grid in Mvc”  ایجاد می کنیم .

حال به پوشه Model خود یک کلاس با نام “Student.cs” ایجاد می کنیم .

مرحله دوم

Property  های زیر را به کلاس “Student.cs” اضافه کنید.

public class Student
    {
        public string RollNo { get; set; }
        public string Name { get; set; }
        public string Branch { get; set; }
        public long FeeRemaining { get; set; }
    }

همان طور که مشاهده  می کنید RollNO,Name,Branch,FreeRemainig  را در کلاس وارد کرده ایم .

حال میخواهیم یک Controller به پوشه  Controller اضافه کنیم ، برای این کار بر روی پوشه کلیک راست کرده در قسمت Add ، Controller را انتخاب کنید.

مرحله سوم

در این مرحله می خواهیم به چهار Property خود را مقدار دهی کنیم. این مقدار ها را در Controller اضافه کرده ایم.

public ActionResult WebgridSample()
{
 
    ObservableCollection<Student> FeeRemaining = new ObservableCollection<Student>();
    FeeRemaining.Add(new Student { RollNo = "08330001", Name = "ایمان", Branch = "برنامه نویس", FeeRemaining = 18000 });
    FeeRemaining.Add(new Student { RollNo = "08330004", Name = "علی", Branch = "برنامه نویس", FeeRemaining = 2500 });
    FeeRemaining.Add(new Student { RollNo = "08329006", Name = "مجید", Branch = "طراح", FeeRemaining = 31000 });
    FeeRemaining.Add(new Student { RollNo = "08329007", Name = "رضا", Branch = "مدیر پروژه", FeeRemaining = 9450 });
    FeeRemaining.Add(new Student { RollNo = "08329014", Name = "محمد", Branch = "مسئول فنی", FeeRemaining = 2670 });
    FeeRemaining.Add(new Student { RollNo = "08311023", Name = "صادق", Branch = "معاون", FeeRemaining = 11200 });
    FeeRemaining.Add(new Student { RollNo = "08311024", Name = "جواد", Branch = "طراح", FeeRemaining = 3370 });
    return View(FeeRemaining);
}

مرحله چهارم

حال میخواهیم یک  View به پوشه View اضافه کنیم ، برای این  کار برروی پوشه   Views راست کلیک کرده  و یک View به آن اضافه می کنیم.

در این قسمت  ما نیاز است  تعدادی کد  به صفحه اضافه کنیم.

  @{
    var gd = new WebGrid(Model, canPage: true, rowsPerPage: 5, selectionFieldName: "selectedRow",ajaxUpdateContainerId: "gridContent");
        gd.Pager(WebGridPagerModes.NextPrevious);}

این قطعه کد یک webGrid است و به ما این امکان را می دهد که به Header ، Footer ، ...  کلاس های Css را به آن اضافه کرد.

حال ما چند Style در قسمت  Head صفحه اضافه کرده ایم .

    <style type="text/css">
        .table { margin: 4px;  width: 500px;  background-color:#FCFCFC;}
        .head { background-color: #C1D4E6; font-weight: bold; color: #FFF; }
        .webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
        .altRow { background-color: #E4E9F5; color: #000; }
        .gridHead a:hover {text-decoration:underline;}
        .description { width:auto}
        .selectRow{background-color: #389DF5}
    </style>

مرحله پنجم

در این مرحله نیاز است به Grid خود ستون هایی اضافه کنیم برای این کار کد زیر را  مشاهده کنید :

     <div id="gridContent">
        @gd.GetHtml(tableStyle: "table",
                headerStyle: "head",
                alternatingRowStyle: "altRow",
                selectedRowStyle: "selectRow",
                columns: gd.Columns(
                gd.Column("شماره", format: (item) => item.GetSelectLink(item.RollNo)),
                gd.Column("Name", " نام"),
                gd.Column("Branch", "شغل", style: "description"),
                gd.Column("FeeRemaining", "هزینه باقی مانده")
         )) 

با استفاده از قطعه کد زیر میتوان فرمت فیلد RollNo را اتنخاب کنیم.

gd.Column("RollNo", format: (item) => item.GetSelectLink(item.RollNo))

مرحله ششم

کد زیر با استفاده RollNo  جزئیات مربوط به آن سطر را به ما نمایش می دهد . زمانی که بر روی RollNo هر سطر کلیک کنید جزئیات آن در زیر آن نمایش داده  می شود.

@if (gd.HasSelection)
         {
             Student = (WebGridSampleApplication.Models.Student)gd.Rows[gd.SelectedIndex].Value;
             <b>شماره:</b> @Student.RollNo<br />
             <b>نام:</b>  @Student.Name<br />
             <b>شغل</b> @Student.Branch<br />
             <b>هزینه باقی مانده:</b> @Student.FeeRemaining<br />
         }

نکته مهم: نکته مهمی که هنوز گفته نشده این است که ما باید در این برنامه از Jquery استفاده کنیم برای این کار می توان آن را  دانلود کنید و به پروژه اضافه کنید.

خروجی

زمانی  که شما برنامه را Debug می کنید جزئیات Grid نمایش داده می شود.

حال اگر شما بر روی شماره هر فرد کلیک کنید جزئیات آن را زیر Grid نمایش داده می شود.

آموزش asp.net mvc