サーバーサイドブレイザーを既存のMVCコアアプリに追加する

9
tomRedox 2019-05-21 14:58.

完全に機能するBlazorサーバー側プロジェクトと.NETCore 3MVCプロジェクトが両方とも同じソリューションにあります。現在、MVCプロジェクトでBlazorプロジェクトのコンポーネントを使用しようとしています。

コンポーネントをMVCページにレンダリングすることができましたが、Blazorコンポーネントのボタンクリックでは、コンポーネントのonclickイベントがトリガーされません。代わりに、次の場所に移動します。 https://localhost:44341/

これを機能させるためにMVCソリューションにどのような変更を加える必要があるのか​​正確にはわかりませんか?公式ドキュメントhttps://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#integrate-components-into-razor-pages-and-mvc-apps そしてそれはこれで言及されています https://youtu.be/ap60h3eQE5Y?t=3581、しかしどちらもそれを達成する方法の詳細には入りません。

サーバー側のBlazorをMVCプロジェクトに後付けする方法(または例を紹介する方法)の全手順を誰かに教えてもらえますか?

私が試したこと

私のBlazorプロジェクトにはまだ標準テンプレートのCounterコンポーネントがあるので、Blazorプロジェクトを参照し、これをindex.cshtmlファイルに追加して、MVCソリューションに追加しようとしました。

<div id="Counter">
  @(await Html.RenderComponentAsync<Counter>())
</div>

正しくレンダリングされますが、ボタンのクリックは機能しません。

JSファイルをMVCアプリの_Layoutページに追加しました。

<script src="_framework/blazor.server.js"></script>

MVCプロジェクトのStartup.csファイルでサーバーサイドブレイザーをオンにしました。

services.AddServerSideBlazor();

また、ページと共有ディレクトリをMVCプロジェクトに追加し、_ImportsファイルとMainLayoutファイルにコピーしました。これが必要かどうかはわかりません。

それでもうまくいかなかった場合は、すべてのBlazorテンプレート(クライアント、クライアントホスト、サーバー側)から新しいプロジェクトをスピンアップして手がかりを探しましたが、これらの例はすべて、単一のBlazorを備えた完全なSPAとして設定されています。App.htmlファイルでホストされているエントリポイント(ファイル)ですが、Blazorコンポーネントをさまざまな既存のMVCページにレンダリングしたいと考えています。

次に、これらのプロジェクトの一部(および作業中のBlazorプロジェクトの一部)をMVCプロジェクトに追加してみましたが、完全に機能させることができません。

フォローしてみました https://stackoverflow.com/a/55911119/1879019 これもMVCプロジェクトにBlazorコンポーネントファイルを追加することで機能しますが、私のBlazorファイルは現在(ほとんど)別のプロジェクトにあります。

これまでの私の実験からのランダムな質問

  • services.AddServerSideBlazor();MVCアプリのStartup.csに追加しました。他に何か必要なものはありますか?
  • 私のMVCアプリはまだ従来型ですがAspNetCore.Routing、コンポーネントを既存のMVCページにのみ配置する場合(つまり、Blazorページはなく、Blazorコンポーネントのみ)、Core3のエンドポイントルーティングに切り替える必要がありますか?
  • ブラウザで実行されているblazorjavascriptファイルが(SignalRを介して)通信するBlazorのサーバー側の部分には、エンドポイントルーティングが必要ですか?jsファイルからブラウザで404を取得しています。
  • コンポーネントをホストしているだけの場合でも、エントリポイントとして「App」(App.razor)クラス/ページが必要ですか?
  • もしそうなら<app>@(await Html.RenderComponentAsync<App>())</app>、MVCプロジェクトのどこかに_Host.cshtmlからの行を置く必要がありますか?
  • MVCプロジェクトのBlazorプロジェクトのPagesフォルダーとSharedフォルダー、および2つの_Imports.razorファイルとMainLayout.razorファイルを複製する必要がありますか?
  • BlazorはMicrosoft.NETCore.Platformsファイル(MVCプロジェクトのSDKノードで参照)の一部になっていると思いますが、MVCプロジェクトにBlazor用の個別のNuGetパッケージを追加する必要はないと思いますか?

1 answers

12
tomRedox 2019-05-22 03:07.

私は今これの底に来ました。私の質問で説明したすべての試行錯誤の結果、解決策には驚くほど少ないコードが含まれていることがわかりました。

同じソリューションの異なるプロジェクトでのサーバーサイドブレイザーとMVCの例

以下の答えは、ソリューションにサーバー側のBlazorプロジェクトが機能していて、同じソリューションの別のMVCプロジェクトでそのプロジェクトのコンポーネントを使用しようとしていることを前提としています。Core 3 Preview 5を使用して、VS2019でこれを行いました。

ページの下部、または同じプロジェクト内のMVCとBlazorの例へのリンクを参照してください。

MVCプロジェクトの.csprojファイルへの変更

blazorプロジェクトへの参照を追加する必要があります。

    <ProjectReference Include="..\MyClient.Web.Blazor\MyClient.Web.Blazor.csproj" />

MVCプロジェクトのViews \ Shared \ _Layout.cshtmlファイルへの変更

ベースURLをヘッドに追加します。

<head>
<meta charset="utf-8" />
<base href="~/" />

BlazorJSスクリプトへの参照を追加します

<script src="_framework/blazor.server.js"></script>

(これは実際にはローカルファイルシステムには存在しません。Blazorはアプリがブラウザーに到達するまでに自動的に分類します)

MVCプロジェクトのStartup.csへの変更

これが実際の作業が行われる場所です

ではConfigureServicesメソッドの追加:

services.AddServerSideBlazor();

次に、構成を新しいスタイルのCore 3構成に切り替えました(したがって、このAddMvc方法は使用しなくなりました)。

services.AddControllersWithViews()            
    .AddNewtonsoftJson(options =>
    {
        options.SerializerSettings.ContractResolver = new DefaultContractResolver();
    });

services.AddRazorPages();

そして、最終的にすべてが機能するようになった変更は、次のConfigure(IApplicationBuilder app, IWebHostEnvironment env)方法でCore3のエンドポイントルーティングに切り替えることでした。


app.UseRouting();

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
    endpoints.MapRazorPages();
    endpoints.MapBlazorHub();
});

//app.UseMvc(routes =>
//{
//    routes.MapRoute(
//        name: "MyArea",
//        template: "{area:exists}/{controller=Home}/{action=Index}/{id?}");

//    routes.MapRoute(
//        name: "default",
//        template: "{controller=Home}/{action=Index}/{id?}");
//});

コメントアウトされたコードは、私が使用していた古いスタイルのルーティングを示しています。それがなかったendpoints.MapBlazorHub();ことが私のボタンクリックの問題を引き起こしていたと思います

Blazorプロジェクトへの変更

これを機能させるためにBlazorプロジェクトに変更を加える必要はありませんでした。

次に、BlazorコンポーネントをMVCページに配置する方法

上記のすべてを完了したら、MVCページでコンポーネントをレンダリングするために必要なのは追加することだけです

 @(await Html.RenderComponentAsync<YourComponent>())

これは、MVCページとRazorページの両方で機能するはずです。

Core 3 Preview5の既知のルーティングの問題

上記の変更は、それを機能させるために私が行う必要があるすべてでした。ありますhttps://stackoverflow.com/a/56041606/1879019 Blazorコンポーネントが含まれているMVCまたはRazorページに移動すると、ページが更新されるまでルーティングは機能しなくなります。URLはブラウザのアドレスバーで変更されますが、ナビゲーションは行われません。

現在プレビュー6で実行していますが、プレビュー6以降でルーティングの問題が修正されたことを確認できます。

同じプロジェクトでのサーバーサイドブレイザーとMVCの例

Chris Saintyは、既存のMVCプロジェクトに追加されたサーバー側のBlazorコンポーネントの例をここに示しています。 https://chrissainty.com/using-blazor-components-in-an-existing-mvc-application/ ((https://github.com/chrissainty/BlazorInExistingMVCApp/tree/master/src/Components

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

Westworldの遊び方:Amazonエコーのない迷路

Westworldの遊び方:Amazonエコーのない迷路

Westworldの第2シーズンが終わり、次の1、2年は楽しいがやや混乱するシリーズでモーター機能が凍結するので、次に何をすべきかについて少し迷うかもしれません。ビンジウォッチングする別の番組を見つけますか?さらに多くのファン理論を読み直しますか?お気に入りの1990年代のオルタナティブロックソングの楽しいオールドタイムの​​ピアノカバーを書き始めますか?心配しないでください。長い待ち時間が始まる前に、Westworldのヒットをもう1つ得ることができます。

ジャネールモネイは彼女のプライドで周りをファックしませんでしたBETアワードを見てください

ジャネールモネイは彼女のプライドで周りをファックしませんでしたBETアワードを見てください

2018 BETアワードは、日曜日の夜にロサンゼルスで開催されました。プライド月の真ん中に軽くたたきます。見た目はいたるところに強かったが、ジャネール・モネイのように誰もそれをしなかった。

リットウッドで2000年代と2010年代の車を祝うために2038年に会いましょう

リットウッドで2000年代と2010年代の車を祝うために2038年に会いましょう

他の期間をテーマにした自動車展示会、特に1980年代と90年代の自動車ショーRadwoodの最近の成功に続いて、私は2000年代と2010年代の自動車文化を祝う自動車ショーであるLitwoodを立ち上げることにしました。私は今これについてディブを呼んでいます。

リチャードは堅実なシリコンバレーで彼の会社の将来のためにビットコインを裏返します

リチャードは堅実なシリコンバレーで彼の会社の将来のためにビットコインを裏返します

数週間前のシリコンバレーの第5シーズンのプレミアのレビューで、ショーはその高齢で問題を抱え続けていますが、才能のあるキャストとそのひねくれたユーモアのセンスを備えた頑丈な基盤からまだ機能していると主張しました。そして、シーズンの終わりに近づくにつれて、その点は持ちこたえてきました。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language