如何将数据从ASP.NET视图传递到ReactJs.s.net中的反应组件



我正在尝试在.NET Core MVC项目中尝试ReactJs.net,其中我在其中有一个ASP.NET视图(CSHTML),其中有一个React组件,我将其初始化。:

<script src="@Url.Content("~/Scripts/myComponent.jsx")"></script>

现在,我想将数据从ASP.NET视图传递到React组件。例如,当我单击ASP.NET视图上的按钮时,请调用React功能。这可能吗?我知道这是一个基本问题,但我找不到任何帮助,因为在所有示例中,数据仅在React组件之间传递而不是从外部传递(ASP.NET视图)。

我找不到做我在这个问题中描述的方法。因此,我最终在Reactjs中编码了整个页面,这花了一些时间才能进入,但它效果很好,我不必混合技术。

在脚本中声明JS变量,并从模型中分配属性值:

<script type="text/javascript">let modelProperty= '@Model.ModelProperty';</script>
<script src="@Url.Content("~/Scripts/myComponent.jsx")"></script>

然后在您的reactjs脚本中使用该 modelproperty

ReactDOM.render(<MyComponent prop0={modelProperty} />, document.getElementById("yourTargetElementId"))

也许还有更多整洁的解决方案...

取决于数据的性质,您可以尝试localstorage或sessionstorage。您也可以尝试使用路由参数(或URL参数)来支持您的用例。

如果它是敏感/私人数据,则可以对放入SessionStorage中的数据进行加密...如果其不敏感或复杂的数据,则URL参数或路由参数将起作用。

会话或localstorage最适合许多结构化数据,例如大JSON对象。

严格地说(鉴于您的概念)URL参数解决方案是"传递"。数据,而会话存储持有收集数据。

无论哪种方式,您在同一Web应用程序托管的不同服务器页面类型之间共享数据。

相关内容

  • 没有找到相关文章

最新更新