Öğretici: Visual Studio'da C# ve ASP.NET Core kullanmaya başlama

ASP.NET Core ile C# geliştirmeye yönelik bu öğreticide Visual Studio'da bir C# ASP.NET Core web uygulaması oluşturacaksınız.

Bu öğretici size şunları nasıl yapacağınızı gösteriyor:

  • Visual Studio projesi oluşturma
  • C# ASP.NET Core web uygulaması oluşturma
  • Web uygulamasında değişiklik yapma
  • IDE özelliklerini keşfedin
  • Web uygulamasını çalıştırma

Önkoşullar

Bu öğreticiyi tamamlamak için şunları yapmanız gerekir:

  • Visual Studio yüklendi. Ücretsiz bir sürüm için Visual Studio indirme sayfasını ziyaret edin. En son Visual Studio sürümüne yükseltme hakkında daha fazla bilgi için bkz. Visual Studio güncelleştirmelerini.
  • ASP.NET ve web geliştirme iş yükü yüklü. Visual Studio'da bu iş yükünü doğrulamak veya yüklemek için Araçları>Araçları ve Özellikleri Alöğesini seçin. Daha fazla bilgi için bkz. iş yüklerini veya tek tek bileşenleri değiştirme.

Proje oluşturma

İlk olarak bir ASP.NET Core projesi oluşturursunuz. Proje türü, tam işlevsel bir web sitesi oluşturmak için ihtiyacınız olan tüm şablon dosyalarıyla birlikte gelir.

  1. Başlangıç penceresinde yeni proje oluştur seçin.

    Ekran görüntüsü Visual Studio'ya yönelik başlangıç penceresini gösterir. Yeni proje oluştur seçeneği vurgulanır.

  2. Yeni proje oluştur penceresinde Dil listesinden C# seçin. Ardından platform listesinden Windows'yi ve proje türleri listesinden Web'i seçin.

    Dil, platform ve proje türü filtrelerini uyguladıktan sonra ASP.NET Core Web App şablonunu seçin ve ardından İleri seçin.

    Visual Studio'daki Yeni Proje iletişim kutusunda vurgulanmış ASP.NET Core Web App proje şablonunu gösteren ekran görüntüsü.

  3. Yeni Projenizi Yapılandırma penceresinde, Proje adı alanına MyCoreApp girin. Ardından İleri öğesini seçin.

    Proje adı alanına Girilen MyCoreApp ile Visual Studio'da yeni projenizi yapılandırma penceresini gösteren ekran görüntüsü.

  4. Ek bilgiler penceresinde Hedef Çerçeve alanında .NET Core 3.1 göründüğünü doğrulayın.

    Bu pencereden Docker desteğini etkinleştirebilir ve kimlik doğrulama desteği ekleyebilirsiniz. Kimlik Doğrulama Türü açılan menüsünde aşağıdaki dört seçenek bulunur:

    • Hiçbiri: Kimlik doğrulaması yok.
    • Bireysel hesaplar: Bu kimlik doğrulamaları yerel veya Azure tabanlı bir veritabanında depolanır.
    • Microsoft kimlik platformu: Bu seçenek kimlik doğrulaması için Microsoft Entra Id veya Microsoft 365 kullanır.
    • Windows: İntranet uygulamaları için uygundur.

    Docker'ı Etkinleştir kutusunu işaretsiz bırakın ve Kimlik Doğrulama Türü için Yok seçin.

    Hedef çerçevenin .NET Core 3.1 olarak ayarlandığı Ek bilgi penceresindeki varsayılan ayarları gösteren ekran görüntüsü.

  5. seçin, ardındanoluşturun.

