ASP NET CORE RAZOR PAGE BAKIM TEKNİK SERVİS PROJESİ DERS 021 PAGINATION İŞLEMİ SON KISIM

Bir önceki dersimizde Page-model içindeki kodlarımızı yazmıştık, şimdi devam edelim. Şimdi son kullanıcı tarafına front end tarafına geçip index sayfamızda kodlarımızı düzenleyelim. Doğru index içinde olduğumuzdan emin olalım. Bizim çalışacağımız index sayfamız index sayfasının başında yer alan projemizin adı ve pages klasörü altında Kullanıcılar altında yer alan IndexModel sayfamız olmalı.

Kodları düzenli görebilmek ve datay bilgi için ilgili video ders:

Burayı diğer sayfalardan kopyalayım yapıştırdığım için hatalar var. ApplicationUserList olan yerleri UsersListViewModel yapıyorum, çünkü ben page mpel tarafımda view model adımı bu şekilde verdim. Döngüm içindeki değişkenlere dokunmuyorum.

Ad-soyad ve email göstermişim. Buna bir de telefon ekliyorum.

@page
@model GursoyCNCBakim.Pages.Kullanicilar.IndexModel
@{
    ViewData["Title"] = "Index";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}

< form >
    

Kullanici Listesi


< table class="table table-striped border"> < tr class="table-secondary"> < th> @Html.DisplayNameFor(m => m.UsersListViewModel.ApplicationUserList[0].AdSoyad) < th> @Html.DisplayNameFor(m => m.UsersListViewModel.ApplicationUserList[0].PhoneNumber) < th> @Html.DisplayNameFor(m => m.UsersListViewModel.ApplicationUserList[0].Email) < th> < th> < /tr> @foreach (var item in Model.UsersListViewModel.ApplicationUserList) { < tr> < td> @Html.DisplayFor(m => item.AdSoyad) < /td> < td> @Html.DisplayFor(m => item.PhoneNumber) < /td> < td> @Html.DisplayFor(m => item.Email) < /td> < td> < td> < /td> < /tr> } < /table>
< /form>

Ben ekstradan bir th ve td etiketleri daha ekledim, bunlara sonra ihtiyacım olacak. Açıklayacağım sonra.

Şimdi yeni bir satır açıp tabloma ekliyorum.

Benim 5 tane td alanım olduğu için üst kısımda, buradaki td için de colspan 5 diyorum. Böylelikle bu 5 alana eşit bir td oluşacak.

@page
@model GursoyCNCBakim.Pages.Kullanicilar.IndexModel
@{
    ViewData["Title"] = "Index";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}



Kullanici Listesi


@foreach (var item in Model.UsersListViewModel.ApplicationUserList) { }
@Html.DisplayNameFor(m => m.UsersListViewModel.ApplicationUserList[0].AdSoyad) @Html.DisplayNameFor(m => m.UsersListViewModel.ApplicationUserList[0].PhoneNumber) @Html.DisplayNameFor(m => m.UsersListViewModel.ApplicationUserList[0].Email)
@Html.DisplayFor(m => item.AdSoyad) @Html.DisplayFor(m => item.PhoneNumber) @Html.DisplayFor(m => item.Email)

Şimdi bizim oluşturduğumuz bu custom tag helperi tanımlamamız gereken bir alanımız var. Bunu yapabilmek için Pages > _ViewImports.cshtml’e geliyoruz ve custom tag helperimizi ekliyoruz. Tanımlama işlemimiz böylelikle gerçekleşiyor. Burada .* diyerek taghelpers klasörü içinde yer alan tüm taghelpers dosyalarımızı refere etmiş oluyoruz.

@using Microsoft.AspNetCore.Identity
@using GursoyCNCBakim
@using GursoyCNCBakim.Data
@namespace GursoyCNCBakim.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper GursoyCNCBakim.TagHelpers.*, GursoyCNCBakim

Buradan tekrar pages klasörü altında Kullanıcılar altında yer alan IndexModel sayfamıza dönüyoruz. Kodlarımıza devam ediyoruz.

@page
@model GursoyCNCBakim.Pages.Kullanicilar.IndexModel
@{
    ViewData["Title"] = "Index";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}



Kullanici Listesi


@foreach (var item in Model.UsersListViewModel.ApplicationUserList) { }
@Html.DisplayNameFor(m => m.UsersListViewModel.ApplicationUserList[0].AdSoyad) @Html.DisplayNameFor(m => m.UsersListViewModel.ApplicationUserList[0].PhoneNumber) @Html.DisplayNameFor(m => m.UsersListViewModel.ApplicationUserList[0].Email)
@Html.DisplayFor(m => item.AdSoyad) @Html.DisplayFor(m => item.PhoneNumber) @Html.DisplayFor(m => item.Email)

Ben 13 tane kullanıcı ekledim. Dolayısı ile aslında altta yer alan sayılar 1,2 ve 3 olmalı, oysaki 13’e kadar giidyor, yani kullanıcı sayısı kadar gidiyor, dolayısı ile bu işte bir hata var. Buradaki hata benim PageLinkHelper.cs classımda döngümü kullanıcı sayısı kadar saymış olmamdan kaynaklı, ben bu dosyama geliyor ve bunu da toplam sayfa kadar yani TotalItems yerine TotalPage diyerek düzeltiyorum.

using GursoyCNCBakim.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.Routing;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.TagHelpers;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace GursoyCNCBakim.TagHelpers
{

    [HtmlTargetElement("div", Attributes = "page-model")]
    public class PageLinkTagHelper : TagHelper
    {
        private IUrlHelperFactory urlHelperFactory;

        public PageLinkTagHelper(IUrlHelperFactory helperFactory)
        {
            urlHelperFactory = helperFactory;
        }

        [ViewContext]
        [HtmlAttributeNotBound]
        public ViewContext ViewContext { get; set; }

        public PagingInfo PageModel { get; set; }
        public string PageAction { get; set; }
        public string PageClass { get; set; }
        public string PageClassNormal { get; set; }
        public string PageClassSelected { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            IUrlHelper urlHelper = urlHelperFactory.GetUrlHelper(ViewContext);
            TagBuilder result = new TagBuilder("div");

            for(int i=1; i<= PageModel.TotalPage; i++)
            {
                TagBuilder tag = new TagBuilder("a");
                string url = PageModel.UrlParam.Replace(":", i.ToString());
                tag.Attributes["href"] = url;
                tag.AddCssClass(PageClass);
                tag.AddCssClass(i == PageModel.CurrentPage ? PageClassSelected : PageClassNormal);
                tag.InnerHtml.Append(i.ToString());
                result.InnerHtml.AppendHtml(tag);
            }

            output.Content.AppendHtml(result.InnerHtml);
        }
    }
}


Sonuç olarak ekran çıktımız:

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir