ASP.NET Core için araçlar Blazor

• 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 App: Etkileşimli sunucu tarafı işlemeyi (etkileşimli SSR) ve istemci tarafı işlemeyi (CSR) destekleyen bir Blazor web uygulaması oluşturur. ŞablonBlazor Web App, sunucu tarafı ve istemci tarafı Blazor özellikleri hakkında bilgi edinmek için kullanmaya Blazor başlamak 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 WebAssembly tanı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.

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

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.json tasks.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

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"
    }
  ]
}

.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:SignalR Blazor WebAssembly

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

Yeni bir proje oluşturun:

• komutunu kullanarak cd , proje klasörünü oluşturmak istediğiniz dizine geçin (örneğin, cd c:/users/Bernie_Kopell/Documents).

• Blazor Web App Varsayılan etkileşimli sunucu tarafı işleme (etkileşimli SSR) deneyimi için aşağıdaki komutu çalıştırın:

  dotnet new blazor -o BlazorApp
  

• 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
  

Yeni bir proje oluşturun:

• komutunu kullanarak cd , proje klasörünü oluşturmak istediğiniz dizine geçin (örneğin, cd c:/users/Bernie_Kopell/Documents).

• 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
  

• 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
  

• 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
  

  Not

  Barındırılan Blazor WebAssembly proje şablonu ASP.NET Core 8.0 veya sonraki sürümlerinde kullanılamaz. .NET 8.0 veya sonraki bir SDK kullanarak barındırılan Blazor WebAssembly -f|--framework bir uygulama oluşturmak için 7.0 hedef çerçevesi (net7.0):

  dotnet new blazorwasm -o BlazorApp -ho -f net7.0
  

Yeni bir proje oluşturun:

• komutunu kullanarak cd , proje klasörünü oluşturmak istediğiniz dizine geçin (örneğin, cd c:/users/Bernie_Kopell/Documents).

• 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
  

  Not

  Barındırılan Blazor WebAssembly proje şablonu ASP.NET Core 8.0 veya sonraki sürümlerinde kullanılamaz. .NET 8.0 veya sonraki bir SDK kullanarak barındırılan Blazor WebAssembly -f|--framework bir uygulama oluşturmak için hedef çerçeve adıyla (örneğin, net6.0) seçeneğini geçirin:

  dotnet new blazorwasm -o BlazorApp -ho -f net6.0
  

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

  dotnet new blazorserver -o BlazorApp