.Net Core Mvc’de Bir Haber Başlığını Url’e Koyma
Selamlar,
Bu makalede, Mvc routing kullanarak seo açısından önemli olan bir haber detay sayfasında title’ın, url satırında gözükmesini inceleyeceğiz. Türkçe karakterlerden oluşan başlıklar ve haber detay resimleri için, dikkat edilmesi gereken noktaları hep beraber tartışacağız.
Öncelikle gelin hep beraber .Net Core’da, CoderNews adında bir Mvc application’ı aşağıdaki komut ile oluşturalım.
|
1 |
dotnet new mvc -o codernews |
Şimdi gelin Örnek bir Url Satırını aşağıdaki gibi tartışalım: 1. kısım domain adı “borakasmer.com” 2. kısım haber başlığı “black-mirror-4-sezon-basladi” 3. ve son kısım “40694204” Haber ID.
“http://wwwborakasmer.com/black-mirror-4-sezon-basladi/40694204”
News.cs: Haberler adındanki data model aşağıdaki gibi oluşturulur.
|
1 2 3 4 5 6 7 8 9 |
using System; public class News{ public int ID { get; set; } public string Title { get; set; } public string Detail { get; set; } public DateTime CreatedDate { get; set; } public string Image { get; set; } } |
News : Mvc sayfaya gelicek olan Haberler, aşağıda görüldüğü gibi static olarak tanımlanan “List<News> model“, “NewsController” sınıfının constructor’ında sadece 1. kere(hiçbir kayıt yok ise) doldurulur. Index() Action’ında ilgili model, Index.cshtml view’ına gönderilir. Detail() Action’ında, parametre olarak gelen “Title” ve “ID” değerlerine göre istenen Haber filitrelenip, Detail.cshtml view’ına gönderilir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; using codernews.Models; namespace codernews.Controllers { public class NewsController : Controller { public static List<News> model=new List<News>(); public NewsController() { if (model.Count == 0) { model.AddRange(new News[] { new News(){ ID = 1, Title = "Yeni yıldan ‘havalı’ beklentiler", Detail = @"İstanbul gibi Akdeniz ikliminin hâkim olduğu yerlerde en soğuk ay olan şubatta kar yağması kuvvetli bir ihtimal. Diğer zamanlarda da kısa süreli kar yağışları ve güneşli fakat hava kirliliği yüksek günler göreceğiz.", CreatedDate = DateTime.Now, Image="weather.jpg" }, new News(){ ID = 2, Title = "2018’in en popüler adresleri", Detail = @"Her yıl Türkiye’de seyahat edenlerin sayısı hızla artıyor. 2018’de de bu artışın devam etmesi bekleniyor. Artık yeni bir yıla giriyoruz. 2018’de nereye gideceğimize turizm acentaları ve biraz konunun uzmanı yazarlar karar veriyor.", CreatedDate = DateTime.Now, Image="place.jpg" }, new News(){ ID = 3, Title = "Doğa insanları neden hep en mutlu ve en sağlıklı insanlardır?", Detail = @"Bilim adamları ağaçların yanında günde en az yarım saatini geçiren insanların öncelikle mental anlamda gelişim gösterdiğini ve bunun çok kısa sürede de fiziksel yansımalarının gerçekleştiğini söylüyor.", CreatedDate = DateTime.Now, Image="nature.jpg" }, new News(){ ID = 4, Title = "Bilgisayarınızda virüs var mı? İşte anlamanın yolu", Detail = @"Son hastalığınız, sağlığınızla ilgili bazı sorunların işaretçisi olabilir. Benzer şekilde bilgisayarınıza bulaşan bir virüs, bir dizi işaret verebilir. Gördüğünüz tek bir işaret, virüsten kaynaklanmıyor olabilir ancak birkaç belirti, tehlike çanlarını duymanız gerektiği anlamına geliyor.", CreatedDate = DateTime.Now, Image="virus.jpg" } }); } } public IActionResult Index() { return View(model); } public IActionResult Detail(string Title, int ID) { var data = model.FirstOrDefault(news => news.ID == ID); return View(data); } public IActionResult Error() { return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier }); } } } |
Index.cshtml: Mvc Razor Page model olarak “List<News>” beklemektedir. Sayfa üzerinde haberleri 2’şer li kayıt olarak dizebilmek için, her 2 kayıttan sonra “count % 2 ==0“‘a göre “</tr><tr>” konulmuştur. Ayrıca ilgili model içinde gezilerek ilk haber tarihi, haber başlığı ve haber resmi ekrana basılmıştır. Haberlerin detayına gitmemizi sağlayan “Url.FriendlyUrl()” UrlHelper’a, yazının devamında deyinilecektir. Ayrıca sayfa içinde “<tr>” html element’i “@:<tr>” şeklinde konmaz ise, “sayfada bir <tr> açıldı ama kapanmadı” şeklinde bir hata alınmaktadır. Bunu önlemek için text’i Html render eden “@:<tr>” syntax’ı kullanılmalıdır. Böylece “Index.cshtml” sayfası oluşturulurken hata alınmaz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
@model List<News> <div class="container"> <div class="jumbotron"> <h2>Bora News Haberin İlk Adresi</h2> </div> <div align="right"><b>@Model.First().CreatedDate</b></div> <div> <table class="table"> @{ @:<tr> var count=0; foreach(var news in Model) { if (count % 2 == 0) { @:</tr><tr> } <td> <a href="/@Url.FriendlyUrl(news.Title)/@news.ID" target="_blank" style="text-decoration: none;"> <h2> @news.Title</h2> <div> <img src="/images/@news.Image" width="500px"> </div> </a> </td> /* <span>Deneme : @count</span> */ count++; } @:</tr> } </table> </div> </div> |
Ekran Çıktısı: Ana sayfa Index.cshtml sayfanın görünümü, aşağıdaki gibidir.
Şimdi gelin hep beraber bir haber’e tıklandığında, ona ait olan detay sayfasına giden kodları yazalım.
Bunun için, bir mvc sayfada yapılması gereken ilk iş Routingdir.
Startup.cs : Aşağıda görüldüğü gibi “blog” adında “{title}/{id}” parametreleri bekleyen bir route template oluşturulmuştur. Böylece, istenen bir haber tıklandığında ilgili detay sayfasına gidilebilecektir.
|
1 2 3 4 5 6 7 8 9 10 11 |
app.UseMvc(routes => { routes.MapRoute( name: "blog", template: "{title}/{id}", defaults: new { controller = "News", action = "Detail" }); routes.MapRoute( name: "default", template: "{controller=News}/{action=Index}/{id?}"); }); |
Şimdi gelelim esas Url sorununa. Bir haber başlığını Url’e koyabilmek için, öncelikle onu url’e uygun hale getirmeliyiz. Bunun için aşağıda görüldüğü gibi bir FriendlyUrl() adında IUrlHelper Extension methodu oluşturulur.
Model/UrlExtension.cs:
- Extension sınıfı olarak IUrlHelper interface’i kullanılmıştır.
- Gelen Url’in null kontrolünden sonra tamamı küçük harfe çevrilip, sağ ve solundaki boşluklar “trim()” ile alınmıştır.
- Url uzunluğunu belli bir değeri aşmaması adına “>100” karakter sınırlamasına gidilmiştir.
- Tüm türkçe karakterler temizlenmektedir.”$%#@!*?;:~`+=()[]{}|\'<>,/^&””.“
- Regex ile istenmeyen, yani Url’e uygun olmayan tüm karakterler boşluk yani “string.Empty” ile değiştirilir.
- “new Regex(“[^a-zA-Z0-9_-]”)”‘e uymayan karakterler “-” ile değiştirilir.
- Son olarak “while (url.IndexOf(“–“) > -1)” ile “–” karakterler “-” karakterine dönüştürülür.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
using System.Text; using System.Text.RegularExpressions; public static class UrlExtension { public static string FriendlyUrl(this Microsoft.AspNetCore.Mvc.IUrlHelper helper, string url) { if (string.IsNullOrEmpty(url)) return ""; url = url.ToLower(); url = url.Trim(); if (url.Length > 100) { url = url.Substring(0, 100); } url = url.Replace("İ", "I"); url = url.Replace("ı", "i"); url = url.Replace("ğ", "g"); url = url.Replace("Ğ", "G"); url = url.Replace("ç", "c"); url = url.Replace("Ç", "C"); url = url.Replace("ö", "o"); url = url.Replace("Ö", "O"); url = url.Replace("ş", "s"); url = url.Replace("Ş", "S"); url = url.Replace("ü", "u"); url = url.Replace("Ü", "U"); url = url.Replace("'", ""); url = url.Replace("\"", ""); char[] replacerList = @"$%#@!*?;:~`+=()[]{}|\'<>,/^&"".".ToCharArray(); for (int i = 0; i < replacerList.Length; i++) { string strChr = replacerList[i].ToString(); if (url.Contains(strChr)) { url = url.Replace(strChr, string.Empty); } } Regex r = new Regex("[^a-zA-Z0-9_-]"); url = r.Replace(url, "-"); while (url.IndexOf("--") > -1) url = url.Replace("--", "-"); return url; } } |
Yukarıdaki “IUrlHelper” extensin’ın Index.cshtml sayfada kullanım şekli aşağıdaki gibidir: “text-decoration: none;” sitil tanımlaması ile ilgili linklerin altının çizilmesi engellenir. “target=”_blank”” ile de tıklanan haber yeni bir tab’de açılır.
|
1 |
<a href="/@Url.FriendlyUrl(news.Title)/@news.ID" target="_blank" style="text-decoration: none;"> |
Detail.cshtml: Yukarıda görüldüğü gibi Haber başlığı en tepeye yazılmıştır. Oluşturulan “table“‘ın sayfanın ortasında çıkması için “table.css” kullanılmıştır. İlgili haber detayı “@Model.Detail” ve ilgili haber resmi “<img src=”/images/@Model.Image” width=”500px”>” ile ekrana basılmıştır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@model News <link rel="stylesheet" href="~/css/table.css" /> <div class="container"> <div class="jumbotron"> <h2>Bora News @Model.Title</h2> </div> <div align="right"><b>@Model.CreatedDate</b></div> <div> <div> <h3>@Model.Detail</h3> </div> <table class="table"> <tr> <td> <div> <img src="/images/@Model.Image" width="500px"> </div> </td> </tr> </table> </div> </div> |
table.css: İlgili table’ın sayfanın ortasında çıkması için kullanılır.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.table th { text-align: center; } .table { border-radius: 5px; width: 50%; margin: auto; float: none; } |
Geldik bir makalenin sonuna. Bu makalede, bir haber sayfasında başlıca kullanılabilecek Url yapısı ile alakalı olan Haber Detay örneğini, detaylıca incelenmiştir. Düzgün bir Url şemasının Seo üzerindeki etkisi büyüktür. Her bir haber, kendi ile anlamlı Url sayesinde hem daha kolay bulunur, hem de arama motorlarında daha üst sıralarda karşımıza çıkar. Bütün bunların yanında çekilen haber datası, mutlaka bir cache yapısında olmalı ve bunun için sistemin dışında bir RESTful webservisinden faydalanılmalıdır. Son olarak haber içinde kullanılan resim, video gibi contentler, yüksek trafic durumları için mutlaka CDN’den çekilmelidir.
Yeni bir makalede görüşmek üzere hepinize Hoşçakalın.
Source:
- https://stackoverflow.com/questions/17092186/helper-to-generate-friendly-url-in-razor-c-mvc-4
- https://stackoverflow.com/questions/37809/how-do-i-generate-a-friendly-url-in-c
Source Code: https://github.com/borakasmer/Create-Url-From-News-Title
Merhabalar;
Videoda bahsettiğiniz distributed cache’i açabilir misiniz? Teşekkür ederim.
Selamlar Arda,
Sıradaki makalede bu konulara devam edeceğim. Redis’den bahsediyorum mesela :)
merhaba bora abi
güzel bir makale olmuş.haber sayfasının haricinde kategori sayfasıda olsaydı nasıl bir route yapabiliriz.
yani iki ayrı route nasıl tanımlarız
Selamlar Kazım,
2 farklı router’a gerek yok. Aşağıdaki gibi tanımlanabilir.
routes.MapRoute(
name: “blog”,
template: “{category}/{title}/{id}”,
defaults: new { controller = “News”, action = “Detail” });
İyi çalışmalar.
Hocam konu ile alakalı değil ancak , site urlimiz şu şekilde idi ?cityId=34 gibi bunu şimdi ?cityId=İstanbul olarak 301 yönlendirmesini yapmak istiyorum nasıl yapabilirim
Selamlar Emre,
En başta “cityId=İstanbul” ile Sayfayı bulamayacak. Hataya düşecek.
Global.asax’da “void Application_Error(object sender, EventArgs e)”‘de “sender”‘da “İstanbul”‘u yakalayıp karşılığı olan 34 kodunu bulup ==> permanent redirect 301 yapacaksın.
İyi çalışmalar.
Selamlar ;
Bora hocam Açık Ögretim Okuyorum Dersler İyi Degil Ve Ben C# ,Asp.net ,C++ Ögrenmek İstiyorum Ve Kendime Güveniyorum Motivasyonum İyi bir yazılımcı olabilirmiyim Günde 3 4 Saat Calısarak ?
Ve Hocam Bana Visual Basic 6.0 İndirme linki verirmsiniz bulamadım _?
Ve dee :
Bu tarih itibari ile şu link’den http://nuke.vbcorner.net/Articles/VB60/VisualStudio6Installer/tabid/93/language/en-US/Default.aspx indirebilirsiniz.
Selamlar;
Güzel bir video çekip size cevap vereceğim. Alt yapınıza bağlı. Çalışarak her şey olabilirsiniz. Ama ne kadar iyi olucağınız önceki birikimleriniz ile doğru orantılı.
Bora Bey merhabalar,
Sizin yönteminizi ASP.NET MVC üzerinde PartialView üzerinde tıklanan habere göre okuma işlemi gerçekleştirmeye çalışıyorum.Belirttiğiniz şekilde link oluşuyor ancak Route.Config içerisine yönlendirme yaptığımda ;
‘The parameters dictionary contains a null entry for parameter id of non-nullable type ‘System.In32’ for method ‘System.Web.Mvc.ActionResult HaberDetay(System.String32,Int32) … Controllers.ContentController ….” şeklinde.
Ancak hatayı aldığım kısım DefaultController içerisinde olan Etkinlikler kısmında ve Ana Sayfamdaki etkinlik takvimim kayboluyor.
Yani şöyle düşünün ana sayfada sol tarafta haber listesi, sağ tarafta etkinlik takvimim var.
Ancak daha hiçbir habere tıklamadan böyle bir yönlendirme yapması saçma geldi. Habere tıklayınca sayfam açılıyor ancak ana sayfada böyle bir sıkıntı yaratıyor.
Hocam FriendlyUrl extension Index.cshtml içerisinde bulunamıyor.
Selam Hakan;
“public static class UrlExtensio”n sınıfına namespace verme. Olmadı bir kaynak kodları indirip denermisin.
İyi çalışmalar.
Hocam nacizane .net core da dil bazlı url üzerine pek makele yok.
/tr/hakkimizda
/en/about-us
şeklinde belki el atarsınız o konuya da :)
merhaba, bir örnek de mssql server dan verileri çekerek yapabilir misiniz.
teşekkürler
Merhaba hocam.
Asp.Net.Core 3.1 ile hazırladığım projem de sizin “.Net Core Mvc’de Bir Haber Başlığını Url’e Koyma” adlı videonuzu isleyerek, vermiş olduğunuz kodlardan yararlanmak istedim.
Ancak nedenini bilemediğim bir sorun yaşıyorum. Şöyle ki, farklı kontroller üzerindeki detay sayfalarına bir türlü gidemiyor. Sadece bir tek kontrole bağlı datay sayfasında çalışıyor. Umarım doğru şekilde izah edebildim!
Benim projemdeki “STARTUP” üzerindeki Route yapılanmam şu şekilde.
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: “default”,
pattern: “{area=Customer}/{controller=Makaleler}/{action=Index}/{id?}”);
endpoints.MapControllerRoute(
name: “yazar”,
pattern: “{Baslik}/{id}”,
defaults: new { area = “Customer”, controller = “Makaleler”, action = “Details”});
endpoints.MapControllerRoute(
name: “hoca”,
pattern: “{isim}/{id}”,
defaults: new { area = “Admin”, controller = “Yazarekle”, action = “Details” });
endpoints.MapRazorPages();
});
Bu konu ile ilgili bilgi verebilmeniz mümküm mü?
Saygı ve sevgilerimle.
çözüm bulabildinmi
İlave olarak şu bilgiyi de vermek isterim!
Sizin belirtmiş olduğunuz
@item.Baslik Bu şekilde kullandığımda sorun çıkıyor.
Diğer türlü aşağıdaki gibi düzenlersem aynı proje de sorunsuz çalışıyor.
@*
@item.Baslik
*@
Teşekkürler Turan..
Hocam peki sizin sitenizde hiç Id bile yok Direk haber başlığı. Öyle yapmak istiyorum bende. Nasıl yapabiliriz? Gerçi Id de lazım olabiliyor o zaman input type hidden ile Id demi vermeliyiz.
Merhablar Bora bey bu sonundakı id parametresi nasıl gizleyebiliriz
Selamlar,
Get yerine Post yapıp id’yi parametre olarak gönderip saklayabilirsiniz. Url kısmına gene SEO amacı ile haberin title’ını koymayı unutmayınız.
İyi çalışmalar.
Cevabınız için teşekkür ederim ama nasıl yapacağımı tam olarak anlayamadım
Gayet Güzel Bir Paylaşım Olmuş Teşekkürler
Tesekkur ederim..