07
12
یعنی تعداد محدودی از اطلاعات را در یک صفحه نمایش دهیم تا سرعت لود صفحات وبسایت بهبود پیدا کند و یا با کلیک بر روی هر ستون بتوانیم آن ستون را مرتب سازی نماییم و کارهایی از این دست.
برای شروع نیز با همان کلاس Students که اطلاعات داخلش داشتیم شروع می کنیم.
برای این منظور ابتدا کنترلر StudentsController.cs را که قبلاْ در فولدر Controller ایجاد کرده بودیم را باز می نماییم. در خط ۱۹ ویژوال استودی و جایی که متد Index شروع می شود کدهای زیر را جایگزین می نماییم
private SchoolContext db = new SchoolContext(); // GET: Students public ActionResult Index(string sortOrder) { ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "name_desc" : ""; ViewBag.DateSortParm = sortOrder == "Date" ? "date_desc" : "Date"; var students = from s in db.Students select s; switch (sortOrder) { case "name_desc": students = students.OrderByDescending(s => s.LastName); break; case "Date": students = students.OrderBy(s => s.EnrollmentDate); break; case "date_desc": students = students.OrderByDescending(s => s.EnrollmentDate); break; default: students = students.OrderBy(s => s.LastName); break; } return View(db.Students.ToList()); }
یعنی باید شبیه شکل شماره ی ۲۹-۳ بشود
حال نوبت ظاهر صفحه است. وارد ویو شده (مطابق شکل ۳۰-۳)
شکل شماره ۳۰-۳
و کدهای زیر را وارد می نماییم. یعنی به جای خطوط ۱۳ الی ۲۴ در ویژوال استودیو خطوط زیر را جایگزین می نماییم
<tr> <th> @Html.ActionLink("Last Name", "Index", new { sortOrder = ViewBag.NameSortParm }) </th> <th>First Name </th> <th> @Html.ActionLink("Enrollment Date", "Index", new { sortOrder = ViewBag.DateSortParm }) </th> <th></th> </tr>
یعنی باید کدهای ویو مانند زیر باشد
@model IEnumerable<VaniaUniversity.Models.Student> @{ ViewBag.Title = "Index"; } <h2>Index</h2> <p> @Html.ActionLink("Create New", "Create") </p> <table class="table"> <tr> <th> @Html.ActionLink("Last Name", "Index", new {sortOrder = ViewBag.NameSortParm}) </th> <th> First Name </th> <th> @Html.ActionLink("Enrollment Date", "Index", new {sortOrder = ViewBag.DateSortParm }) </th> <th></th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.LastName) </td> <td> @Html.DisplayFor(modelItem => item.FirstName) </td> <td> @Html.DisplayFor(modelItem => item.EnrollmentDate) </td> <td> @Html.ActionLink("Edit", "Edit", new { id = item.ID }) | @Html.ActionLink("Details", "Details", new { id = item.ID }) | @Html.ActionLink("Delete", "Delete", new { id = item.ID }) </td> </tr> } </table>
قبل از اینکه به توضیحات بپردازیم ابتدا نگاهی به تغییرات می نماییم. پروژه را یکبار بیلد و سپس ران کنید و وارد صفحه دانشجویان شوید. همانطور که ملاحظه می کنید دو ستون نام و تاریخ لینک دار شده اند و شما چنانچه روی آنها کلیک کنید ، مرتب می شوند. (شکل ۳۱-۳)
شکل شماره ۳۱-۳
و حالا توضیحات کدهای قسمت کنترلر
در ادامه نیز میخواهیم باکس جستجو برای هر بخش بگذاریم تا پیدا کردن مطلب مورد نظر راحت تر باشد. طبق روال همین آموزش یعنی آموزش Entity Framework 6 Code First – بخش سوم به سراغ کنترلر StudentController میرویم و مواردی را به اکشن Index آن اضافه می کنیم. یعنی ابتدا یک معرف به کل اکشن اضافه می کنیم تحت نام string searchString و سپس خطوط زیر را به بدنه ی اکشن اضافه می نماییم
if (!String.IsNullOrEmpty(searchString)) { students = students.Where (s => s.LastName.ToUpper().Contains(searchString.ToUpper()) || s.FirstName.ToUpper().Contains(searchString.ToUpper()); }
یعنی کدهای بخش اکشن Index باید شبیه کدهای زیر باشد
public ActionResult Index(string sortOrder, string searchString) { ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "name_desc" : ""; ViewBag.DateSortParm = sortOrder == "Date" ? "date_desc" : "Date"; var students = from s in db.Students select s; if (!String.IsNullOrEmpty(searchString)) { students = students.Where (s => s.LastName.ToUpper().Contains(searchString.ToUpper()) || s.FirstName.ToUpper().Contains(searchString.ToUpper()); } switch (sortOrder) { case "name_desc": students = students.OrderByDescending(s => s.LastName); break; case "Date": students = students.OrderBy(s => s.EnrollmentDate); break; case "date_desc": students = students.OrderByDescending(s => s.EnrollmentDate); break; default: students = students.OrderBy(s => s.LastName); break; } return View(db.Students.ToList()); }
و برای نمایش در ویو نیز باید تغییراتی را در فایل Index.Cshtml ویوی Student بدهیم
@using (Html.BeginForm()) { <p> جستجو بر اساس نام : @Html.TextBox("searchString")<input type="submit" value="Search" /> </p> }
یعنی کدهای View باید شبیه به کدهای زیر باشد
@model IEnumerable<VaniaUniversity.Models.Student> @{ ViewBag.Title = "Index"; } <h2>Index</h2> <p> @Html.ActionLink("Create New", "Create") </p> @using (Html.BeginForm()) { <p> جستجو بر اساس نام : @Html.TextBox("searchString")<input type="submit" value="Search" /> </p> } <table class="table"> <tr> <th> @Html.ActionLink("نام", "Index", new {sortOrder = ViewBag.NameSortParm}) </th> <th> First Name </th> <th> @Html.ActionLink("Enrollment Date", "Index", new {sortOrder = ViewBag.DateSortParm }) </th> <th></th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.LastName) </td> <td> @Html.DisplayFor(modelItem => item.FirstName) </td> <td> @Html.DisplayFor(modelItem => item.EnrollmentDate) </td> <td> @Html.ActionLink("Edit", "Edit", new { id = item.ID }) | @Html.ActionLink("Details", "Details", new { id = item.ID }) | @Html.ActionLink("Delete", "Delete", new { id = item.ID }) </td> </tr> } </table>
یکبار سیو و سپس بیلد می کنیم پروژه را تا شاهد نتیجه ی اعمالمان باشیم :دی
شکل شماره ۳۲-۳
توضیحات قسمت Action و View به شرح زیر است
در این بخش قرار است تا صفحه بندی را با یکدیگر به پیش ببریم. زمانی ممکن است تعداد داده های شما بیش از هزاران عدد برسد، نمی توان همه را در یک صفحه نمایش داد، برای همین احتیاج داریم تا در هر صفحه به عنوان مثال ده داده را نمایش دهیم. روش های زیادی برای این کار وجود دارد . روشی که ما در اینجا استفاده خواهیم کرد پیشنهاد خود مایکروسافت است، مایکروسافت برای صفحه بندی و مرتب سازی داده ها پکیجی را ارائه داده تحت نام PagedList.Mvc که هم در سایت خود مایمروسافت موجود است و هم در گالری Nuget . این روش اجباری نیست و شما می توانید با کمی جستجو در اینترنت به راه های متنوع دیگری نیز دست پیدا کنید.
ابتدا می بایست این پکیج را نصب کنیم. از منوی Tools و زیر منوی Library Package Manager گزینه ی Package Manager Console را انتخاب می نماییم. از کنسول باز شده کد زیر را تایپ می کنیم
Install-Package PagedList.Mvc
سپس اینتر را میزنیم تا نصب شود. و در نهایت مطابق شکل زیر خواهد شد.
شکل شماره ۳۳-۳
همچنین باید در قسمت ریفرنس ها نیز به مانند شکل زیر این دو اضافه شده باشند
شکل شماره ۳۴-۳
[blockquote author="NuGet Gallery" source="https://www.nuget.org/packages/PagedList.Mvc/" style="s1"]جهت اطلاع از آخرین نسخه ی PagedList.Mvc می توانید به گالری این پکیج در Nuget و این آدرس مراجعه نمایید. در حال حاضر نسخه ۴٫۵٫۰ موجود می باشد[/blockquote]
این پکیج به عنوان مجموعه ای از pagedList میباشد که اکستنشن متدهای بسیار پرکاربردی همچون IQueryable و IEnumerable را در خود جای داده است. که در هر صفحه ای که از این پکیج استفاده می کنیم خصوصیات اکستنشن متدهای نام برده شده را برای داده های آن صفحه معرفی و استفاده می نماید. یعنی به هر صفحه به صورت مجزا کمک می کند تا به کمک این اکستنشن متدها صفحه را بارگزاری نماید.
حال برسیم سراغ تعریف توابع در کنترلر. ابتدای فضای نامی زیر را اضافه می کنیم
using PagedList;
و سپس در همان اکشن یعنی در اکشن Index مربوط به کنترلر StudentController کدهای زیر را جایگزین می کنیم
public ActionResult Index(string sortOrder, string searchString, string currentFilter, int? page) { ViewBag.CurrentSort = sortOrder; ViewBag.NameSortParm = String.IsNullOrEmpty(sortOrder) ? "name_desc" : ""; ViewBag.DateSortParm = sortOrder == "Date" ? "date_desc" : "Date"; if (searchString != null) { page = 1; } else { searchString = currentFilter; } ViewBag.CurrentFilter = searchString; var students = from s in db.Students select s; if (!String.IsNullOrEmpty(searchString)) { students = students.Where (s => s.LastName.ToUpper().Contains(searchString.ToUpper()) || s.FirstName.ToUpper().Contains(searchString.ToUpper())); } switch (sortOrder) { case "name_desc": students = students.OrderByDescending(s => s.LastName); break; case "Date": students = students.OrderBy(s => s.EnrollmentDate); break; case "date_desc": students = students.OrderByDescending(s => s.EnrollmentDate); break; default: students = students.OrderBy(s => s.LastName); break; } int pageSize = 3; int pageNumber = (page ?? 1); return View(students.ToPagedList(pageNumber, pageSize)); }
و در قسمت ویو نیز کدهای زیر را اضافه و جایگزین می نماییم
@model PagedList.IPagedList<VaniaUniversity.Models.Student> @using PagedList.Mvc; @*@model IEnumerable<VaniaUniversity.Models.Student>*@ @{ ViewBag.Title = "لیست دانشجویان"; } <h2>Index</h2> <p> @Html.ActionLink("ثبت دانشجوی جدید", "Create") </p> @using (Html.BeginForm("Index","Student", FormMethod.Get)) { <p> جستجو بر اساس نام : @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)<input type="submit" value="Search" /> </p> } <table class="table"> <tr> <th> @Html.ActionLink("نام", "Index", new {sortOrder = ViewBag.NameSortParm}) </th> <th> First Name </th> <th> @Html.ActionLink("Enrollment Date", "Index", new {sortOrder = ViewBag.DateSortParm }) </th> <th></th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.LastName) </td> <td> @Html.DisplayFor(modelItem => item.FirstName) </td> <td> @Html.DisplayFor(modelItem => item.EnrollmentDate) </td> <td> @Html.ActionLink("Edit", "Edit", new { id = item.ID }) | @Html.ActionLink("Details", "Details", new { id = item.ID }) | @Html.ActionLink("Delete", "Delete", new { id = item.ID }) </td> </tr> } </table> <br/> صفحه @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) از @Model.PageCount @Html.PagedListPager(Model, page => Url.Action("Index", new { page , sortOrder = ViewBag.CurrentSort , currentFilter = ViewBag.CurrentFilter }))
در نهایت پس از ذخیره و بیلد کردن پروژه تغییرات را مشاهده خواهید کرد
شکل شماره ۳۵-۳
شکل شماره ۳۶-۳
توضیحات کدهای بالا
در قسمت آخر آموزش Entity Framework 6 Code First – بخش سوم میخواهیم به بررسی آمار و ارقام بپردازیم! یعنی ببینیم در هر EnrollmentDate چه تعداد دانشجو ثبت نام کرده اند
ابتدا یک فولدر به نام ViewModels ایجاد و در آن یک کلاس با نام EnrollmentDateGroup ایجاد می کنیم و کدهای زیر را در آن قرار می دهیم
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.ComponentModel.DataAnnotations; namespace VaniaUniversity.ViewModels { public class EnrollmentDateGroup { [DataType(DataType.Date)] public DateTime? EnrollmentDate { get; set; } public int StudentCount { get; set; } } }
و سپس در کنترلر HomeController دو فضای نامی زیر را اضافه می نماییم
using VaniaUniversity.ViewModels; using VaniaUniversity.DAL;
و سپس بعد از باز شدن کلاس ها ی این کنترلر دیتابیس را به آن معرفی خواهیم کرد توسط کد زیر
namespace VaniaUniversity.Controllers { public class HomeController : Controller { private SchoolContext db = new SchoolContext();
و در نهایت در اکشن About کدهای زیر را جایگزین می نماییم
public ActionResult About() { IQueryable<EnrollmentDateGroup> data = from student in db.Students group student by student.EnrollmentDate into dataGroup select new EnrollmentDateGroup() { EnrollmentDate = dataGroup.Key, StudentCount = dataGroup.Count() }; return View(data.ToList()); }
و در نهایت از متد Dispose استفاده خواهیم کرد
protected override void Dispose(bool disposing) { db.Dispose(); base.Dispose(disposing); }
یعنی کدهای HomeController باید طبق کدهای زیر باشد
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using VaniaUniversity.ViewModels; using VaniaUniversity.DAL; namespace VaniaUniversity.Controllers { public class HomeController : Controller { private SchoolContext db = new SchoolContext(); public ActionResult Index() { return View(); } public ActionResult About() { IQueryable<EnrollmentDateGroup> data = from student in db.Students group student by student.EnrollmentDate into dataGroup select new EnrollmentDateGroup() { EnrollmentDate = dataGroup.Key, StudentCount = dataGroup.Count() }; return View(data.ToList()); } public ActionResult Contact() { ViewBag.Message = "Your contact page."; return View(); } protected override void Dispose(bool disposing) { db.Dispose(); base.Dispose(disposing); } } }
وحال نوبت تغییرات در View است . Views/Home/About.cshtml را باز می نماییم
@model IEnumerable<VaniaUniversity.ViewModels.EnrollmentDateGroup> @{ ViewBag.Title = "امار ثبت نامی دانشجویان"; } <table> <tr> <th> تاریخ ثبت نام </th> <th> دانشجویان </th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.EnrollmentDate) </td> <td> @item.StudentCount </td> </tr> } </table>
و طبق معمول سیو و ریبیلد و اجرای پروژه . . .
شکل شماره ۳۷-۳
به همین راحتی :)
[alerts title="سورس پروژه" type="info"]دانلود فایل سورس پروژه آموزش Entity Framework 6 Code First – بخش سوم با حجم ۳٫۵۰ مگابایت[/alerts]
/پایان آموزش Entity Framework 6 Code First – بخش سوم /
اگر دوست داشتید به اشتراگ بگزارید