ASP.NET Core için araçlar Blazor

  • Makale

Not

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Önemli

Bu bilgiler, ticari olarak piyasaya sürülmeden önce önemli ölçüde değiştirilebilen bir yayın öncesi ürünle ilgilidir. Burada verilen bilgilerle ilgili olarak Microsoft açık veya zımni hiçbir garanti vermez.

Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Bu makalede, çeşitli platformlarda uygulama oluşturmaya Blazor yönelik araçlar açıklanmaktadır. Bu makalenin üst kısmından platformunuzu seçin.

Windows'da uygulama Blazor oluşturmak için aşağıdaki kılavuzu kullanın:

  • ASP.NET ve web geliştirme iş yüküyle Visual Studio'nun en son sürümünü yükleyin.

  • Kullanılabilir Blazor şablonlardan birini kullanarak yeni bir proje oluşturun:

    • Blazor Web Uygulaması: Etkileşimli sunucu tarafı işlemeyi (etkileşimli SSR) ve istemci tarafı işlemeyi (CSR) destekleyen bir Blazor web uygulaması oluşturur. Blazor Web Uygulaması şablonu, sunucu tarafı ve istemci tarafı Blazor özellikleri hakkında bilgi edinmek için kullanmaya başlamak Blazor için önerilir.
    • Blazor WebAssembly Tek Başına Uygulama: Statik site olarak dağıtılabilir tek başına bir istemci web uygulaması oluşturur.

İleri'yi seçin.

  • ASP.NET ve web geliştirme iş yüküyle Visual Studio'nun en son sürümünü yükleyin.

  • Yeni bir proje oluşturun:

    • Deneyim için Blazor Server tanıtım kodu ve Bootstrap içeren Uygulama şablonunu veya Blazor Server tanıtım kodu ve Bootstrap içermeyen Uygulama Boş şablonunu seçinBlazor Server. İleri'yi seçin.
    • Tek başına Blazor WebAssembly deneyim için tanıtım kodu ve Bootstrap içeren Uygulama şablonunu veyaBlazor WebAssemblytanıtım kodu ve Bootstrap içermeyen Uygulama Boş şablonunu seçinBlazor WebAssembly. İleri'yi seçin.

  • ASP.NET ve web geliştirme iş yüküyle Visual Studio'nun en son sürümünü yükleyin.

  • Yeni bir proje oluşturun:

    • Deneyim için Blazor Server Uygulama şablonunu seçinBlazor Server. İleri'yi seçin.
    • Deneyim için Blazor WebAssembly Uygulama şablonunu seçinBlazor WebAssembly. İleri'yi seçin.
  • Bir Proje adı girin ve Konum'un doğru olduğunu onaylayın.

Not

Aşağıdaki kılavuzda kullanılan işleme terimleri ve kavramları, Temel bilgilere genel bakış makalesinin aşağıdaki bölümlerinde sunulmuştur :