Visual Studio yeni projenizi açar.

  1. Başlangıç penceresinde yeni proje oluştur seçin.

    Ekran görüntüsü Visual Studio'ya yönelik başlangıç penceresini gösterir. Yeni proje oluştur seçeneği vurgulanır.

  2. Yeni proje oluştur penceresinde Dil listesinden C# seçin. Ardından, Tüm platformlar listesinden Windows seçin ve Tüm proje türleri listesinden Web seçin.

    Dil, platform ve proje türü filtrelerini uyguladıktan sonra ASP.NET Core Web App (Razor Pages) şablonunu seçin ve ardından İleri seçin.

    Yeni proje oluştur sayfasında seçilen ve vurgulanan ASP.NET Core Web App proje şablonunu gösteren ekran görüntüsü.

  3. Yeni Projenizi Yapılandırma penceresinde, Proje adı alanına MyCoreApp girin. Ardından İleri öğesini seçin.

    Proje adı alanına MyCoreApp ile Visual Studio'da yeni projenizi yapılandırma penceresini gösteren ekran görüntüsü.

  4. Ek bilgiler penceresinde, .NET 8.0'nin Hedef Çerçeve alanında göründüğünü doğrulayın.

    Bu pencereden kapsayıcı desteğini etkinleştirebilir ve kimlik doğrulama desteği ekleyebilirsiniz. Kimlik Doğrulama Türü açılan menüsünde aşağıdaki dört seçenek bulunur:

    • Hiçbiri: Kimlik doğrulaması yok.
    • Bireysel hesaplar: Bu kimlik doğrulamaları yerel veya Azure tabanlı bir veritabanında depolanır.
    • Microsoft kimlik platformu: Bu seçenek kimlik doğrulaması için Microsoft Entra Id veya Microsoft 365 kullanır.
    • Windows: İntranet uygulamaları için uygundur.

    Kapsayıcı desteğini etkinleştir kutusunun işaretli olmadığından emin olun ve Kimlik Doğrulama Türü için Hiçbiri seçeneğini seçin.

    Hedef çerçevenin .NET 8.0 olarak ayarlandığı Ek bilgi penceresindeki varsayılan ayarları gösteren ekran görüntüsü.

  5. seçin, ardındanoluşturun.

Visual Studio yeni projenizi açar.

Çözümünüz hakkında

Bu çözüm, Razor Sayfası tasarım modelini izler. Razor Sayfasının içine model ve denetleyici kodunu dahil etmek üzere sadeleştirildiği için Model-View-Controller (MVC) tasarım deseninden farklıdır.

Çözümünüze göz atın

  1. Proje şablonu, MyCoreAppadlı tek bir ASP.NET Core projesiyle bir çözüm oluşturur. İçeriğini görüntülemek için Çözüm Gezgini sekmesini seçin.

    Ekran görüntüsü, Visual Studio'daki Çözüm Gezgini'nde seçilen MyCoreApp projesini gösterir.

  2. Sayfaları klasörünü genişletin.

    Ekran görüntüsü, Visual Studio'daki Çözüm Gezgini'ndeki Sayfalar klasörünün içeriğini gösterir..

  3. Index.cshtml dosyasını seçin ve dosyayı kod düzenleyicisinde görüntüleyin.

    Ekran görüntüsü, Visual Studio kod düzenleyicisinde açık olan Index dot c s h t m l dosyasını gösterir.

  4. Her .cshtml dosyasının ilişkili bir kod dosyası vardır. Kod dosyasını düzenleyicide açmak için Çözüm Gezgini'ndeki Index.cshtml düğümünü genişletin ve Index.cshtml.cs dosyasını seçin.

    Ekran görüntüsü, Visual Studio'daki Çözüm Gezgini'nde seçilen Index.cshhtml dosyasını gösterir.

  5. kod düzenleyicisinde Index.cshtml.cs dosyasını görüntüleyin.

    Visual Studio kod düzenleyicisinde açık olan Index.c_shtml.cs dosyasını gösteren ekran görüntüsü.

  6. Proje, web sitenizin kökü olan bir wwwroot klasörü içerir. İçeriğini görüntülemek için klasörü genişletin.

    Ekran görüntüsü, Visual Studio'daki Çözüm Gezgini'nde seçilen w w kök klasörünü gösterir.

    CSS, görüntüler ve JavaScript kitaplıkları gibi statik site içeriğini doğrudan istediğiniz yollara yerleştirebilirsiniz.

    Proje, çalışma zamanında web uygulamasını yöneten yapılandırma dosyalarını da içerir. Varsayılan uygulama yapılandırmaappsettings.jsoniçinde depolanır. Ancak, appsettings.Development.jsonkullanarak bu ayarları geçersiz kılabilirsiniz.

  7. appsettings.Development.json dosyasını görüntülemek için appsettings.json dosyasını genişletin.

    Visual Studio'daki Çözüm Gezgini'nde seçili ve genişletilmiş appsettings.json'un gösterildiği ekran görüntüsü.

