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

  • Makale

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 şunların nasıl yapıldığını gösterir:

  • 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 Visual Studio'ya ihtiyacınız vardır. Ücretsiz sürüm için Visual Studio indirmeleri sayfasını ziyaret edin.

Bir proje oluştur

İ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'u seçin.

    Screenshot shows the start window for Visual Studio. Create a new project option is highlighted.

  2. Yeni proje oluştur penceresinde Dil listesinden C# öğesini seçin. Ardından platform listesinden Windows'ı 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 ve ardından İleri'yi seçin.

    Screenshot that shows the ASP.NET Core Web App project template highlighted in the New Project dialog box in Visual Studio.

    Not

    ASP.NET Core Web App şablonunu görmüyorsanız, yeni proje oluştur penceresinden yükleyebilirsiniz.

    Şablon listesinin en altındaki Aradığınızı bulamıyor musunuz? iletisinde Daha fazla araç ve özellik yükle bağlantısını seçin.

    Screenshot shows the Install more tools and features link that is part of the Not finding what you're looking for message.

    Visual Studio Yükleyicisi ASP.NET ve web geliştirme'yi seçin.

    Screenshot shows the dot NET Core cross-platform development workload in the Visual Studio Installer.

    Visual Studio Yükleyicisi Değiştir'i seçin. Çalışmanızı kaydetmeniz istenebilir. İş yükünü yüklemek için Devam'ı seçin.

    Bu "Proje oluşturma" yordamında 2. adıma dönün.

  3. Yeni projenizi yapılandırın penceresinde Proje adı alanına MyCoreAppgirin. Ardından İleri'yi seçin.

    Screenshot that shows the Configure your new project window in Visual Studio with MyCoreApp entered in the Project name field.

  4. Ek bilgiler penceresinde Hedef Çerçeve alanında .NET Core 3.1'in 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çılır menüsünde aşağıdaki dört seçenek bulunur:

    • Hiçbiri: Kimlik doğrulaması yok.
    • Tek tek 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'a tıklayın.

    Screenshot that shows the default settings in the Additional information window where the target framework is set to .NET Core 3.1.

  5. Oluştur'u belirleyin.

Visual Studio yeni projenizi açar.

  1. Başlangıç penceresinde Yeni proje oluştur'u seçin.

    Screenshot shows the start window for Visual Studio. Create a new project option is highlighted.

  2. Yeni proje oluştur penceresinde Dil listesinden C# öğesini seçin. Ardından platform listesinden Windows'ı 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 ve ardından İleri'yi seçin.

    Screenshot that shows the ASP.NET Core Web App project template selected and highlighted on the Create a new project page.

    Not

    ASP.NET Core Web App şablonunu görmüyorsanız, yeni proje oluştur penceresinden yükleyebilirsiniz.

    Şablon listesinin en altındaki Aradığınızı bulamıyor musunuz? iletisinde Daha fazla araç ve özellik yükle bağlantısını seçin.

    Screenshot shows the Install more tools and features link that is part of the Not finding what you're looking for message.

    Visual Studio Yükleyicisi ASP.NET ve web geliştirme iş yükünü seçin.

    Screenshot shows the ASP.NET and web development workload in the Visual Studio Installer.

    Visual Studio Yükleyicisi Değiştir'i seçin. Çalışmanızı kaydetmeniz istenebilir. İş yükünü yüklemek için Devam'ı seçin.

    Bu "Proje oluşturma" yordamında 2. adıma dönün.

  3. Yeni projenizi yapılandırın penceresinde Proje adı alanına MyCoreAppgirin. Ardından İleri'yi seçin.

    Screenshot that shows the Configure your new project window in Visual Studio with MyCoreApp entered in the Project name field.

  4. Ek bilgiler penceresinde Hedef Çerçeve alanında .NET 8.0'ın 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çılır menüsünde aşağıdaki dört seçenek bulunur:

    • Hiçbiri: Kimlik doğrulaması yok.
    • Tek tek 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'a tıklayın.

    Screenshot that shows the default settings in the Additional information window where the target framework is set to .NET 8.0.

  5. Oluştur'u belirleyin.

Visual Studio yeni projenizi açar.

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

Bu çözüm Razor Sayfası tasarım desenini izler. Model-View-Controller (MVC) tasarım deseninden farklıdır; model ve denetleyici kodunu Razor Sayfasının içine eklemek kolaylaştırılmıştır.