İşleme modları hakkında ayrıntılı yönergeler ASP.NET Core Blazor işleme modları makalesi tarafından sağlanır.

  • Ek bilgi iletişim kutusundaki bir Blazor Web Uygulaması için:

    • Etkileşimli işleme modu açılan listesi

      • Etkileşimli sunucu tarafı işleme (etkileşimli SSR), Sunucu seçeneğiyle varsayılan olarak etkindir.
      • Yalnızca istemci tarafı işleme (CSR) ile etkileşimi etkinleştirmek için WebAssembly seçeneğini belirleyin.
      • Hem etkileşimli işleme modlarını hem de çalışma zamanında bunlar arasında otomatik olarak geçiş yapabilmeyi etkinleştirmek için Otomatik (Sunucu ve WebAssembly) (otomatik) işleme modu seçeneğini belirleyin.
      • Etkileşim olarak ayarlanırsa None, oluşturulan uygulamada etkileşim yoktur. Uygulama yalnızca statik sunucu tarafı işleme için yapılandırılır.

      .NET uygulama paketi ve çalışma zamanı tarayıcıya indirilirken Etkileşimli Otomatik işleme modu başlangıçta etkileşimli SSR kullanır. .NET WebAssembly çalışma zamanı etkinleştirildikten sonra, işleme modu Etkileşimli WebAssembly işlemeye geçer.

      Varsayılan olarak, Blazor Web Uygulaması şablonu tek bir proje kullanarak hem statik hem de etkileşimli SSR'yi etkinleştirir. CSR'yi de etkinleştirirseniz, proje WebAssembly tabanlı bileşenleriniz için ek bir istemci projesi (.Client) içerir. İstemci projesinden oluşturulan çıkış tarayıcıya indirilir ve istemcide yürütülür. WebAssembly veya otomatik işleme modlarını kullanan tüm bileşenler istemci projesinden derlenmelidir.

      Daha fazla bilgi için bkz . ASP.NET Core Blazor işleme modları.

    • Etkileşim konumu açılan listesi

      • Sayfa/bileşen başına: Varsayılan ayar, sayfa başına veya bileşen başına etkileşimi ayarlar.
      • Genel: Bu seçeneğin seçilmesi, tüm uygulama için küresel olarak etkileşimi ayarlar.

      Etkileşim konumu yalnızca Etkileşimli işleme modu yoksa None ve kimlik doğrulaması etkinleştirilmediyse ayarlanabilir.

    • Örnek sayfaları ve Bootstrap stiline dayalı bir düzeni eklemek için Örnek sayfaları ekle onay kutusunu seçin. Örnek sayfalar ve Bootstrap stili olmadan proje için bu seçeneği devre dışı bırakın.

    Daha fazla bilgi için bkz . ASP.NET Core Blazor işleme modları.

  • BarındırılanBlazor WebAssemblybir uygulama için, Ek bilgi iletişim kutusundaki Çekirdek BarındırılanASP.NET onay kutusunu seçin.

  • Oluştur'u belirleyin.

  • Uygulamayı çalıştırmak için Ctrl+F5 (Windows) veya ⌘+F5 (macOS) tuşlarına basın.

Visual Studio'da barındırılan Blazor WebAssemblybir çözümü çalıştırırken, çözümün başlangıç projesi projedir Server .

ASP.NET Core HTTPS geliştirme sertifikasına güvenme hakkında daha fazla bilgi için bkz . ASP.NET Core'da HTTPS'yi zorunlu kılma.

Önemli

Barındırılan Blazor WebAssembly bir uygulamayı yürütürken çözümün Server projesinden uygulamayı çalıştırın.

Uygulama başlatıldığında yalnızca Properties/launchSettings.json projedeki Server dosya kullanılır.

Linux veya macOS'ta uygulama Blazor oluşturmak için aşağıdaki kılavuzu kullanın:

Komut kabuğunda komut yürütmek için .NET komut satırı arabirimini (CLI) kullanın.

.NET Core SDK'sının en son sürümünü yükleyin. SDK'yı daha önce yüklediyseniz, aşağıdaki komutu yürüterek yüklü sürümünüzü belirleyebilirsiniz:

dotnet --version

Platformunuz için Visual Studio Code'un en son sürümünü yükleyin.

Visual Studio Code için C# Geliştirme Seti'ni yükleyin. Daha fazla bilgi için bkz . ASP.NET Core Blazor uygulamalarında hata ayıklama.

