1

我一直在使用服务器端 API 开发组 Blazor WASM 项目。根据要求，我集成了 Calendly API 用于事件调度。在卡片组件中，我嵌入了他们网站提供的以下代码：

<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