Visual Studio 2022 Programında Asp.Net Core Web Projesi Oluşturma

Microsoft tüm platformlarda sorunsuz bir şekilde çalışabilmesi için Core teknolojisini piyasaya sürmüştür. Açık kaynak olan bu proje vasıtasıyla MVC ve Razor kullanımını ekleyebilir, yeni teknolojileri kullanabiliriz. Core teknolojisini kullanabilmek için .Net Core SDK dosyasının bilgisayarınıza yüklü olması gerekir. Mevcüt bilgisayarda en son yüklü Core sürümünü öğrenmek için Aşağıdaki kodu Dos satırında çalıştırmanız yeterli olacaktır.

c:\>dotnet --info

Gerekli sürümler bilgisayarıızda yüklü ise yeni bir proje oluşturarak işleme başlayalım.

Visual Studio 2022 programını açalım.

Asp.Core uygulamalarını D sürücüsünde CoreWeb klasörü altında saklayacağım. Bunun için öncelikle boş bir Solution oluşturmak istiyorum.

Create a new project diyerek yeni proje oluşturalım.

Create a new project diyalog pencersinde arama kutusuna blank yazıyorum. Ekrana gelen Blank Solution şablonunu seçiyorum. Next diyerek devam ediyorum.

Solution name kutusuna CoreWeb yazıyorum. Location kutusunda yazılanları siliyorum ve oraya D:\ yazyıyorum. Create diyerek işlemi tamamlıyorum. Artık D sürücüsünde CoreWeb isimli bir klasörü proje klasörü olarak tanımlamış olduk.

Core teknolojisini kullanarak web projeleri geliştirmek istiyorsak bu işlemleri Razor Page ya da MVC teknolojilerini kullanabiliriz. RazorPage ile proje geliştirme işlemini buradan okuyabilirsiniz.

Ben Mvc isminde boş bir klasör ekliyorum. Core teknolojilerini tam olarak kavramak için öncelikle projeleri Empty olarak oluşturacağım. Daha sonra bu teknolojilere göre projeyi geliştireceğim. 

RazorPage ile ilgili gerekli bilgiler verdiğim adreste yer almaktadır. Şimdi Mvc teknolojisini anlamaya çalışalım. Bunun için Mvc klasörü üzerinde farenin sağ tuşuna basalım ve ekrana gelen içerik menüsünde yer alan Add komut grubunu seçelim. Ekrena gelen komutlardan New project komutunu seçerek yeni bir proje oluşturalım. 

Add a new project diyalog pencersinde Dil olarak c#, platform olarak All platforms, ortam olarak Web seçelim. Ekrana gelen şablonlardan Asp.Net Core Empty seçelim. Next diyerek devam edelim.

Proje ismi olarak MesajGoruntule yazalım. Next diyerek devam edelim. Ekrana gelen pencerede Framework olarak .Net 8,0 kalabilir. Configure for Https onay kutusunu iptal edelim. Create diyerek projeyi oluşturalım.

Böylece boş bir Core projesi oluşturmuş olduk. Şimdi projeyi çalıştıralım. Web sayfasında "Hello World" mesajını görürsünüz. Projede herhangi bir web sayfası olmamasına rağmen bu mesaj nereden geldi. Bu mesaj program.cs isimli ayar dosyasının içinde yazan kodlardan dolayı gelir. Burada yer alan kodlar aşağıda yer almaktadır.

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.MapGet("/", () => "Hello World!");

app.Run();

Burada "Hello World" yazısını "Merhaba Dünya" diyerek değiştirelim ve projeyı çalıştıralım. Tarayıcıda "Merhaba Dünya" yazısını görürsünüz. Projede web sayfası olmamasına rağmen bu mesaj tarayıcıda nasıl görüntülendi. Proje aslında tipik bir Console uygulaması. Sonuç Dos ekranında değil tarayıcıda görüntülenmektedir. Eğer bu mesajı tarayıcıda görebiliyorsanız projenin hatasız bir şekilde oluştuğunu söyleyebiliriz. Ben burada MapGet() metodunu aşağıdaki gibi düzenleyip web sayfasında toplama işlemini yapacağım.

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.MapGet("/", () =>
{
    var a = 10;
    var b = 20;
    var c = a + b;
    return $"{a} + {b} = {c}";
});