Yeni bir proje oluşturun:

  • Blazor Varsayılan etkileşimli sunucu tarafı işleme ile web uygulaması deneyimi için, proje şablonunu kullanan bir komut kabuğunda aşağıdaki komutu yürütebilirsinizblazor:

    dotnet new blazor -o BlazorApp

    Yalnızca istemci tarafı işlemeyi etkinleştirmek için olarak ayarlanan WebAssemblyseçeneğini kullanın-int|--interactivity:

    dotnet new blazor -o BlazorApp -int WebAssembly

    Etkileşimli sunucu tarafı işlemeyi ve ardından istemci tarafı işlemeyi -int|--interactivity etkinleştirmek için Autoseçeneği olarak ayarlayın:

    dotnet new blazor -o BlazorApp -int Auto

    seçeneği olarak ayarlanarak -int|--interactivityNoneetkileşim devre dışı bırakılırsa, oluşturulan uygulama etkileşime sahip değildir. Uygulama yalnızca statik sunucu tarafı işleme için yapılandırılır:

    dotnet new blazor -o BlazorApp -int None

    .NET uygulama paketi ve çalışma zamanı tarayıcıya indirilirken Etkileşimli Otomatik işleme modu başlangıçta etkileşimli sunucu tarafı işlemeyi (etkileşimli SSR) kullanır. .NET WebAssembly çalışma zamanı etkinleştirildikten sonra, işleme modu Interactive WebAssembly işleme moduna geçer.

    Varsayılan olarak, Blazor Web Uygulaması şablonu tek bir proje kullanarak hem statik hem de etkileşimli sunucu tarafı işlemeyi etkinleştirir. Etkileşimli WebAssembly işleme modunu da etkinleştirirseniz, proje WebAssembly tabanlı bileşenleriniz için ek bir istemci projesi (.Client) içerir. İstemci projesinden oluşturulan çıkış tarayıcıya indirilir ve istemcide yürütülür. Etkileşimli WebAssembly veya Etkileşimli Otomatik işleme modlarını kullanan tüm bileşenler istemci projesinden derlenmelidir.

    Daha fazla bilgi için bkz . ASP.NET Core Blazor işleme modları.

    Uygulamalar varsayılan olarak bileşen/sayfa temelinde etkileşim konumunu kullanır. Uygulamanın tamamında etkileşim kurmak için şu -ai|--all-interactive seçeneği kullanın:

    dotnet new blazor -o BlazorApp -ai

    Bu seçeneğin seçilmesi, en üst düzey HeadOutlet ve Routes bileşenler için bir işleme modu belirterek bileşendeki App tüm uygulama için etkileşimi ayarlar. Bu bileşenlerde etkileşimin ayarlanması, etkileşimi uygulamadaki tüm alt bileşenlere yayılım.

    Etkileşim konumu yalnızca etkileşimli işleme modu (-int|--interactivity) ve None kimlik doğrulaması etkinleştirilmemişse ayarlanabilir.

    Örnek sayfalar ve stil içermeyen bir uygulama oluşturmak için şu -e|--empty seçeneği kullanın:

    dotnet new blazor -o BlazorApp -e

  • Tek başına Blazor WebAssembly bir deneyim için, şablonu kullanan bir komut kabuğunda aşağıdaki komutu yürütür blazorwasm :

    dotnet new blazorwasm -o BlazorApp

    Örnek sayfalar ve stil olmadan tek başına Blazor WebAssembly bir uygulama oluşturmak için şu -e|--empty seçeneği kullanın:

    dotnet new blazorwasm -o BlazorApp -e

Yeni bir proje oluşturun:

  • Tanıtım kodu ve Bootstrap ile ilgili bir Blazor Server deneyim için aşağıdaki komutu yürütür:

    dotnet new blazorserver -o BlazorApp

  • Alternatif olarak, proje şablonunu kullanarak blazorserver-empty tanıtım kodu ve Bootstrap içermeyen bir Blazor Server uygulama oluşturun:

    dotnet new blazorserver-empty -o BlazorApp

  • Tanıtım kodu ve Bootstrap ile tek başına Blazor WebAssembly bir deneyim için aşağıdaki komutu yürütür:

    dotnet new blazorwasm -o BlazorApp

  • Alternatif olarak, proje şablonunu kullanarak blazorwasm-empty tanıtım kodu ve Bootstrap olmadan tek başına Blazor WebAssembly bir uygulama oluşturun:

    dotnet new blazorwasm-empty -o BlazorApp

  • Tanıtım kodu ve Bootstrap ile barındırılan Blazor WebAssembly bir deneyim için, barındırılan seçeneği (-ho/--hosted) komutuna ekleyin:

    dotnet new blazorwasm -o BlazorApp -ho

  • Alternatif olarak, barındırılan Blazor WebAssembly seçeneğiyle şablonu kullanarak tanıtım kodu ve Bootstrap olmadan barındırılan blazorwasm-empty bir uygulama oluşturun:

    dotnet new blazorwasm-empty -o BlazorApp -ho