Çalıştırma, hata ayıklama ve değişiklik yapma

  1. Uygulamayı hata ayıklama modunda derlemek ve çalıştırmak için araç çubuğunda iis express düğmesini seçin. Alternatif olarak, F5tuşuna basın veya menü çubuğundan Hata Ayıklama>Hata Ayıklamayı Başlat öğesine gidin.

    Ekran görüntüsü, Visual Studio'daki araç çubuğunda I S Express düğmesinin vurgulanmış olduğunu gösterir.

    Not

    'IIS Express'web sunucusuna bağlanılamıyor hata iletisi alırsanız, Visual Studio'yu kapatın ve ardından programı yönetici olarak yeniden başlatın. Bu görevi, Başlat Menüsünden Visual Studio simgesine sağ tıklayıp bağlam menüsünden Yönetici olarak çalıştır seçeneğini belirleyerek yapabilirsiniz.

    Iis SSL Express sertifikasını kabul etmek isteyip istemediğinizi soran bir ileti de alabilirsiniz. Kodu web tarayıcısında görüntülemek için önce Evet, ardından bir izleme güvenlik uyarısı iletisi alırsanız Evet seçin.

  2. Visual Studio bir tarayıcı penceresi başlatır. Ardından menü çubuğunda Giriş ve Gizlilik sayfalarını görmeniz gerekir.

  3. Menü çubuğundan gizlilik seçin. Tarayıcıdaki Gizlilik sayfası, Privacy.cshtml dosyasında ayarlanan metni işler.

    Ekran görüntüsünde MyCoreApp Gizlilik sayfası şu metinle gösterilir: Sitenizin gizlilik ilkesini ayrıntılı olarak görüntülemek için bu sayfayı kullanın.

  4. Visual Studio'ya dönün ve hata ayıklamayı durdurmak için Shift+F5 basın. Bu eylem, tarayıcı penceresinde projeyi kapatır.

  5. Visual Studio'da düzenleme için privacy.cshtml açın. Ardından, tümceyi silin Sitenizin gizlilik ilkesi ayrıntıları için bu sayfayı kullanın ve Bu sayfa @ViewData["TimeStamp"]itibarıyla yapım aşamasındadır.

    Ekran görüntüsü, güncellenmiş metin ile birlikte Visual Studio kod düzenleyicisinde açık olan Privacy dot c s h t m l dosyasını gösterir.

  6. Şimdi kod değişikliği yapalım. Privacy.cshtml.csseçin. Ardından, aşağıdaki kısayolu kullanarak dosyanın en üstündeki using yönergelerini temizleyin:

    Fareyle geçiş yapın veya gri using yönergesi seçin. Hızlı İşlemler ampulü, imlecin altında veya sol kenar boşluğunda görünür. Ampulü seçin ve ardından Gereksiz kullanımı kaldırseçin.

    Ekran görüntüsü Visual Studio kod düzenleyicisinde Gizlilik noktası c s h t m l dosyasını gösterir ve Hızlı Eylemler araç ipucu kullanım yönergesini gri olarak gösterir.

    Şimdi ne değiştiğini görmek için Değişiklikleri önizle seçin.

    Değişiklikleri Önizle iletişim kutusunu gösteren ekran görüntüsü. İletişim kutusu kaldırılan yönergeyi gösterir ve kaldırıldıktan sonra kod değişikliğinin önizlemesini görüntüler.

    Seç,Uygula. Visual Studio gereksiz using yönergelerini dosyadan siler.

  7. Ardından, OnGet() yönteminde gövdeyi aşağıdaki kodla değiştirin:

    public void OnGet()
    {
       string dateTime = DateTime.Now.ToShortDateString();
       ViewData["TimeStamp"] = dateTime;
    }
    
  8. DateTimealtında dalgalı bir alt çizgi göründüğüne dikkat edin. Bu tür kapsamda olmadığından dalgalı alt çizgi görüntülenir.

    Ekran görüntüsünde Visual Studio kod düzenleyicisinde DateTime için dalgalı alt çizgi biçiminde bir hata işareti gösterilir.

    Aynı hataların burada listelendiğini görmek için Hata Listesi araç çubuğunu açın. Hata Listesi araç çubuğunu görmüyorsanız, üst menü çubuğundan Görünüm'e gidin ve>Hata Listesi seçeneğine tıklayın.

    Ekran görüntüsü, Visual Studio'da DateTime'ın listelendiği Hata Listesi araç çubuğunu gösterir.

  9. Şimdi bu hatayı düzeltelim. Kod düzenleyicisinde, imlecinizi hatayı içeren satırın üzerine getirin ve sol kenar boşluğundaki Hızlı Eylemler ampulü seçin. Ardından açılan menüden Sistem'i kullanarak 'ı seçin; Bu yönergeyi dosyanızın en üstüne eklemek ve hataları çözmek için.

    Ekran görüntüsü, Sistem'i kullanırken fareyle açılan menüsündeki Hızlı Eylemler seçeneklerini gösterir.

  10. Projenizi web tarayıcısında açmak için F5 basın.

  11. Değişikliklerinizi görüntülemek için web sitesinin üst kısmındaki Gizlilik seçin.

    Yaptığınız değişiklikleri içeren güncelleştirilmiş Gizlilik sayfasını gösteren ekran görüntüsü.

  12. Hata ayıklamayı durdurmak için web tarayıcısını kapatın, Shift+F5 basın.

