文章/答案/技术大牛

发布

社区首页 >问答首页 >Blazor Server，条件元素+ JS调用

问Blazor Server，条件元素+ JS调用
EN

Stack Overflow用户

提问于 2020-05-18 17:30:39

回答 1查看 435关注 0票数 0

我有一个应用程序，它是一个多步“向导”表单。在每个相关步骤之后，状态被调整，新的HTML通过条件语句显示/隐藏(下面的简单例子)。

if (IsStepSignature)
{
    <div>Signature HTML here</div>
}

一切都很好。当我需要在上面动态生成的HTML上调用一些JS逻辑(例如，单击处理程序来连接外部JS库)时，我的问题就出现了。当我处理"Next“单击时，我可以调用JS --只是fine...but --它还没有从上面看到动态的HTML。有没有一种方法可以调用某些JS，并对其进行控制，以便在页面从C#代码执行中重新绘制之后才能执行？

5/18/2020来自Nik 的更新可以利用一些标志并使用OnAfterRenderAsync来控制这种排序。这是可行的，但它确实需要一些额外的跳到/从服务器。下面是我在实现这一点时所看到的。这可能只是Blazor的本质，因为其中一个优点/缺点是一些已知的额外的闲聊。总共这些请求是2.5K，非常小。

CLIENT    -->    Browser Dispatch Event (NEXT CLICK)
Render    <--    SERVER
CLIENT    -->    Render Complete
Invoke JS <--    SERVER
CLIENT    -->    Invoke Complete

asp.net-core

blazor

blazor-server-side

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-05-18 18:34:42

您要处理的问题与客户端HTML中根本不存在的元素有关，直到重新呈现发生之后。因此，这样做的一种方法是在C#代码中设置一个布尔标志，表示需要在呈现之后运行代码，并填充JS所需的支持字段。每当需要运行JS互操作时，将标志设置为true，将支持字段设置为JS互操作调用所需的值，然后执行启动DOM差异计算的操作。(即使是StateHasChanged也足够了，但是像前面提到的那样有条件地添加项也会做到这一点)然后，按照如下所示重写OnAfterRenderAsync方法：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if(firstRender)
    {
        // any first render code
    }

    if(yourFlag)
    {
        YourJSInteropMethod(supportField1, supportfield2);
        yourflag = false;  
    }
}

这种方法的简单性在于，DOM更新总是在OnAfterRenderAsync调用之前进行，因此您的HTML将填充您使用JS所针对的内容。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61875464

复制

相似问题

问Blazor Server，条件元素+ JS调用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Blazor Server，条件元素+ JS调用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Blazor Server，条件元素+ JS调用
EN