Yeni bir proje oluşturun:

  • Bir Blazor WebAssembly deneyim için aşağıdaki komutu yürütür:

    dotnet new blazorwasm -o BlazorApp

  • Barındırılan Blazor WebAssembly bir deneyim için, komuta barındırılan seçeneği (-ho veya --hosted) ekleyin:

    dotnet new blazorwasm -o BlazorApp -ho

  • Bir Blazor Server deneyim için aşağıdaki komutu yürütür:

    dotnet new blazorserver -o BlazorApp

BlazorApp Visual Studio Code'da klasörü açın.

Visual Studio Code projeyi oluşturmak ve hatalarını ayıklamak için varlık eklemenizi istediğinde Evet'i seçin.

Visual Studio Code, derleme ve hata ayıklama varlıklarını (.vscodeve dosyaları içeren launch.json klasör) eklemeyi otomatik olarak sunmazsa, Komut Paletini Görüntüle'yi>seçin ve arama kutusuna ".NET" yazın.tasks.json Komut listesinden ".NET: Generate Assets for Build and Debug" komutunu seçin.

Not

Visual Studio Code yapılandırması ve kullanımı hakkında daha fazla bilgi için Visual Studio Code belgelerine bakın.

Projenin Properties/launchSettings.json dosyası, dosyanın bölümündeki tüm profiller profiles için hata ayıklama ara sunucusunun özelliğini içeririnspectUri:

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",

Barındırılan Blazor WebAssembly başlatma ve görev yapılandırması

Barındırılan Blazor WebAssembly.vscode çözümler için, ve dosyalarını içeren launch.jsontasks.json klasörü, tipik proje klasörlerini içeren çözüm üst klasörüne ekleyin (veya taşıyın): Client, Serverve Shared. ve dosyalarındaki launch.json yapılandırmanın projeden barındırılan Blazor WebAssembly bir uygulama yürüttüğünden emin olun veya güncelleştirinServer.tasks.json

Önemli

Barındırılan Blazor WebAssembly bir uygulamayı yürütürken çözümün Server projesinden uygulamayı çalıştırın.

Uygulama başlatıldığında yalnızca Properties/launchSettings.json projedeki Server dosya kullanılır.

Properties/launchSettings.json Dosyasını inceleyin ve özelliğinden uygulamanın URL'sini applicationUrl belirleyin. Çerçeve sürümüne bağlı olarak, URL protokolü güvenli (HTTPS) https://localhost:{PORT} veya güvenli olmayan (HTTP) http://localhost:{PORT}şeklindedir; burada {PORT} yer tutucu atanmış bir bağlantı noktasıdır. Dosyada kullanılacak URL'yi not edin launch.json .

Dosyanın başlatma yapılandırmasında .vscode/launch.json :

  • Geçerli çalışma dizinini (cwd) proje klasörüne Server ayarlayın.
  • Özelliğiyle uygulamanın URL'sini url belirtin. Dosyadan Properties/launchSettings.json daha önce kaydedilen değeri kullanın.
"cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
"url": "{URL}"

Önceki yapılandırmada:

  • Yer {SERVER APP FOLDER} tutucu, genellikle Serverprojenin klasörüdürServer.
  • Yer {URL} tutucu, uygulamanın özelliğindeki Properties/launchSettings.json dosyasında belirtilen URL'dir applicationUrl .

Google Chrome, Microsoft Edge yerine tercih edilirse yapılandırmasına "browser": "chrome" ek bir özelliğini güncelleştirin veya ekleyin.

Aşağıdaki örnek .vscode/launch.json dosya:

  • Geçerli çalışma dizinini klasörüne Server ayarlar.
  • Uygulamanın URL'sini olarak http://localhost:7268ayarlar.
  • Varsayılan tarayıcıyı Microsoft Edge'den Google Chrome'a değiştirir.
