توضیحات و دانلود

صفحه بندی Client Side با استفاده از Entity Framework و jQuery در ASP.Net MVC
0 0
صفحه بندی Client Side با استفاده از Entity Framework و jQuery در ASP.Net MVC

با سلام در این مقاله با یک مثال توضیح خواهیم داد که چگونه می توان صفحه بندی Client Side را با استفاده از Entity Framework و jQuery در ASP.Net MVC Razor پیاده سازی کرد.
همچنین جدول HTML صفحه بندی را با استفاده از jQuery AJAX ، JSON و Entity Framework در ASP.Net MVC Razor انجام دهید .

بانک اطلاعات
در اینجا از پایگاه داده Northwind استفاده می کنیم. شما می توانید آن را از اینجا دانلود کنید.
پایگاه داده Northwind را بارگیری و نصب کنید
ایجاد Entity Data Model
اولین قدم ایجاد یک برنامه ASP.Net MVC و اتصال آن به بانک اطلاعات Northwind با استفاده از Entity Framework است.
در زیرEntity Data Model جدول مشتریان از پایگاه داده Northwind است که بعدا در این پروژه استفاده خواهد شد.

Model
کلاس Model زیر با نام CustomerModel از سه ویژگی تشکیل شده است.
1. Customers - مجموعه لیست داده های Model مشتری که سوابق مشتریان را در خود جای می دهد.
2. CurrentPageIndex - مقدار شاخص صفحه فعلی را نگه می دارد.
3. PageCount - این مقدار با استفاده از حداکثر ردیف ها نمایش داده شده و کل رکورد های موجود در جدول محاسبه می شود.

public class CustomerModel
{
    public List<Customer> Customers { get; set; }
    public int PageIndex { get; set; }
    public int PageSize { get; set; }
    public int RecordCount { get; set; }
}

Controller

Controller
Controller از دو روش تشکیل شده است.
روش انجام عملیات GET
در داخل این روش Action ، به View برگشت داده می شود.
روش جابجایی عملیات جی کوئری AJAX
این روش ارتباط حاصل از عملکرد jQuery AJAX را از View دریافت می کند.
توجه :

روش زیر ارتباط های AJAX را کنترل می کند و از این رو نوع بازگشت به JsonResult تنظیم می شود .
ابتدا یک شیء از کلاس CustomerModel ایجاد و سپس سوابق با استفاده از Entity Framework از جدول Customers گرفته می شوند و به ویژگی CustomerModel اختصاص داده می شوند.
صفحه بندی با استفاده از توابع Skip و Take بر روی سوابق انجام می شود.

عملکرد Index Start ، Skip را از مجموعه سوابق گرفته شده دریافت میکند ، یعنی اگر صفحه 1 باشد ، شاخص شروع (1) * 10 = 0 خواهد بود.
مثال : اگر صفحه فعلی 1 باشد و حداکثر ردیف 10 باشد ، شاخص شروع (1) * 10 = 0 خواهد بود.

تابع Take سطرها را براساس مقدار ویژگی PageSize دریافت می کند.
سرانجام شی CustomerModel به عنوان شی JSON به View برگشت داده می شود.

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public JsonResult AjaxMethod(int pageIndex)
    {
        NorthwindEntities entities = new NorthwindEntities();
        CustomerModel model = new CustomerModel();
        model.PageIndex = pageIndex;
        model.PageSize = 10;
        model.RecordCount = entities.Customers.Count();
        int startIndex = (pageIndex - 1) * model.PageSize;
        model.Customers = (from customer in entities.Customers
                            select customer)
                        .OrderBy(customer => customer.CustomerID)
                        .Skip(startIndex)
                        .Take(model.PageSize).ToList();
        return Json(model);
    }
}

View
 View شامل یک جدول HTML است که با استفاده از jQuery AJAX و JSON با داده های موجود در پایگاه داده SQL Server متصل می شود.
عملکرد GetCustomers جاوا اسکریپت را در رویداد jQuery document ready و همچنین هنگامی که دکمه Pager کلیک می شود ، فراخوانی می کند.
در داخل تابع GetCustomers JavaScript ، مقدار PageIndex با استفاده از ارتباط جی کوئری AJAX به روش Action Controller ارسال می شود.
روش Action Controller یک شیء JSON از کلاس CustomerModel را شامل می شود که شامل لیست مشتریان ، فهرست صفحه فعلی ، اندازه صفحه و تعداد کل ثبت ها است.
با استفاده از این شیء JSON و ردیف dummy HTML ، جدول HTML با سوابق بازگردانده شده توسط Entity Framework متصل می شود.

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }
 
        table {
            border: 1px solid #ccc;
            border-collapse: collapse;
            background-color: #fff;
        }
 
        table th {
            background-color: #B8DBFD;
            color: #333;
            font-weight: bold;
        }
 
        table th, table td {
            padding: 5px;
            border: 1px solid #ccc;
        }
 
        table, table table td {
            border: 0px solid #ccc;
        }
 
        .Pager span {
            text-align: center;
            color: #333;
            display: inline-block;
            width: 20px;
            background-color: #B8DBFD;
            margin-right: 3px;
            line-height: 150%;
            border: 1px solid #B8DBFD;
        }
 
        .Pager a {
            text-align: center;
            display: inline-block;
            width: 20px;
            background-color: #ccc;
            color: #333;
            border: 1px solid #ccc;
            margin-right: 3px;
            line-height: 150%;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h4>Customers</h4>
    <hr/>
    <table id="tblCustomers" cellpadding="0" cellspacing="0">
        <tr>
            <th>CustomerID</th>
            <th>ContactName</th>
            <th>City</th>
            <th>Country</th>
        </tr>
        <tr style="display:none">
            <td>CustomerID</td>
            <td>ContactName</td>
            <td>City</td>
            <td>Country</td>
        </tr>
    </table>
    <br/>
    <div class="Pager"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="~/Scripts/ASPSnippets_Pager.min.js"></script>
    <script type="text/javascript">
        $(function () {
            GetCustomers(1);
        });
        $("body").on("click", ".Pager .page", function () {
            GetCustomers(parseInt($(this).attr('page')));
        });
        function GetCustomers(pageIndex) {
            $.ajax({
                type: "POST",
                url: "/Home/AjaxMethod",
                data: '{pageIndex: ' + pageIndex + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        }
 
        function OnSuccess(response) {
            var model = response;
            var row = $("#tblCustomers tr:last-child").removeAttr("style").clone(true);
            $("#tblCustomers tr").not($("#tblCustomers tr:first-child")).remove();
            $.each(model.Customers, function () {
                var customer = this;
                $("td", row).eq(0).html(customer.CustomerID);
                $("td", row).eq(1).html(customer.ContactName);
                $("td", row).eq(2).html(customer.City);
                $("td", row).eq(3).html(customer.Country);
                $("#tblCustomers").append(row);
                row = $("#tblCustomers tr:last-child").clone(true);
            });
            $(".Pager").ASPSnippets_Pager({
                ActiveCssClass: "current",
                PagerCssClass: "pager",
                PageIndex: model.PageIndex,
                PageSize: model.PageSize,
                RecordCount: model.RecordCount
            });
        };
    </script>
</body>
</html>

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :