1

サーバー側 API を使用してグループ Blazor WASM プロジェクトに取り組んでいます。要件に従って、イベント スケジューリング用に Calendly API を統合しました。カード コンポーネント内に、Web サイトから提供された次のコードを埋め込みました。

<div class="calendly-inline-widget" data-url="https://calendly.com/my-app/my-event" style="min-width:320px;height:630px;"></div>

<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>

Calendly は window.postMessage()を使用してイベントを親ウィンドウに投稿するため、コンポーネントの初期化で次のコードを呼び出してイベントを「インターセプト」し、サーバー側のロジックを介して Calendly を呼び出します。

function isCalendlyEvent(e) {
    return e.data.event &&
        e.data.event.indexOf('calendly') === 0;
};

window.addEventListener(
    'message',
    function (e) {
        if (isCalendlyEvent(e)) {
            if (e.data['event'] == 'calendly.event_scheduled') {

                let data = {
                    eventUri: e.data.payload.event.uri,
                    inviteeUri: e.data.payload.invitee.uri
                };

                fetch("https://localhost:5001/CoachSessions/AddSession", {
                    method: "POST",
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(data)
                }).then(res => {

                    //TODO Add Callback from JS Event listener to Blazor Instance Method
                      if (res.status == 200) {
                        DotNet.invokeMethodAsync('MyApp.ClientSide', 'AddedSession');
                    }
                });
            }
        }
    }
);

私の問題と質問は、イベントがトリガーされたときにオブジェクト参照を渡して、Blazor コンポーネントへのインスタンス メソッド コールバックを作成するにはどうすればよいかということです。

上記のコードでは、静的メソッドを呼び出してみましたが、機能しますが、他のすべてを静的にする必要があるため、控えめに言っても理想的ではありません。また、オブジェクト参照をデータ属性として渡したり、オブジェクト参照をウィンドウ オブジェクトにフックしたりするなどのランダムなアイデアも試しましたが、役に立ちませんでした。

明確にするために、これが必要なのは、スケジュールが成功した後にいくつかのモーダルを閉じて、ユーザーが同じタイプのイベントをさらにスケジュールできないようにするためです。

4

0 に答える 0