webgrid به صورت Ajax

بسم الله الرحمن الرحیم

آموزش طراحی یک وب گرید به صورت Ajax

در این آموزش می خواهیم روش ساخت یک WebGrid را به صورت Ajax بررسی کنیم.

برای ساخت یک WebGrid به صورت Ajax باید پارامتر ajaxUpdateContainerId را مقدار دهی کنیم، معمولا container مانند زیر باید یک DIV باشد.
 

    WebGrid grid = new WebGrid(
    // Other code is removed for clarity
    ajaxUpdateContainerId: "container-grid"
    );
     
    <div id="container-grid">@grid.GetHtml(
    fillEmptyRows: true,
    alternatingRowStyle: "alternative-row",
    headerStyle: "header-grid",
    footerStyle: "footer-grid",
    mode: WebGridPagerModes.All,
    ...
    })</div>

ما همچنین می توانیم Id وب گرید را به پارامتر ajaxUpdateContainerId با متد GetHtml که توسط htmlAttributes تولید شده است، ارائه دهیم. من از این روش استفاده کردم.

 Model

در بتدا قبل از طراحی Model، از Entity Framework database first مانند تصویر زیر استفاده می کنیم. البته می توانید همین اطلاعات خودتان به صورت Code First ایجاد کنید.

 

حالا کد مربوط به روش دریافت داده ها از جدول Customer و همچنین روش صفحه بندی و مرتب سازی را به صورت پیاده سازی می کنیم.

    public class ModelServices : IDisposable
    {
    private readonly TestDBEntities entities = new TestDBEntities();
    //For Custom Paging
    public IEnumerable<Customer> GetCustomerPage(int pageNumber, int pageSize, string sort, bool Dir)
    {
    if (pageNumber < 1)
    pageNumber = 1;
    if (sort == "name")
    return entities.Customers.OrderByWithDirection(x => x.Name, Dir)
    .Skip((pageNumber - 1) * pageSize)
    .Take(pageSize)
    .ToList();
    else if (sort == "address")
    return entities.Customers.OrderByWithDirection(x => x.Address, Dir)
    .Skip((pageNumber - 1) * pageSize)
    .Take(pageSize)
    .ToList();
    else if (sort == "contactno")
    return entities.Customers.OrderByWithDirection(x => x.ContactNo, Dir)
    .Skip((pageNumber - 1) * pageSize)
    .Take(pageSize)
    .ToList();
    else
    return entities.Customers.OrderByWithDirection(x => x.CustID, Dir)
    .Skip((pageNumber - 1) * pageSize)
    .Take(pageSize)
    .ToList();
    }
    public int CountCustomer()
    {
    return entities.Customers.Count();
    }
    public void Dispose()
    {
    entities.Dispose();
    }
    }
     
    public class PagedCustomerModel
    {
    public int TotalRows { get; set; }
    public IEnumerable<Customer> Customer { get; set; }
    public int PageSize { get; set; }
    }

 Extension Method برای OrderByWithDirection

public static class SortExtension
{
public static IOrderedEnumerable OrderByWithDirection
(this IEnumerable source,Func keySelector,bool descending)
{
return descending ? source.OrderByDescending(keySelector)
: source.OrderBy(keySelector);
}
public static IOrderedQueryable OrderByWithDirection
(this IQueryable source,Expression> keySelector,bool descending)
{
return descending ? source.OrderByDescending(keySelector)
: source.OrderBy(keySelector);
}
}

 View

 حالا View خود را بر اساس Model ایی که در مراحل قبل ایجاد کردیم، ایجاد می کنیم.

@model Mvc4_CustomWebGrid.Models.PagedCustomerModel
@using Mvc4_CustomWebGrid.Models;
@{
ViewBag.Title = "Ajax WebGrid with Custom Paging, Sorting";
}
     
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
     
@{
WebGrid grid = new WebGrid(rowsPerPage: Model.PageSize, defaultSort: "Name", ajaxUpdateContainerId: "grid");
grid.Bind(Model.Customer, autoSortAndPage: false, rowCount: Model.TotalRows);
grid.Pager(WebGridPagerModes.All);
@grid.GetHtml(htmlAttributes: new { id = "grid" }, // id for ajaxUpdateContainerId parameter
fillEmptyRows: false,
alternatingRowStyle: "alternate-row",
headerStyle: "grid-header",
footerStyle: "grid-footer",
mode: WebGridPagerModes.All,
firstText: "<< First",
previousText: "< Prev",
nextText: "Next >",
lastText: "Last >>",
columns: new[] {
grid.Column("CustID",header: "ID", canSort: false),
grid.Column("Name"),
grid.Column("Address"),
grid.Column("ContactNo",header: "Contact No")
})
}

Controller

در این جا کد پیاده سازی قابلیت های webgrid را با استفاده از model و متدهای خود ایجاد می کنیم.

public class HomeController : Controller
{
ModelServices mobjModel = new ModelServices();
public ActionResult WebGridCustomPaging(int page = 1, string sort = "custid", string sortDir = "ASC")
{
const int pageSize = 5;
var totalRows = mobjModel.CountCustomer();
bool Dir = sortDir.Equals("desc", StringComparison.CurrentCultureIgnoreCase) ? true : false;
var customer = mobjModel.GetCustomerPage(page, pageSize, sort, Dir);
var data = new PagedCustomerModel()
{
TotalRows = totalRows,
PageSize = pageSize,
Customer = customer
};
return View(data);
}
}

نهایتا خروجی ما به صورت زیر خواهد بود:

دانلود پروژه وب گرید به صورت آژاکسی