Çözümünüzde gezinin

  1. Proje şablonu, MyCoreApp adlı 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.

    Screenshot shows the MyCoreApp project selected in the Solution Explorer in Visual Studio.

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

    Screenshot shows the contents of the Pages folder in the the Solution Explorer in Visual Studio..

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

    Screenshot shows the Index dot c s h t m l file open in the Visual Studio code editor.

  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'da Index.cshtml düğümünü genişletin ve Index.cshtml.cs dosyasını seçin.

    Screenshot shows Index dot c s h t m l file selected in the Solution Explorer in Visual Studio.

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

    Screenshot shows the Index dot c s h t m l dot c s file open in the Visual Studio code editor.

  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.

    Screenshot shows the w w w root folder selected in the Solution Explorer in Visual Studio.

    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ırması appsettings.json dosyasında depolanır. Ancak, uygulama ayarları kullanarak bu ayarları geçersiz kılabilirsiniz. Development.json.

  7. appsettings.json dosyasını genişleterek appsettings'i görüntüleyin. Development.json dosyası.

    Screenshot shows appsettings dot j son selected and expanded in the Solution Explorer in Visual Studio.

Ç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, F5 tuşuna basın veya menü çubuğundan Hata AyıklamaYı>Başlat Hata Ayıklama'yagidin.

    Screenshot shows the I I S Express button highlighted in the toolbar in Visual Studio.

    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 bir web tarayıcısında görüntülemek için Evet'i seçin ve ardından bir izleme güvenlik uyarısı iletisi alırsanız Evet'i 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'i seçin. Tarayıcıdaki Gizlilik sayfası, Privacy.cshtml dosyasında ayarlanan metni işler.

    Screenshot shows the MyCoreApp Privacy page with the following text: Use this page to detail your site's privacy policy.

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

  5. Visual Studio'da düzenleme için Privacy.cshtml dosyasını açın. Ardından, tümceyi silin, Sitenizin gizlilik ilkesini ayrıntılı olarak görüntülemek için bu sayfayı kullanın ve ["TimeStamp"] itibarıyla @ViewDataBu sayfa yapım aşamasındadır.

    Screenshot shows the Privacy dot c s h t m l file open in the Visual Studio code editor with the updated text.

  6. Şimdi kod değişikliği yapalım. Privacy.cshtml.cs dosyasını seçin. Ardından, aşağıdaki kısayolu using kullanarak dosyanın üst kısmındaki yönergeleri temizleyin:

    Fareyle geçiş yapın veya gri renkte using bir yönerge seçin. Giriş işaretinin altında veya sol kenar boşluğunda hızlı eylemler ampulü görünür. Ampulü seçin ve ardından Gereksiz kullanımı kaldır'ı seçin.

    Screenshot shows the Privacy dot c s h t m l file in the Visual Studio code editor with the Quick Actions tooltip exposed for a greyed out using directive.

    Şimdi değişiklikleri önizleme'yi seçerek değişiklikleri görün.

    Screenshot shows the Preview Changes dialog box. The dialog box shows the directive being removed, and previews the code change after the removal.

    Uygula'yı seçin. Visual Studio gereksiz using yönergeleri dosyadan siler.

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

    public void OnGet()
{
   string dateTime = DateTime.Now.ToShortDateString();
   ViewData["TimeStamp"] = dateTime;
}

  8. DateTime altında dalgalı bir alt çizgi göründüğüne dikkat edin. Bu tür kapsamda olmadığından dalgalı alt çizgi görüntülenir.

    Screenshot shows an error mark, in the form of a wavy underline, for DateTime in the Visual Studio code editor.

    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 Hata Listesini Görüntüle'ye> gidin.

    Screenshot shows the Error List toolbar in Visual Studio with DateTime listed.

  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 öğesini seçin ; bu yönergeyi dosyanızın en üstüne ekleyin ve hataları çözün.

    Screenshot shows the Quick Actions options from its drop-down menu with a mouseover on using System.

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

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

    Screenshot showing the updated Privacy page that includes the changes you made.

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

Giriş sayfanızı değiştirme

  1. Çözüm Gezgini Sayfalar klasörünü genişletin ve ardından Index.cshtml öğesini seçin.

    Screenshot shows Index dot c s h t m l selected under the Pages node in the Solution Explorer.

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

    Screenshot shows the Home page for the web app in the browser window.

    Kod düzenleyicisinde, Giriş sayfasında görüntülenen metin için HTML kodu görürsünüz.

    Screenshot shows the Index dot c s h t m l file for the Home page in the Visual Studio code editor.

  2. Hoş Geldiniz metnini Merhaba Dünya!

    Screenshot shows the Index dot c s h t m l file in the Visual Studio code editor with the Welcome text changed to Hello World!.

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

    Screenshot shows the IIS Express button highlighted in the toolbar for Visual Studio.

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

    Screenshot shows the Home page for the web app in the browser window. The updated text says Hello World!

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