Giriş sayfanızı değiştirme

  1. Çözüm GezginiSayfalar klasörünü genişletin ve Index.cshtmlöğesini seçin.

    Ekran görüntüsü, Çözüm Gezgini'ndeki Sayfalar düğümü altında seçilmiş olan Index.cshtml dosyasını gösterir.

    Index.cshtml dosyası, web uygulamasında web tarayıcısında çalışan Giriş sayfanıza karşılık gelir.

     Ekran görüntüsü, tarayıcı penceresinde web uygulamasının Giriş sayfasını gösterir.

    Kod düzenleyicisinde, Giriş sayfasında görüntülenen metnin HTML kodunu görürsünüz.

    Ekran görüntüsü, Visual Studio kod düzenleyicisinde Ana sayfa için Index dot c s h t m l dosyasını gösterir.

  2. Hoş Geldiniz metnini Hello World ile değiştirin!

    Ekran görüntüsü, Visual Studio kod düzenleyicisinde Hoş Geldiniz metni Hello World! olarak değiştirilmiş Index dot c s h t m l dosyasını gösterir.

  3. IIS Express seçin veya uygulamayı çalıştırmak ve bir web tarayıcısında açmak için Ctrl+F5 basın.

    Visual Studio araç çubuğunda IIS Express düğmesinin vurgulandığı ekran görüntüsü.

  4. Web tarayıcısında, yeni değişikliklerinizi Giriş sayfasında görürsünüz.

    Ekran görüntüsü, tarayıcı penceresinde web uygulamasının Giriş sayfasını gösterir. Güncelleştirilmiş metinde Merhaba Dünya! yazıyor

  5. Web tarayıcısını kapatın, hata ayıklamayı durdurmak için Shift+F5 basın ve projenizi kaydedin. Artık Visual Studio'yu kapatabilirsiniz.

