Mini Dükkan Projesi Ders 007 Bootstrap Paketlerinin Yüklenmesi

Şimdi projemizde altyapı anlamında bir çok çalışma kaydettik ama görünüm babında hiçbir çalışmamız yok diyebiliriz. Tabi ben tutup CSS vs anlatmayacağım bu projede ama azda olsa biraz tasarım kısmına el atacağız. Tabi bunun için de BootStrap kullanacağım.

Bu dersin video eğitimini de izleyebilirsiniz:

Bootstrap Paketlerinin Yüklenmesi:

Projeme benim eklemek istediğim CSS dokümanlarım Bootstrap paketinin içinde. Bootstrap pektini yükleyebilmek için wwwroot klasörünün üzerinde sağ tıklıyorum. Add seçiyorum ve çıkan bölümde Add Client-Side Library seçiyorum.

Library kısmına görselde görüleceği üzere twitter yazınca zaten ilgili kütüphaneler listeleniyor. Twitter-bootstrap seçtim (sizde versiyon farkı olabilir). Install diyor ve paketi yüklüyorum.

Bootstrap stillerinin Uygulanması:

_Layout.cshtml üzerine ilgili bootstrapimi ekliyorum. Kodlarımı aşağıdaki şekilde düzenliyorum.

< !DOCTYPE html >
< html lang="tr" >
< head >
    < meta charset="utf-8" / >
    < meta name="viewport" content="width=device-width, initial-scale=1.0" / >
    < title >MiniDukkan< /title >
    
  
< /head >
< body >
    
Mini Dükkan
Buraya bi şeyler yazacağız, ekleyeceğiz.
@RenderBody()
< /body > < /html >

Bootstrap’i _Layout’e ekledik. Böylelikle bu Layoutu kullanan tüm sayfalarda aslında eklenmiş oldu.

Şimdi index.cshtml sayfamıza gidelim ve kodları düzenleyelim:

@model UrunlerListesiViewModel

@foreach (var u in u.Urunler)
{
   

@ul.UrunAd @u.Fiyat.ToString("c")

@u.Aciklama
}

Şimdi de SayfaLinkTagHelper classımızda düzenleme yapalım. Burada tüm bootstrap özelliklerini doğrudan kullanmayıp, bunun yerine ihtiyacım olanları belirleyip, buradaki html kodlarının içine ekleyeceğim. Bu classımda da kodlarımı aşağıdaki şekilde düzenliyorum.

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 MiniDukkan.Models.ViewModels;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace MiniDukkan.Altyapi
{
    [HtmlTargetElement("div",Attributes ="sayfa-model")]
    public class SayfaLinkTagHelper : TagHelper
    {
        private IUrlHelperFactory urlHelperFactory;

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

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

        public SayfalamaBilgi SayfaModel { get; set; }

        public string SayfaAction { get; set; }

        public bool PageClassEnabled { get; set; } = false;
        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 sonuc = new TagBuilder("div");
            for (int i = 1; i <= SayfaModel.ToplamSayfalar; i++)
            {
                TagBuilder tag = new TagBuilder("a");
                tag.Attributes["href"] = urlHelper.Action(SayfaAction, new { urunSayfa = i });

             

 if 
( PageClassEnabled )
                

                {
                    tag.AddCssClass(PageClass);
                    tag.AddCssClass(i == SayfaModel.GuncelSayfa ? PageClassSelected : PageClassNormal);
                }

                tag.InnerHtml.Append(i.ToString());
                sonuc.InnerHtml.AppendHtml(tag);
            }

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

Not: WordPress kaynaklı yukarıda kodlarım dağınık görünebilir, videoyu izleyebilirsiniz.

Şimdi uygulamamızı yeniden başlatıp son durumunu görelim.

Parçalı Görünüm Oluşturma:

Index.cshtml görünümünü basitleştirmek için uygulama da biraz değişiklikler yapacağım. Ayrı bir şablona benzeyen farklı viewler içinde kullanabileceğim partial view olarak adlandırılan parçalı view oluşturmak istiyorum. Böylelikle aynı içeriğin farklı yerlerde görünmesini istediğimde tekrarlamaların önüne geçeceğim. Bunu yapmak için Views/Shared klasörüne sağ tıklıyor ve Add>View diyerek UrunOzet.cshtml adında bir View ekliyorum. İçine kodlarımı yazıyorum:

@model Urun

@Model.UrunAd @Model.Fiyat.ToString("c")

@Model.Aciklama

Şimdi partial viewin kullanılabilmesi için index.cshtml dosyama gidiyorum. Kodlarımı düzenliyorum:



@model UrunlerListesiViewModel

@foreach (var u in Model.Urunler)
{
    < partial name="UrunOzet" model="u" / >
   
}

Görüldüğü üzere benim artık @foreach kısmımda yeni oluşturulan partial view’im yer alıyor. Partial View’i burada kullanabilmek için partial elementini kullanıyorum. Partial elementinin name ve model attribute’leri ile ilgili partial view’i ve view modelini adresleyebiliyorum. Artık ben herhangi bir ürünün özet bilgilerini içeren bir partial view oluşturdum ve bunu istediğim farklı viewler içinde gösterebilirim. Böylelikle tarayıcım bu bilgileri başka bir view üzerinden yorumlar. Şimdi tekrar projeyi çalıştıralım.

Projede görünümünde bir değişiklik yok ancak az önce dediğim gibi ürün özetinde oluşturulan içerik bizim UrunOzet adlı partial view’imizden geliyor.

Şimdilik bu kadar, bir sonraki yazıda görüşmek üzere.

Bir cevap yazın

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