如何从 Blazor 中的另一个组件重新渲染组件?

2024-01-12

我有一个电子商务Blazor服务器项目,我想重新渲染推车组件将商品添加到购物车后产品组件。我尝试将 Cart 组件继承到 Product 组件,并运行 Cart 组件的公共方法来重新渲染其组件。

添加到购物车方法产品组件.

产品.剃须刀

 public async Task AddToCart()
{
    //The adding logic in this area

    StateHasChanged();
    Reload(); // this method is inherited from the Cart Component trying to re-render the Cart Component
    //Does not work
}

推车剃须刀

[Parameter]
public List<Models.Cart> CartItem { get; set; }

protected override void OnInitialized()
{
    CartItem = _context.Cart.Where(i => i.CustomUserId == _userManager.GetUserId(_httpContextAccessor.HttpContext.User) && !i.IsSold).ToList();
}


public void Reload()
{

    OnInitialized();
    StateHasChanged();

}

该方法成功运行,但 UI 并未像我希望的那样重新呈现。

我虽然运行时 UI 会重新渲染OnInitialized()方法和StateHasChanged()?

Edit:我更新我的Reload()方法并在末尾调用该方法AddToCart()方法,但不起作用:(

推车剃须刀

 protected override void OnParametersSet()
{
    CartItem = _context.Cart.Where(i => i.CustomUserId == _userManager.GetUserId(_httpContextAccessor.HttpContext.User) && !i.IsSold).ToList();
}


public void Reload()
{
    OnParametersSet(); //updated but still not working
    StateHasChanged();

}

产品.剃须刀

public async Task AddToCart()
    {
        //The adding logic in this area

        Reload(); // this method is inherited from the Cart Component trying to re-render the Cart Component
        //Does not work
        StateHasChanged();
    }

从 Cart 继承并不意味着您正在查看与项目中的“其他”购物车相同的实例。您继承的是 Cart 类(定义),而不是正在运行的组件。

您有两种方法可以解决这个问题:

使用公共父组件

  1. 将 Product.razor 和 Cart.razor 作为公共父组件的子组件。
  2. 在 Product.razor 中,将商品添加到购物车后会引发 OnItemAdded 等事件。
  3. 在父组件中捕获此事件
  4. 从父组件调用 Reload()instance正在运行的购物车组件的名称。 (请参阅组件的 @ref 属性 -https://blazor-university.com/javascript-interop/calling-javascript-from-dotnet/passing-html-element-references/ https://blazor-university.com/javascript-interop/calling-javascript-from-dotnet/passing-html-element-references/).

使用事件广播者

  1. 创建事件广播服务(https://morioh.com/p/a5df9450ff5e https://morioh.com/p/a5df9450ff5e)
  2. 在 Product.razor 中,将商品添加到购物车后,广播一条消息。
  3. 在 Cart.razor 中收听该消息
  4. 收到该消息后更新 Cart.razor 中的视图
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何从 Blazor 中的另一个组件重新渲染组件? 的相关文章

随机推荐

  • 有没有列出所有移动设备和规格的信息数据库? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 是否有任何开源项目或网站提供所有移动设备和规格的列表 也许这已经很旧了 但可能会对某人有所帮助 我正在
  • 如何使用 HTTP 重定向传递信息(在 Django 中)

    我有一个接受表单提交并更新模型的视图 更新模型后 我想重定向到另一个页面 并且我希望此页面上出现诸如 Field X successfully Updated 之类的消息 如何将此消息 传递 到其他页面 HttpResponseRedire
  • Node-sass 和 gulp-sass 的优缺点

    我想知道 node sass 和 gulp sass 之间有什么区别 每个版本的优点和缺点是什么 我在 www npmjs com 上看到 node sass 在下载方面有两倍以上的优势 这会让事情变得更好吗 编译速度有区别吗 他们之间的区
  • 如何使 AddressSanitizer 在出现错误(和其他问题)后不会停止

    我运行的是 OS X 10 8 5 我已经通过 homebrew 安装了 llvm 3 4 clang version 3 4 tags RELEASE 34 final 并且我正在使用 fsanitize address 进行构建 我可以
  • 选择随机函数

    我有一个函数列表 function randomiseiconscycle1 iconTwoContainer img iconFiveContainer img iconSevenContainer img fadeIn 300 setT
  • Postgres Select ILIKE %text% 在大字符串行上运行缓慢

    我有一个只有 7 列的表 其中一列存储每一行 的长文本数据 该文本列数据的平均字符长度约为 1500 个字符 该表有 500 000 行 当我使用选择查询而不使用该文本列时 没有问题 查询按预期需要 10 秒 但是如果我将这个长文本列添加到
  • CGAL,裁剪在矩形内的 voronoi 图

    我使用 CGAL 和 Qt 来绘制 Voronoi 图 我用了CGAL Voronoi diagram 2
  • 如何使用 DAO 插入雪花变体字段?

    我有以下代码 RegisterMapper MyEntity ResultMapper class UseStringTemplate3StatementLocator public interface MyDao Transaction
  • 在 thread.join() 之后调用线程会看到局部变量的修改吗?

    在最简单的示例中 假设我有一个启动线程的函数 该函数又将局部变量的值设置为 true 我们加入线程 然后离开函数 bool func bool b false std thread t b true t join return b 该函数会
  • 澳大利亚手机号码正则表达式验证需要在号码之间留有空格

    我需要验证手机号码 第一个以 04 开头的文本输入 总共 10 位数字 包括 04 例如 0412345678 我的输入字段在下面
  • 使用听写 - iOS 6 - DidStart?

    如何回应starting听写 响应听写的已知方法 dictationRecordingDidEnd 响应完成的承认 短语 听写识别失败 回复failed听写识别 参考 UITextInput 协议参考 从 iOS 5 1 开始 当用户在支持
  • 动态创建变量是个好主意吗?

    最近发现了如何通过这个方法在python中动态创建变量 vars my variable Some Value 从而创建变量my variable 我的问题是 这是个好主意吗 或者我应该总是提前声明变量 我认为如果可能的话最好使用字典 va
  • 视频流基础设施

    我们想建立一个实时视频聊天网站 并正在寻找基本的架构建议和 或针对要使用的特定框架的推荐 以下是该网站的基本功能 大多数流媒体将由一个人通过网络摄像头等进行现场直播 通常由 1 10 人观看 但最多可能有 100 多名观众 音频和视频不必是
  • Spark 对分隔数据进行排序

    我是 Spark 新手 您能告诉我以下代码有什么问题吗 val rawData USA E001 ABC DE 19850607 IT 100 UK E005 CHAN CL 19870512 OP 200 USA E003 XYZ AB
  • 获取上周唯一的最新数据并对某些列求和

    仅获取上周的最新数据并对某些列求和 我用数据 实际结果和预期做了一个例子 http rextester com HMB12638 http rextester com HMB12638 Taking first as example use
  • Select2限制标签数量

    有没有办法限制用户可以使用 Select2 添加到输入字段的标签数量 I have tags select2 containerCssClass supplierTags placeholder Usual suppliers minimu
  • 如何使用 Bash 获取屏幕会话中的命令历史记录?

    如果我开始一个屏幕会话screen dmS name 我如何使用脚本访问该屏幕会话的命令历史记录 Using the the last executed command appears even in screen 我在系统上使用默认的 b
  • 推理 Big O 的正式定义时遇到一些困难

    我的教授最近回顾了 Big O 的正式定义 老实说 即使他向几个不同的学生解释了它 我们似乎仍然没有理解它的核心 理解上的问题主要出现在我们经历的以下例子中 到目前为止 我的推理如下 当您将函数的最高项乘以常数时 您会得到一个新函数 该新函
  • 循环变量覆盖全局变量

    在Python中 为什么循环变量会覆盖已经定义的全局变量 将循环变量放入模块的全局命名空间而不是仅用于循环的新本地命名空间似乎违反直觉 这是一个显示我正在谈论的内容的示例 c 3 14 print before loop c format
  • 如何从 Blazor 中的另一个组件重新渲染组件?

    我有一个电子商务Blazor服务器项目 我想重新渲染推车组件将商品添加到购物车后产品组件 我尝试将 Cart 组件继承到 Product 组件 并运行 Cart 组件的公共方法来重新渲染其组件 添加到购物车方法产品组件 产品 剃须刀 pub