Çözümünüze göz atın

  1. Proje şablonu, MyCoreAppadlı tek bir ASP.NET Core projesiyle bir çözüm oluşturur. İçeriğini görüntülemek için Çözüm Gezgini sekmesini seçin.

    Ekran görüntüsü, Seçilen MyCoreApp projesini ve içeriğini Visual Studio'daki Çözüm Gezgini'nde gösterir.

  2. Sayfaları klasörünü genişletin.

    Ekran görüntüsü, Çözüm Gezgini'ndeki Sayfalar klasörünün içeriğini gösterir.

  3. Index.cshtml dosyasını seçin ve kod düzenleyicisinde görüntüleyin.

    Ekran görüntüsü, Visual Studio Code düzenleyicisinde açık olan Index.cshtml dosyasını gösterir.

  4. Her .cshtml dosyasının ilişkili bir kod dosyası vardır. Kod dosyasını düzenleyicide açmak için Çözüm Gezgini'ndeki Index.cshtml düğümünü genişletin ve Index.cshtml.cs dosyasını seçin.

    Ekran görüntüsü, Visual Studio'daki Çözüm Gezgini'nde seçilen Index.cshtml dosyasını gösterir.

  5. kod düzenleyicisinde Index.cshtml.cs dosyasını görüntüleyin.

    Ekran görüntüsü, Visual Studio Code düzenleyicisinde açılan Index.cshtml.cs dosyasını gösterir.

  6. Proje, web sitenizin kökü olan bir wwwroot klasörü içerir. İçeriğini görüntülemek için klasörü genişletin.

    Ekran görüntüsü, Visual Studio'daki Çözüm Gezgini'nde seçilen w w kök klasörünü gösterir.

    CSS, görüntüler ve JavaScript kitaplıkları gibi statik site içeriğini doğrudan istediğiniz yollara yerleştirebilirsiniz.

  7. Proje, çalışma zamanında web uygulamasını yöneten yapılandırma dosyalarını da içerir. Varsayılan uygulama yapılandırmaappsettings.jsoniçinde depolanır. Ancak, appsettings.Development.jsonkullanarak bu ayarları geçersiz kılabilirsiniz. appsettings.Development.json dosyasını görüntülemek için appsettings.json dosyasını genişletin.

    Ekran görüntüsü, Visual Studio'daki Çözüm Gezgini'nde appsettings.json seçili ve genişletilmiş olarak gösterir, bu da appsettings.Development.json'ü kullanıma sunar.

Çalıştırma, hata ayıklama ve değişiklik yapma

  1. Uygulamayı hata ayıklama modunda derlemek ve çalıştırmak için araç çubuğunda https düğmesini seçin. Alternatif olarak, F5tuşuna basın veya menü çubuğundan Hata Ayıklama>Hata Ayıklamayı Başlat öğesine gidin.

    Ekran görüntüsü, Visual Studio'da araç çubuğunda vurgulanan https düğmesini gösterir.

    Not

    ASP.NET Core SSL sertifikasını kabul etmek isteyip istemediğinizi soran bir ileti de alabilirsiniz. Kodu web tarayıcısında görüntülemek için önce Evet, ardından bir izleme güvenlik uyarısı iletisi alırsanız Evet seçin. ASP.NET Core SSL uygulama hakkında daha fazla bilgi edinin.

  2. Visual Studio bir tarayıcı penceresi başlatır. Ardından menü çubuğunda Giriş ve Gizlilik sayfalarını görmeniz gerekir.

  3. Menü çubuğundan gizlilik seçin. Tarayıcıdaki Gizlilik sayfası, Privacy.cshtml dosyasında ayarlanan metni işler.

    Ekran görüntüsünde MyCoreApp Gizlilik sayfası şu metinle gösterilir: Sitenizin gizlilik ilkesini ayrıntılı olarak görüntülemek için bu sayfayı kullanın.

  4. Visual Studio'ya dönün ve hata ayıklamayı durdurmak için Shift+F5 basın. Bu eylem, tarayıcı penceresinde projeyi kapatır.

  5. Visual Studio'da düzenleme için privacy.cshtml açın. Ardından, tümceyi silin Sitenizin gizlilik ilkesi ayrıntıları için bu sayfayı kullanın ve Bu sayfa @ViewData["TimeStamp"]itibarıyla yapım aşamasındadır.

    Güncelleştirilmiş metinle Birlikte Visual Studio Code düzenleyicisinde açık olan Privacy.cshtml dosyasını gösteren ekran görüntüsü.

  6. Şimdi kod değişikliği yapalım. Privacy.cshtml.csseçin. Ardından, aşağıdaki kısayolu seçerek dosyanın en üstündeki using yönergelerini temizleyin:

    Fareyle geçiş yapın veya gri using yönergesi seçin. Hızlı İşlemler ampulü, imlecin altında veya sol kenar boşluğunda görünür. Ampulü seçin ve ardından Gereksiz kullanımları kaldıryanındaki genişletme okunu seçin.

    Privacy.cshtml dosyasını Visual Studio Code editöründe gösteren ekran görüntüsü, Hızlı Eylemler araç ipucu açık ve Önizleme değişiklikleri vurgulanmış şekilde.

    Şimdi ne değiştiğini görmek için Değişiklikleri önizle seçin.

    Değişiklikleri Önizle iletişim kutusunu gösteren ekran görüntüsü. İletişim kutusu kaldırılan yönergeyi gösterir ve kaldırıldıktan sonra kod değişikliğinin önizlemesini görüntüler.

    Seç,Uygula. Visual Studio gereksiz using yönergelerini dosyadan siler.

  7. Ardından, DateTime.ToString yöntemini kullanarak kültürünüz veya bölgeniz için biçimlendirilmiş geçerli tarih için bir dize oluşturun.

    • Yöntemin ilk bağımsız değişkeni, tarihin nasıl görüntüleneceğini belirtir. Bu örnekte, kısa tarih biçimini gösteren biçim belirticisi (d) kullanılır.
    • İkinci bağımsız değişken, tarihin kültürünü veya bölgesini belirten CultureInfo nesnesidir. İkinci bağımsız değişken, diğer şeylerin yanı sıra, tarihteki herhangi bir sözcüğün dilini ve kullanılan ayırıcıların türünü belirler.

    OnGet()'daki yönteminin gövdesini aşağıdaki kodla değiştirin:

    public void OnGet()
    {
       string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
       ViewData["TimeStamp"] = dateTime;
    }
    
  8. Aşağıdaki using yönergesinin dosyanın en üstüne otomatik olarak eklendiğine dikkat edin:

    using System.Globalization;
    

    System.Globalization CultureInfo sınıfını içerir.

  9. Projenizi web tarayıcısında açmak için F5 basın.

  10. Değişikliklerinizi görüntülemek için web sitesinin üst kısmındaki Gizlilik seçin.

    Tarihi eklemek için yapılan değişiklikleri içeren MyCoreApp'in Gizlilik sayfasını gösteren ekran görüntüsü.

  11. Hata ayıklamayı durdurmak için web tarayıcısını kapatın, Shift+F5 basın.