Çözümünüzde gezinin

  1. Proje şablonu, MyCoreApp adlı 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.

    Screenshot shows the MyCoreApp project selected and its content in the Solution Explorer in Visual Studio.

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

    Screenshot shows the contents of the Pages folder in the Solution Explorer.

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

    Screenshot shows the Index.cshtml file open in the Visual Studio Code editor.

  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'da Index.cshtml düğümünü genişletin ve Index.cshtml.cs dosyasını seçin.

    Screenshot shows Index.cshtml file selected in the Solution Explorer in Visual Studio.

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

    Screenshot shows the Index.cshtml.cs file open in the Visual Studio Code editor.

  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.

    Screenshot shows the w w w root folder selected in the Solution Explorer in Visual Studio.

    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ırması appsettings.json dosyasında depolanır. Ancak, uygulama ayarları kullanarak bu ayarları geçersiz kılabilirsiniz. Development.json. appsettings.json dosyasını genişleterek appsettings'i görüntüleyin. Development.json dosyası.

    Screenshot shows appsettings.json selected and expanded, which exposes appsettings.Development.json, in the Solution Explorer in Visual Studio.

Ç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, F5 tuşuna basın veya menü çubuğundan Hata AyıklamaYı>Başlat Hata Ayıklama'yagidin.

    Screenshot shows the I I S Express button highlighted in the toolbar in Visual Studio.

    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 bir web tarayıcısında görüntülemek için Evet'i seçin ve ardından bir izleme güvenlik uyarısı iletisi alırsanız Evet'i 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'i seçin. Tarayıcıdaki Gizlilik sayfası, Privacy.cshtml dosyasında ayarlanan metni işler.

    Screenshot shows the MyCoreApp Privacy page with the following text: Use this page to detail your site's privacy policy.

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

  5. Visual Studio'da düzenleme için Privacy.cshtml dosyasını açın. Ardından, tümceyi silin, Sitenizin gizlilik ilkesini ayrıntılı olarak görüntülemek için bu sayfayı kullanın ve ["TimeStamp"] itibarıyla @ViewDataBu sayfa yapım aşamasındadır.

    Screenshot shows the Privacy.cshtml file open in the Visual Studio Code editor with the updated text.

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

    Fareyle geçiş yapın veya gri renkte using bir yönerge seçin. Giriş işaretinin altında veya sol kenar boşluğunda hızlı eylemler ampulü görünür. Ampulü seçin ve ardından Gereksiz kullanımı kaldır'ın yanındaki genişletme okunu seçin.

    Screenshot shows the Privacy.cshtml file in the Visual Studio Code editor with the Quick Actions tooltip open and Preview changes highlighted.

    Şimdi değişiklikleri önizleme'yi seçerek değişiklikleri görün.

    Screenshot shows the Preview Changes dialog box. The dialog box shows the directive being removed, and previews the code change after the removal.

    Uygula'yı seçin. Visual Studio gereksiz using yönergeleri 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öntemi için ilk bağımsız değişken, 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, tarih için kültürü veya bölgeyi belirten CultureInfo nesnesidir. İkinci bağımsız değişken, tarihteki herhangi bir sözcüğün dilini ve kullanılan ayırıcıların türünü belirler.

    yönteminin gövdesini OnGet() 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önergenin dosyanın en üstüne otomatik olarak eklendiğine dikkat edin:

    using System.Globalization;

    System.GlobalizationCultureInfo sınıfını içerir.

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

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

    Screenshot showing the Privacy page of the MyCoreApp that includes the changes made to add the date.

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

Giriş sayfanızı değiştirme

  1. Çözüm Gezgini Sayfalar klasörünü genişletin ve ardından Index.cshtml öğesini seçin.

    Screenshot shows Index.cshtml selected under the Pages node in the Solution Explorer.

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

    Screenshot shows the Home page for the web app in the browser window.

    Kod düzenleyicisinde, Giriş sayfasında görüntülenen metin için HTML kodu görürsünüz.

    Screenshot shows the Index.cshtml file for the Home page in the Visual Studio Code editor.

  2. Hoş Geldiniz metnini Merhaba Dünya!

    Screenshot shows the Index.cshtml file in the Visual Studio Code editor with the 'Welcome' text changed to 'Hello World!'.

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

    Screenshot shows the IIS Express button highlighted in the toolbar for Visual Studio.

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

    Screenshot shows the Home page for the web app in the browser window. The updated text says 'Hello World!'

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

Sonraki adımlar

Bu öğreticiyi tamamladıktan sonra tebrikler! 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:

ASP.NET Core ile Razor Pages web uygulaması oluşturma

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

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

Ayrıca bkz.

Visual Studio kullanarak web uygulamanızı Azure Uygulaması Hizmeti'ne yayımlama