Outlook Web Add-in：Blazor适配OnMessageSend事件加载失败求助

核心思路 #

Outlook的OnMessageSend事件要求通过JavaScript函数触发，但可以通过JS互操作将事件逻辑委托给Blazor WASM处理，同时保留任务窗格的HTML端点配置，实现两者共存。

具体实现步骤 #

1. 调整加载项清单，同时支持任务窗格和OnMessageSend #

在加载项清单（XML文件）中，同时配置任务窗格的HTML端点和OnMessageSend事件的触发规则：

• 保留原有的任务窗格配置
• 添加<ExtensionPoint xsi:type="Events">节点，指定OnMessageSend事件的处理函数文件：

<VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
  <Requirements>
    <bt:Sets DefaultMinVersion="1.1">
      <bt:Set Name="Mailbox" />
    </bt:Sets>
  </Requirements>
  <Hosts>
    <Host xsi:type="MailHost">
      <!-- 任务窗格配置 -->
      <DesktopFormFactor>
        <!-- ... 原任务窗格代码 ... -->
      </DesktopFormFactor>
      <!-- OnMessageSend事件配置 -->
      <DesktopFormFactor>
        <ExtensionPoint xsi:type="Events">
          <Event Type="ItemSend" FunctionExecution="synchronous">
            <Rule xsi:type="RuleCollection" Mode="Or">
              <Rule xsi:type="ItemIs" ItemType="Message" FormType="Edit" />
            </Rule>
            <FunctionFile resid="Functions.Url" />
            <FunctionName>onMessageSend</FunctionName>
          </Event>
        </ExtensionPoint>
      </DesktopFormFactor>
    </Host>
  </Hosts>
  <Resources>
    <bt:Urls>
      <bt:Url id="Functions.Url" DefaultValue="https://your-blazor-app-url.com/functions.js" />
    </bt:Urls>
  </Resources>
</VersionOverrides>

2. 编写JS桥接文件（functions.js） #

创建独立的JS文件作为Outlook和Blazor的桥梁：

• 实现Outlook要求的onMessageSend函数
• 通过Blazor的JS互操作调用.NET方法处理逻辑

// 存储Blazor组件实例（用于访问组件状态）
let blazorComponentInstance;

// 注册Blazor组件实例
function registerBlazorComponentInstance(instance) {
    blazorComponentInstance = instance;
}

// Outlook触发的OnMessageSend事件处理函数
function onMessageSend(event) {
    blazorComponentInstance.invokeMethodAsync('HandleMessageSend', event)
        .then(allowSend => {
            event.completed({ allowEvent: allowSend });
        })
        .catch(error => {
            console.error('Blazor处理事件失败:', error);
            event.completed({ allowEvent: false });
        });
}

3. 在Blazor中实现事件处理逻辑 #

在Blazor组件中编写处理方法，用[JSInvokable]标记供JS调用：

方式一：实例方法（支持组件状态/服务）

如果需要访问组件实例的状态或注入服务，可将组件实例注册到JS：

@inject IJSRuntime JS
@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("registerBlazorComponentInstance", DotNetObjectReference.Create(this));
        }
    }

    [JSInvokable]
    public bool HandleMessageSend(object eventArgs)
    {
        // 业务逻辑示例：检查邮件主题是否包含指定关键词
        dynamic args = eventArgs;
        string subject = args.item.subject;
        return subject?.Contains("审批") == true;
    }
}

方式二：静态方法（无实例状态）

如果不需要访问组件实例，可直接用静态方法：

namespace YourBlazorAppNamespace
{
    public static class MessageSendHandler
    {
        [JSInvokable]
        public static bool HandleMessageSend(object eventArgs)
        {
            // 逻辑示例：检查邮件正文是否为空
            dynamic args = eventArgs;
            return !string.IsNullOrEmpty(args.item.body.content);
        }
    }
}

对应的JS调用改为：

window.Blazor.invokeMethodAsync('YourBlazorAppNamespace.MessageSendHandler.HandleMessageSend', event)

4. 关键注意事项 #

• Blazor Runtime加载时机：若OnMessageSend在任务窗格未打开时触发，需确保Blazor Runtime已初始化。可将Blazor启动代码嵌入functions.js，或在清单中设置加载项启动时机为ItemRead。
• 同步执行限制：OnMessageSend同步模式下建议逻辑执行时间控制在1秒内，避免触发Outlook超时。
• 权限配置：清单中需设置足够权限（如Permissions="ReadWriteMailbox"），否则无法访问邮件内容。

内容的提问来源于stack exchange，提问作者Corith Malin