Giriş sayfanızı değiştirme

  1. Çözüm GezginiSayfalar klasörünü genişletin ve Index.cshtmlöğesini seçin.

    Ekran görüntüsü, Çözüm Gezgini'ndeki Sayfalar düğümü altında seçilen Index.cshtml dosyasını gösterir.

    Index.cshtml dosyası, web uygulamasında web tarayıcısında çalışan Giriş sayfanıza karşılık gelir.

    Ekran görüntüsü, tarayıcı penceresinde web uygulamasının Giriş sayfasını gösterir.

    Kod düzenleyicisinde, Giriş sayfasında görüntülenen metnin HTML kodunu görürsünüz.

    Ekran görüntüsü, Visual Studio Code düzenleyicisinde Giriş sayfasının Index.cshtml dosyasını gösterir.

  2. Hoş Geldiniz metnini Hello World ile değiştirin!

    Ekran görüntüsünde Visual Studio Code düzenleyicisindeki Index.cshtml dosyası gösterilir ve 'Hoş Geldiniz' metni 'Merhaba Dünya!' olarak değiştirilir.

  3. uygulamayı çalıştırmak ve web tarayıcısında açmak için https seçin veya Ctrl+F5 basın.

    Visual Studio araç çubuğunda https düğmesinin vurgulandığı ekran görüntüsü.

  4. Web tarayıcısında, yeni değişikliklerinizi Giriş sayfasında görürsünüz.

    Ekran görüntüsü, tarayıcı penceresinde web uygulamasının Giriş sayfasını gösterir. Güncelleştirilmiş metinde 'Merhaba Dünya!'

  5. Web tarayıcısını kapatın, hata ayıklamayı durdurmak için Shift+F5 basın ve projenizi kaydedin. Artık Visual Studio'yu kapatabilirsiniz.

Sonraki adımlar

Tebrikler, bu öğreticiyi tamamladınız! C#, ASP.NET Core ve Visual Studio IDE hakkında bilgi edinmek hoşunuza gittiğini umuyoruz. C# ve ASP.NET ile web uygulaması veya web sitesi oluşturma hakkında daha fazla bilgi edinmek için aşağıdaki öğreticiyle devam edin:

Veya Docker ile web uygulamanızı kapsayıcılı hale getirme hakkında bilgi edinin:

Visual Studio'daki Kapsayıcı Araçları