Asp.Net Mvc Ajax Paging and Searching

Asp.Net Mvc Çağrı ŞİŞMAN 7.12.2015

Herkese Merhaba,

Sayfalama ve arama gibi işlemler web projelerimizin olmazsa olmazlarındandır. Özellikle Mvc projelerinin giderek popüler hale gelmesi bu gibi temel işlemleri gerçekleştirmemiz için kullanımımıza açık çok sayıda hazır kütüphanenin oluşmasına da zemin hazırladı. Bu gibi kütüphaneleri projelermize entegre ederek hızlı ve etkili geliştirimler gerçekleştirebiliyoruz.

Bu kütüphanelerin popüler olanlarından biri projeye entegre edilmesi oldukça kolay olan PagedList.Mvc kütüphanesidir. Nuget Package Manager üzerinden PagedList.Mvc kütüphanesini indirebilirsiniz.

Kullanımı oldukça basittir. Sayfalama işlemini yapacağımız Controller içerisine kütüphanelerimizi ekleyerek ToPagedList extension metodunu kullanarak sayfalama işlemini yaparız. Aşağıda örnek Controller bulunmaktadır.

 

ToPagedList metodu kaç sayfa olacağı ve bu her sayfada kaç tane veri gözükeceği gibi parametleri alır. Burada her bir sayfada 2 veri alacağımızı varsayıyoruz. Arama ve sayfalama için kullanacağımız modelimiz aşağıdaki gibidir.

public class ProductSearchModel
    {
        public string Name { get; set; }
        public int? Page { get; set; }
        public IPagedList<Product> Products { get; set; }

    }
public class ProductHelper
    {

        public static List<Product> GetProducts()
        {

            return new List<Product>
            {

                new Product{Id=1,ProductName="Spor Ayakkabı",UnitPrice=100},
                new Product{Id=2,ProductName="Pantolon",UnitPrice=200},
                new Product{Id=3,ProductName="Sandalet",UnitPrice=300},
                new Product{Id=4,ProductName="Bisiklet",UnitPrice=400},
                new Product{Id=5,ProductName="Sanat Ürünleri",UnitPrice=500},
                new Product{Id=6,ProductName="Bilgisayar",UnitPrice=600},


            };
        
        
        }

    }

    public class Product
    {

        public int Id { get; set; }
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
    
    
    }
        public ActionResult Index(int? page,string name)
        {

            var pageSize = 2;
            var pageNumber = (page ?? 1);
            var products = ProductHelper.GetProducts();

            if(!string.IsNullOrEmpty(name))
                products=products.Where(p=>p.ProductName.ToLower().Contains(name.ToLower())).ToList();
            

            var model = new ProductSearchModel
            {
                Products= products.ToPagedList(pageNumber, pageSize)

            };

            if (Request.IsAjaxRequest())
            {
                return PartialView("_Products", model);
            }

            return View(model);
        }

Arama ve sayfalama işlemleri için kullanacağımız Index action'ı yukarıdaki gibidir. Eğer bir ajax isteği gelirse, _Products partial view'ini render edeceğiz.

@model MvcPagedListSample.Models.ProductSearchModel
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src='@Url.Content("~/Scripts/jquery-1.10.2.min.js")'></script>
<script src='@Url.Content("~/Scripts/jquery-migrate-1.2.1.min.js")'></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<h2>Index</h2>
<div class="panel-body">
    @using (Ajax.BeginForm("Index", "Product", FormMethod.Post, new AjaxOptions { OnSuccess = "loadProds" }))
    {

        <p>

            <b>Ürün Adı: </b>@Html.TextBoxFor(m => m.Name)
            <input type="submit" name="submit" value="Ara" />
        </p>
    }

    <div id="ajax-min" class="panel-body">
        @Html.Partial("_Products", @Model)
    </div>
</div>

@section scripts
{
    <script type="text/javascript">

        function loadProds(result) {

            $("#ajax-min").html(result);

        }


    </script>
}

Index View'ine dikkat edersek formumuz Ajax.BeginForm metodunu kullanıyor. Bu formu Ajax ile post etmemizi sağlayacak. Parametrelerden biri olan AjaxOptions'ın OnSuccess özelliği ise ajax işlemi başarı ile tamamlandığında hangi javascript metodunun kullanılacağını belirtir.

Burada işlem başarıyla tamamlandığında, loadProds metodu çalışacak ve bu metod Ajax ile Index action'ına gidip işlemleri yapıp asenkron bir şekilde div içeriğini dolduracak. Böylece postback olmadan işlemi gerçekleştirmiş olacağız. 

Önemli: Ajax.BeginForm kullanırken gerekli jquery kütüphaneleri yüklemeniz gerekir.

<script src='@Url.Content("~/Scripts/jquery-1.10.2.min.js")'></script>
<script src='@Url.Content("~/Scripts/jquery-migrate-1.2.1.min.js")'></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

Modeli kendinize uygun hale getirip istediğiniz gibi kullanabilirsiniz. Formun içerisinde başka arama parametleri ekleyebilirsiniz.

Sağlıcakla kalın. İyi çalışmalar.


Etiketler: Asp.Net MVC Jquery C#