"cwd": "${workspaceFolder}/Server",
"url": "http://localhost:7268",
"browser": "chrome"

Dosyanın tamamı .vscode/launch.json :

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "blazorwasm",
      "name": "Launch and Debug Blazor WebAssembly Application",
      "request": "launch",
      "cwd": "${workspaceFolder}/Server",
      "url": "http://localhost:7268",
      "browser": "chrome"
    }
  ]
}

içinde.vscode/tasks.json, uygulamanın proje dosyasının yolunu Server belirten bir build bağımsız değişken ekleyin:

"${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",

Önceki bağımsız değişkende:

  • Yer {SERVER APP FOLDER} tutucu, genellikle Serverprojenin klasörüdürServer.
  • Yer {PROJECT NAME} tutucu, genellikle çözümün adına ve ardından .Server proje şablonundan Blazor WebAssembly oluşturulan bir uygulamaya göre uygulamanın adıdır.

Çözümün klasöründe adlı BlazorHosted projenin yer aldığı Server örnek .vscode/tasks.json bir Server dosya:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "dotnet",
      "type": "process",
        "args": [
          "build",
          "${workspaceFolder}/Server/BlazorHosted.Server.csproj",
          "/property:GenerateFullPaths=true",
          "/consoleloggerparameters:NoSummary",
        ],
        "group": "build",
        "presentation": {
          "reveal": "silent"
        },
        "problemMatcher": "$msCompile"
    }
  ]
}

Uygulamayı çalıştırmak için Ctrl+F5 (Windows) veya ⌘+F5 (macOS) tuşlarına basın.

Not

Şu anda yalnızca tarayıcı hata ayıklaması desteklenmektedir.

Hata ayıklama sırasında, örneğin uygulamasını ile dotnet watch runçalıştırarak barındırılan Blazor WebAssembly çözümün arka uç Server uygulamasını otomatik olarak yeniden oluşturamazsınız.

.vscode/launch.json (launch yapılandırma):

...
"cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
...

Geçerli çalışma dizinicwd () için önceki yapılandırmada yer {SERVER APP FOLDER} tutucu projenin klasörüdür Server ve genellikle "Server".

Microsoft Edge kullanılıyorsa ve sistemde Google Chrome yüklü değilse yapılandırmasına ek bir özelliği "browser": "edge" ekleyin.

Hata ayıklama için varsayılan tarayıcı Google Chrome yerine tarayıcı olarak Microsoft Edge'i oluşturan ve proje klasörü Server örneği:

...
"cwd": "${workspaceFolder}/Server",
"browser": "edge"
...

.vscode/tasks.json (dotnet komut bağımsız değişkenleri):

...
"${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",
...

Önceki bağımsız değişkende:

  • Yer {SERVER APP FOLDER} tutucu, projenin klasörüdür Server ve genellikle "Server".
  • Yer {PROJECT NAME} tutucu, genellikle çözümün adına ve ardından proje şablonundan Blazoroluşturulan bir uygulamada ".Server" temelinde uygulamanın adıdır.

Bir uygulamayla kullanma öğreticisinde yer alan aşağıdaki örnekte proje klasörü adı Server ve proje adı BlazorWebAssemblySignalRApp.Serverkullanılır:SignalRBlazor WebAssembly

...
"args": [
  "build",
    "${workspaceFolder}/Server/BlazorWebAssemblySignalRApp.Server.csproj",
    ...
],
...

Uygulamayı çalıştırmak için Ctrl+F5 (Windows) veya ⌘+F5 (macOS) tuşlarına basın.

Geliştirme sertifikasına güvenme

Daha fazla bilgi için bkz . ASP.NET Core'da HTTPS'yi zorunlu kılma.

Visual Studio çözüm dosyası (.sln)

Çözüm, bir veya daha fazla ilgili kod projesini düzenlemeye yönelik bir kapsayıcıdır. Visual Studio , bir çözümün ayarlarını depolamak için bir çözüm dosyası (.sln) kullanır. Çözüm dosyaları benzersiz bir biçim kullanır ve doğrudan düzenlenmesi amaçlanmamıştır.