app.Run();

Projeyi çalıştırdığımızda web sayfasında 10 + 20 = 30 sonucunu görürsünüz.  Sıra geldi projede MVC platformlarını kurma işlemini yapmaya. Öncelikle program.cs isimli dosyada projenin Mvc projesi olduğunu belirtelim.

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddMvc();
var app = builder.Build();

app.Run();

Daha sonra projeye M harfini temsil eden Models, V harfini temsil eden Views, C harfini temsil eden Controllers  klasörlerini ekleyelim. Controllers klasörü içine HomeComtroller isminde bir controller dosyası ekleyelim. Dosyamızın içeriği aşağıdaki gibi olacaktır.

using Microsoft.AspNetCore.Mvc;

namespace ShowMassage.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Burada dosya ismi verilirken şunlara dikkat etmeliyiz. Proje ilk çalıştırıldığında hangi bölüme gidecekse o bölüm Controller kısmında belirtilir. Bu dosyada proje ilk Home kısmına gidecektir. Controller yazısı ise o dosyanın hangi amaç için kullanıldığını belirtir. Controller dosyası bir view çalıştırır. Burada view dosyamız Index dosyasıdır. Şimdi bu dosyayı Views klasörü altında oluşturalım. Bu klasör içinde bir Razor View dosyası oluşturulur. Dosyayı şöyle düzenleyelim.

@{
    <h1>Ben view dosyasıyım</h1>
}

Projemizi çalıştıralım. Web sayfası çalışmayacak ya da wwwroot klasörü içinde yer alan dosyayı gösterecektir. Çinkü projenin bir MVC projesi olduğunu belirtmedik. Bunu program.cs tarafında şöyle yapmalıyız.

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddMvc();
var app = builder.Build();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}"
    );

app.Run();

Tekrar çalıştıralım projeyi. Projede controller ile belirtilen Index dosyası views klasöründe home klasörü altında aranacaktır. Ancak bu klasör olmadığı için hata verecektir. Klasörümüzü oluşturalım ve Index dosyasını bunun altına kopyalayalım. Projeyi çalıştıralım. Hatasız bir şekilde sonucu görürsünüz. Bu arada oluşabilecek hataların deneme aşamasında görütülenmesinde yarar vardır. Aşağıdaki satırları program.cs dosyasına ekleyelim.

app.UseDeveloperExceptionPage();
app.UseStatusCodePages();

Sıra geldi modelleme işlemini yapmaya. Burada tanımladığımız model yapısı kullanıcı ile sunucu arasındaki iletişim desenlerini ayarlamak için kullanılır. Bu işlemleri basit bir toplama işleminde yapalım. Öncelikle Models klasörüne gelelim. Bu kalsör altında Addition.cs isminde bir class oluşturalım. Burada aşağıdaki değişkenleri tanımlayalım.

namespace ShowMessage.Models
{
    public class Addition
    {
        public int a { get; set; }
        public int b { get; set; }
        public int c { get; set; }
    }
}

Burada tanımladığımız modele göre Controller ile View arasında bilgi alış verişini gerçekleştirelim. HomeController dosyasını aşağıdaki gibi düzenleyelim.

        public IActionResult Index()
        {
            Models.Addition topla = new Models.Addition();

            topla.a = 3;
            topla.b = 5;
            topla.c = topla.a + topla.b;
            return View(topla);
        }

Şimdi bu bilgileri karşılayacak view dosyasını düzenleyelim.

@model ShowMessage.Models.Addition
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Toplama İşlemi</title>
</head>
<body>
    <pre>@Model.a + @Model.b = @Model.c</pre>
</body>
</html>

Projeyi çalıştıralım. Toplama işleminin sonucunu görürsünüz.