Anlatıma geçmeden önce AspNet Core 8.0 ile geliştirdiğimiz bu projeye ait linkleri aşağıda sıraladım.
AspNet Core 8.0 projesi için linkler
Ayrıca bir önceki yazıyı okumadıysanız;
AspNet Core ile geliştirdiğimiz projenin bu bölümünde “bottom grid” kısmını ele alıyor olacağız.
Yeni Tablo Oluşturmak
Kırmızı kutucuk içerisine aldığım alanı yapıyor olacağız. Bunun için yeni bir tablo oluşturacağız ve tablonun ismi BottomGrid olacak.
CREATE TABLE BottomGrid
(
BottomGridID int IDENTITY(1,1) PRIMARY key,
Icon NVARCHAR(100),
Title NVARCHAR(150),
Description NVARCHAR(250)
)Tablomuzda ID, icon adı, başlığı ve açıklaması olacağı için yukarıdaki SQL Query’sini çalıştırarak tablomuzu oluşturduk.
API’sini Hazırlayalım
İlk olarak DTO oluşturarak başlayalım. Bunun için şu yola gidelim ve BottomGridDtos klasörünü oluşturalım.
API Katmanı > DtosArdından sınıflarımızı tanımlamakla ilerleyeceğiz. Tüm sınıflarımızın isimleri şu şekilde olacak;
ResaultBottomGridDto
CreateBottomGridDto
UpdateBottomGridDto
GetBottomGridDtoolacak. Bu class’lar için BottomGridDtos klasörü içine bu classları oluşturuyoruz.
Resault tarafı ile başlayalım.
namespace RealEstate_Dapper_Api.Dtos.BottomGridDtos
{
public class ResaultBottomGridDto
{
public int BottomGridID { get; set; }
public string Icon { get; set; }
public string Title { get; set; }
public string Description { get; set; }
}
}CreateBottomGridDto
namespace RealEstate_Dapper_Api.Dtos.BottomGridDtos
{
public class CreateBottomGridDto
{
public string Icon { get; set; }
public string Title { get; set; }
public string Description { get; set; }
}
}UpdateBottomGridDto;
namespace RealEstate_Dapper_Api.Dtos.BottomGridDtos
{
public class UpdateBottomGridDto
{
public int BottomGridID { get; set; }
public string Icon { get; set; }
public string Title { get; set; }
public string Description { get; set; }
}
}GetBottomGridDto
namespace RealEstate_Dapper_Api.Dtos.BottomGridDtos
{
public class GetBottomGridDto
{
public int BottomGridID { get; set; }
public string Icon { get; set; }
public string Title { get; set; }
public string Description { get; set; }
}
}API tarafındaki Dto’larımızı hazırladık. Şimdi repository kısmını halledelim.
API Repository
API Katmanı > RepositoriesYukarıda belirttiğim yolu takip ederek bir klasör daha tanımlıyoruz. “BottomGridRepositories” ismindeki bu klasörde data ile iletişimimizi sağlamak için repositroy sınıf ve interface’lerini tanımlıyor olacağız.
Dosyanın içerisinde bir adet interface tanımlıyoruz. Adı ise “IBottomGridRepository” olacak.
using RealEstate_Dapper_Api.Dtos.BottomGridDtos;
namespace RealEstate_Dapper_Api.Repositories.BottomGridRepositories
{
public interface IBottomGridRepository
{
Task<List<ResaultBottomGridDto>> GetAllBottomGridAsync();
void CreateBottomGrid(CreateBottomGridDto bottomGridDto);
void DeleteBottomGrid(int id);
void UpdateBottomGrid(UpdateBottomGridDto bottomGridDto);
Task<GetBottomGridDto> GetBottomGrid(int id);
}
}Buradaki kodlar sayesinde bu metodları repositorymizde zorunlu olarak tanımlayacağız. Şimdi aynı klasör içerisinde “BottomGridRepository” adında bir sınıf oluşturuyoruz ve IBottomGridRepository’den kalıtım almasını sağlıyoruz. Ardından implement interface diyerek tüm metodları içeride otomatik olarak oluşturuyoruz.
using RealEstate_Dapper_Api.Dtos.BottomGridDtos;
namespace RealEstate_Dapper_Api.Repositories.BottomGridRepositories
{
public class BottomGridRepository: IBottomGridRepository
{
public Task<List<ResaultBottomGridDto>> GetAllBottomGridAsync()
{
throw new NotImplementedException();
}
public void CreateBottomGrid(CreateBottomGridDto bottomGridDto)
{
throw new NotImplementedException();
}
public void DeleteBottomGrid(int id)
{
throw new NotImplementedException();
}
public void UpdateBottomGrid(UpdateBottomGridDto bottomGridDto)
{
throw new NotImplementedException();
}
public Task<GetBottomGridDto> GetBottomGrid(int id)
{
throw new NotImplementedException();
}
}
}Ardından list metodumuzun içerisini dolduracağız. Ancak data ile iletişim sağlayabilmek için context üretmemiz gerekiyor.
private readonly Context _context;
public BottomGridRepository(Context context)
{
_context = context;
}
Buradaki kodlar sayesinde Context sınıfından bir _context nesnesi ürettik. Alttaki kod ile de ne zaman BottomGridRepository sınıfı çağırılırsa bir context üretmesini ve kullanmasını istedik.
using Dapper;
using RealEstate_Dapper_Api.Dtos.BottomGridDtos;
using RealEstate_Dapper_Api.Dtos.ProductDtos;
using RealEstate_Dapper_Api.Models.DapperContext;
namespace RealEstate_Dapper_Api.Repositories.BottomGridRepositories
{
public class BottomGridRepository: IBottomGridRepository
{
private readonly Context _context;
public BottomGridRepository(Context context)
{
_context = context;
}
public async Task<List<ResaultBottomGridDto>> GetAllBottomGridAsync()
{
string query = "Select * From BottomGrid";
using (var connection = _context.CreateConnection())
{
var values = await connection.QueryAsync<ResaultBottomGridDto>(query);
return values.ToList();
}
}
public void CreateBottomGrid(CreateBottomGridDto bottomGridDto)
{
throw new NotImplementedException();
}
public void DeleteBottomGrid(int id)
{
throw new NotImplementedException();
}
public void UpdateBottomGrid(UpdateBottomGridDto bottomGridDto)
{
throw new NotImplementedException();
}
public Task<GetBottomGridDto> GetBottomGrid(int id)
{
throw new NotImplementedException();
}
}
}GetAllBottomGridAsync metodunun içerisinde ilgili kodlarımızı tanımladık. Adım adım bakacak olursak;
public async Task<List<ResaultBottomGridDto>> GetAllBottomGridAsync()
{
string query = "Select * From BottomGrid";
using (var connection = _context.CreateConnection())
{
var values = await connection.QueryAsync<ResaultBottomGridDto>(query);
return values.ToList();
}
}query ile hangi tabloya istek atacağımızı belirttik.
public async Task<List<ResaultBottomGridDto>> GetAllBottomGridAsync()
{
string query = "Select * From BottomGrid";
using (var connection = _context.CreateConnection())
{
var values = await connection.QueryAsync<ResaultBottomGridDto>(query);
return values.ToList();
}
}using kısmı ile bir _context’ten data ile bir bağlantı sağlamasını istedik ve connection değişkeni yardımı ile içeride kullanacağımızı belirtmiş olduk.
public async Task<List<ResaultBottomGridDto>> GetAllBottomGridAsync()
{
string query = "Select * From BottomGrid";
using (var connection = _context.CreateConnection())
{
var values = await connection.QueryAsync<ResaultBottomGridDto>(query);
return values.ToList();
}
}connection’ı kullanarak QueryAsync metodu ile query’mizi çalıştırdık ve dönecek verinin ResaultBottomGridDto tipinde olduğunu belirttik. Ardından values değişkeni içerisine dönen veriyi atadık.
Return kısmında ise liste olarak dönüş sağladık.
Controller Sınıfının Yazılması
Artık controller sınıfının yazılması gerekiyor. Bunun için aşağıdaki yolda “BottomGridsController” adında bir apicontroller tanımlayacağız.
API Katmanı > Controllers using Microsoft.AspNetCore.Mvc;
namespace RealEstate_Dapper_Api.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class BottomGridsController : ControllerBase
{
// END POINTLER
}
}ApiController’ımız yukarıdaki gibi olacak. Repository’deki metodlara ulaşarak data ile bağlantıyı sağlamak için şu iki koda ihtiyacımız var;
private readonly IBottomGridRepository _bottomGridRepository;
public BottomGridsController(IBottomGridRepository bottomGridRepository)
{
_bottomGridRepository = bottomGridRepository;
}Alt taraftaki metod, consturactor yani yapıcı metod. Üst tarafta ise interface’den bir nesne örneği oluşturduk.
Şimdi ilk End Point’imizi hazırlayalım.
[HttpGet]
public async Task<IActionResult> BottomGridList()
{
var values = await _bottomGridRepository.GetAllBottomGridAsync();
return Ok(values);
}_bottomGridRepository’yi kullanarak alt metodlara eriştik ve orada listeleme işlemini yapan metodu çağırdık. Ardından bunu bir values değerine aktardık. Sonra da bu end point çağırıldığında return ile Ok mesajı ve datayı döndük.
Şimdi buranın çalışabilmesi için Program.cs de registiration yapmak gerekiyor.
builder.Services.AddTransient<IBottomGridRepository, BottomGridRepository>();
Bu kodu eklediğimizde IBottomGridRepository çağırıldığında BottomGridRepository’i oluşturması gerektiğini bilecek.
Şimdi test etmeden önce ilk olarak veri ekleme işini yapalım. Eklediğimiz veriler şu şekilde. Sizde kopyala-yapıştır yolu ile ilerleyebilirsiniz.
[
{
"bottomGridID": 1,
"icon": "fa fa-home",
"title": "Hayalinizdeki Evi Satın Alın",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"
},
{
"bottomGridID": 2,
"icon": "fa fa-home",
"title": "Hayalinizdeki Yazlığa Kavuşun",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"
},
{
"bottomGridID": 3,
"icon": "fa fa-home",
"title": "Popüler Konumları Görün",
"description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"
}
]UI Tarafında Verileri Getirmek
İsimde karmaşıklık olmaması için üzerinde çalıştığımız alan “_DefaultServicesComponentPartial” ile geliyordu. Bunu BottomGrid olarak değiştirelim ve yeni adı “_DefaultBottomGridComponentPartial” olsun. Hemen Dto’muzu oluşturalım.
namespace RealEstate_Dapper_UI.Dtos.BottomGridDtos
{
public class ResaultBottomGridDto
{
public int BottomGridID { get; set; }
public string Icon { get; set; }
public string Title { get; set; }
public string Description { get; set; }
}
}namespace RealEstate_Dapper_UI.Dtos.BottomGridDtos
{
public class GetBottomGridDto
{
public int BottomGridID { get; set; }
public string Icon { get; set; }
public string Title { get; set; }
public string Description { get; set; }
}
}namespace RealEstate_Dapper_UI.Dtos.BottomGridDtos
{
public class CreateBottomGridDto
{
public string Icon { get; set; }
public string Title { get; set; }
public string Description { get; set; }
}
}namespace RealEstate_Dapper_UI.Dtos.BottomGridDtos
{
public class UpdateBottomGridDto
{
public int BottomGridID { get; set; }
public string Icon { get; set; }
public string Title { get; set; }
public string Description { get; set; }
}
}Tüm Dto’larımızı UI katamanı içerisindeki Dtos klasöründe BottomGridDtos altında tanımladık.
using System;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using RealEstate_Dapper_UI.Dtos.BottomGridDtos;
namespace RealEstate_Dapper_UI.ViewComponents.HomePage
{
public class _DefaultBottomGridComponentPartial: ViewComponent
{
private readonly IHttpClientFactory _httpClientFactory;
public _DefaultBottomGridComponentPartial(IHttpClientFactory httpClientFactory)
{
_httpClientFactory = httpClientFactory;
}
public async Task<IViewComponentResult> InvokeAsync()
{
var client = _httpClientFactory.CreateClient();
var responseMessage = await client.GetAsync("http://localhost:5010/api/BottomGrids");
if(responseMessage.IsSuccessStatusCode)
{
var jsonData = await responseMessage.Content.ReadAsStringAsync();
var values = JsonConvert.DeserializeObject<List<ResaultBottomGridDto>>(jsonData);
return View(values);
}
return View();
}
}
}
İlgili ViewComponent’i de bu şekilde güncelledik.
Şimdi Default.cshtml dosyasına gidelim.
@model List<ResaultBottomGridDto>
<section class="w3l-bottom-grids py-5" id="steps">
<div class="container py-lg-5 py-md-4 py-2">
<div class="grids-area-hny main-cont-wthree-fea row">
@foreach (var item in Model)
{
<div class="col-lg-4 col-md-6 grids-feature">
<div class="area-box no-box-shadow">
<span class="@item.Icon"></span>
<h4><a href="#feature" class="title-head">@item.Title</a></h4>
<p>@item.Description</p>
<a href="#more" class="more">Daha fazlası <span class="fa fa-long-arrow-right"></span> </a>
</div>
</div>
}
</div>
</div>
</section>Burada unutmamamız gereken _ViewImports.cshtml dosyasına şu kodu eklemek
@using RealEstate_Dapper_UI.Dtos.BottomGridDtosArdından Default > Index.cshtml dosyasında
@{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/_DefaultLayout.cshtml";
}
@await Component.InvokeAsync("_DefaultFeatureComponentPartial")
@await Component.InvokeAsync("_DefaultHomePageProductList")
@await Component.InvokeAsync("_DefaultWhoWeAreComponentPartial")
@await Component.InvokeAsync("_DefaultBottomGridComponentPartial")
@await Component.InvokeAsync("_DefaultProductListExploreCitiesComponentPartial")
@await Component.InvokeAsync("_DefaultOurClientsComponentPartial")
@await Component.InvokeAsync("_DefaultSubFeatureComponentPartial")
@await Component.InvokeAsync("_DefaultDiscountOfDayComponentPartial")
@await Component.InvokeAsync("_DefaultBrandComponentPartial")
olarak güncelleyelim.
Bir sonraki derste görüşmek üzere.