Visual Studio dışındaki araçlar çözüm dosyalarıyla etkileşimde bulunabilir:

  • .NET CLI, çözüm dosyaları oluşturabilir ve komutuyla dotnet slnçözüm dosyalarındaki projeleri listeleyebilir/değiştirebilir. Diğer .NET CLI komutları çeşitli yayımlama, test ve paketleme komutları için çözüm dosyasının yolunu kullanır.
  • Visual Studio Code , tümleşik terminali aracılığıyla komutu ve diğer .NET CLI komutlarını yürütebilir dotnet sln , ancak bir çözüm dosyasındaki ayarları doğrudan kullanmaz.

Belgeler boyunca çözüm, ASP.NET Temel BarındırılanBlazor WebAssembly seçeneği etkinken veya bir Blazor Hybrid proje şablonundan proje şablonundan oluşturulan uygulamaları açıklamak için kullanılır. Blazor Bu proje şablonlarından oluşturulan uygulamalar varsayılan olarak bir çözüm dosyası (.sln) içerir. Geliştiricinin Visual Studio kullanmadığı barındırılan Blazor WebAssembly uygulamalar için çözüm dosyası .NET CLI komutlarıyla kullanılmadıysa yoksayılabilir veya silinebilir.

Daha fazla bilgi için Visual Studio belgelerinde aşağıdaki kaynaklara bakın:

Platformlar Blazor arası geliştirme için Visual Studio Code kullanma

Visual Studio Code, uygulama geliştirmek Blazor için kullanılabilecek açık kaynak, platformlar arası tümleşik geliştirme ortamıdır (IDE). Visual Studio Code ile geliştirme için yeni Blazor bir uygulama oluşturmak için .NET CLI'yi kullanın. Daha fazla bilgi için bu makalenin Linux/macOS sürümüne bakın.

Visual Studio Code yapılandırması ve kullanımı hakkında daha fazla bilgi için Visual Studio Code belgelerine bakın.

Blazor şablon seçenekleri

Çerçeve, Blazor yeni uygulamalar oluşturmaya yönelik şablonlar sağlar. Şablonlar, geliştirme için seçtiğiniz araçlardan (Visual Studio, Visual Studio Code veya .NET komut satırı arabirimi (CLI) bağımsız olarak yeni Blazor projeler ve çözümler oluşturmak için Blazor kullanılır:

  • Blazor Web Uygulaması proje şablonu: blazor
  • Blazor WebAssembly Tek başına uygulama proje şablonu: blazorwasm
  • Blazor Server proje şablonları: blazorserver, blazorserver-empty
  • Blazor WebAssembly proje şablonları: blazorwasm, blazorwasm-empty
  • Blazor Server proje şablonu: blazorserver
  • Blazor WebAssembly proje şablonu: blazorwasm

Proje şablonları hakkında Blazor daha fazla bilgi için bkz . ASP.NET Core Blazor proje yapısı.

Şablon seçenekleri hakkında daha fazla bilgi için aşağıdaki kaynaklara bakın:

  • .NET Core belgelerindeki dotnet yeni makalesi için .NET varsayılan şablonları:
  • Yardım seçeneğini (-h veya --help) komut kabuğundaki dotnet new CLI komutuna geçirme:
    • dotnet new blazor -h
    • dotnet new blazorwasm -h
  • .NET Core belgelerindeki dotnet yeni makalesi için .NET varsayılan şablonları:
  • Yardım seçeneğini (-h veya --help) komut kabuğundaki dotnet new CLI komutuna geçirme:
    • dotnet new blazorserver -h
    • dotnet new blazorserver-empty -h
    • dotnet new blazorwasm -h
    • dotnet new blazorwasm-empty -h
  • .NET Core belgelerindeki dotnet yeni makalesi için .NET varsayılan şablonları:
  • Yardım seçeneğini (-h veya --help) komut kabuğundaki dotnet new CLI komutuna geçirme:
    • dotnet new blazorserver -h
    • dotnet new blazorwasm -h

Ek kaynaklar