ASP.NET Core ile Proje Oluşturma

Visual Studio 2022 kullanacağım. Create a New Project diyelim. Normalde hazır şekilde MVC kurulu şekilde projemizi başlatabiliriz. Ancak ben boş bir ASP.NET Core web uygulaması oluşturmayı tercih ediyorum. Bunun sebebi, yapılacak uygulamanın yapısını daha temelden görüp neyin ne olduğunu daha iyi kavramak için.

Daha sonrasında projeyi adlandıralım.

Hedef olarak .NET 6.0'ı seçelim. Hem yeni teknolojiye ayak uydurmuş oluruz.

Artık boş projemiz oluşturuldu. Önceden ASP.NET Core ile proje yaptıysanız startup.cs adlı bir dosya olduğunu bilirsiniz, artık yok. Program.cs dosyasında basit bir endpoint oluşturulmuş ve "Hello World!" string değeri döndürüyor.

Wev sayfaların dinamikliği için razor kullanacağız diye bahsetmiştim. O sebeple Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation paketini indirmeliyiz. En güncel halini nuget package manager üzerinden kuralım. Kurduktan sonra Program.cs dosyasında aşağıdaki eklemeler ve değişiklikler yapılır:

var builder = WebApplication.CreateBuilder(args);

// mvc service
builder.Services.AddControllersWithViews();


var app = builder.Build();

// alınan hataları görmek için ekledik
app.UseDeveloperExceptionPage();
// controller'a bağlı default route builder'i aktif ettik.
app.MapDefaultControllerRoute();

app.Run();

Sonrasında ise static dosyaların bulunacağı bir klasöre ihtiyacımız var. Bunun adı wwwroot klasörüdür. Eklemek için projeye sol tıklanır ve wwwroot adında bir klasör eklenir. Ancak işimiz tam bitmedi. Static dosyaları projede kullanabilmemiz için program.cs dosyasında middleware eklememiz gerek:

var builder = WebApplication.CreateBuilder(args);

// mvc service
builder.Services.AddControllersWithViews();


var app = builder.Build();

// alınan hataları görmek için ekledik
app.UseDeveloperExceptionPage();

// statik dosyaları kullan.
app.UseStaticFiles();

// controller'a bağlı default route builder'i aktif ettik.
app.MapDefaultControllerRoute();

app.Run();

Şimdi sıra projede MVC yapısını oluşturmaya geldi. Models, Controllers ve Views adında üç tane klasör oluşturuyoruz proje içinde: 

İlk controller'i ekleyelim. Peki controller nedir? Controller basitçe açıklamak gerekirse HTTP requestleri ele alan bir yapıdır. Örneğin, HomeController içinde Aciklama adında bir action metodunun çalışması için Home/Aciklama request'i verilmesi lazım. Benim basitçe anladığım böyle bir şey. Hadi bir tane oluşturalım.

Controllers klasörüne sağ tıkla ve Add butonu ile Controller'i seç. Sonrasında MVC Controller - Empty seç ve TestController.cs adında bir dosya oluştur. İlk controller başarılı bir şekilde eklendi.

Oluşturduğumuz contoller'a sağ tıklayın ve Add View ile devam edin:

Sonrasında hiçbir şeyi değiştirmeden Add butonuna tıklayın. Bu süreçte biraz bekleyebilirsiniz:

Daha sonrasında h1 etiket içeriğini değiştirdim. 

Projeyi çalıştıralım ve projemize bağlanalım. Muhtemelen This localhost page can’t be found gibi bir hata alacaksınız. Şimdi url adresinize /Test ekleyip öyle devam edin:

Layout sayfamızıda eklememiz gerek. Layout sitenin sabit kısımlarını içeren bir yapıdır. View klasörüne sağ tıklayın ve add view yapın. Sonrasında Razor View - Empty seçeneğini seçip ekleyin. Sonraki ekranda ise Razor Layout'u seçin.

Views klasöründe _Layout.cshtml adlı bir dosya oluşmuş olacak.

Projeye bootstrap eklemek istiyorum. Bunun için npm kullanacağım. Proje dizinine npm Configuration file'ı dahil edelim:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "bootstrap": "5.1.3"
  }
}

Bootstrap'i yukarıdaki gibi ekledim. Kaydettikten belli bir süre sonra dependencies klasöründe npm klasörü ve istediğimiz kütüphane yüklenmiş olacaktır. Eğer görmüyorsanız dosyaları muhtemelen daha projeye dahil etmemiş olmanızdandır. O sebeple Show All Files butonuna tıklarsak, proje dizininde node_modules klasörünü projeye dahil edelim. Yükleme tamam ancak bunu kullanmamız için Program.cs üzerinde bir ayar yapmamız lazım:

...
// alınan hataları görmek için ekledik
app.UseDeveloperExceptionPage();

// statik dosyaları kullan.
app.UseStaticFiles();

app.UseStaticFiles(
        new StaticFileOptions()
        {
            FileProvider = new PhysicalFileProvider(Path.Combine(builder.Environment.ContentRootPath, @"node_modules")),
            RequestPath = "/staticfiles"
        }
    );
...

Şimdi çalışıyor mu diye bir test yapalım. Test içerisinde yer alan index view'de layout'u tanımlayalım:

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/_Layout.cshtml";
}

<h1>Index</h1>

Sonrasında projeyi çalıştıralım:

Başarılı bir şekilde eklenmiş. Bu yazı fazlasıyla uzun oldu o yüzden burada sonlandırıyorum. Zaten genel olarak projemizin geliştirileceği alanı temel olarak yapmış olduk.