问题标签 [view-components]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1640 浏览

c# - 找不到不同程序集中的 ASP.NET Core ViewComponents

我正在尝试从不同的程序集加载 ViewComponent 但在主项目中我收到以下错误

InvalidOperationException:找不到名为“Pro.ItemViewComponent”的视图组件。视图组件必须是公共的非抽象类,不包含任何通用参数,并且要么用“ViewComponentAttribute”装饰,要么具有以“ViewComponent”后缀结尾的类名。视图组件不能用“NonViewComponentAttribute”装饰。

库.csproj

主项目中的 Startup.cs。

我在 StackOverflow 中关注了许多文章和一些问题和答案,但我没有找到任何解决方案,我应该怎么做才能从不同的程序集中共享 ViewComponent?

0 投票
1 回答
1517 浏览

asp.net - ASP.NET Core Razor Pages 2.2 - 如何实现共享 ViewComponent

我正在使用 Razor Pages 而不是 MVC 开发 ASP.NET Core 网站。

我遇到了一种情况,我必须实现一个可以在不同页面中使用的共享组件。该组件是 - 简单的评论线程。在不同的页面上签名的用户可以发送他们的评论。

该组件应由两部分组成:

  1. 评论列表 - 这是可以使用 ViewComponent 或 Partial Page 轻松实现的评论列表;
  2. 添加评论控制 - 这是文本区域和提交按钮,允许用户发送他们自己的评论。

我想要实现的是使用 ViewComponent 或部分页面或其他一些技术在任何页面上放置一些带有初始参数的标记,以启用此评论功能,而无需在页面之间复制/粘贴相同的代码。

我对此有一些问题。

正如我已经提到的,只需添加以下标记,即可使用 ViewComponent 在任何页面上显示评论列表:

所以 CommentsViewComponent 将调用 ef.core DBContext 来加载定义类型和 id 的评论。这很完美。但是当我需要从 ViewComponent 的标记发送帖子并处理这些帖子时,问题就开始发生了。

计划有 3 个可能的邮寄电话:

  1. 添加新评论
  2. 删除现有评论
  3. 编辑现有评论

第一种可能的方法是在 NewsItem 页面上定义 3 个处理程序,并使用 ViewComponent 中的 tag-helper 调用它们。但是我必须在需要相同功能的任何其他页面上定义 3 个相同的处理程序。

我正在考虑的另一种方法是定义一些假的 PageModel 将包含这 3 个处理程序,并且 ViewComponent 将使用 Ajax 发布到该页面。这里唯一的复杂之处是,在完成这些帖子之后,我需要强制 ViewComponent 重新呈现自己,因为 Comments 已更改(删除、添加或编辑)。

因此,该组件将包含以下部分:

  1. ViewComponent 显示必要的标记
  2. 在客户端点击时发送帖子的 JavaScript 代码
  3. 假 PageModel 来处理帖子。

我不太喜欢这种方法,而且我认为对于这样一个简单的任务来说它太复杂了。这是我的第一个 APS.NET 核心 Razor Pages 项目,所以我对如何实现此类隔离组件没有太多经验,希望你们能指导我如何以更好的方式实现它,以遵循 SOLID 和 DRY 原则。

谢谢。

0 投票
1 回答
1138 浏览

asp.net-core - 如何避免在 ASP.NET Core MVC 中将我的视图组件 cshtml 命名为“Default.cshtml”?

似乎在 ASP.NET Core MVC 中,如果我想使用 View Component,我必须将它们放入 中Views\Shared\Components\[ViewComponentName],然后将文件命名为“Default.cshtml”。

这是相当令人沮丧的,因为在我帮助从 Perl CGI 移植的大型项目开始时,我正在创建大量的视图组件,并且在 Visual Studio 中有五个选项卡都命名Default.cshtml为令人困惑。

有什么办法可以避免这种命名约定?甚至可能将它们从文件夹中取出,使文件看起来像……?

我不知道是否只有一些我可以调整的设置或什么。在大多数情况下,我对 ASP.NET 还是很陌生,并且仍在搞清楚。使用 ASP.NET Framework 代替 ASP.NET Core一种选择,但我不希望这样做,因为很多样板文件已经完成。

ViewComponents 上的文档是这样说的:

我们建议您将视图文件命名为 Default.cshtml 并使用 Views/Shared/Components/{View Component Name}/{View Name} 路径。

这让我觉得有办法绕过这个限制,但它没有具体说明它是如何工作的或者它会是什么样子。

0 投票
1 回答
838 浏览

asp.net-core - 创建一个接受 HTML 或其他组件作为参数的视图组件模板/容器

我搜索了很多地方,并没有看到任何与我想的相似的东西。

假设我想创建一个可重用的容器组件,例如卡片、表单或模式,并将其保存为视图组件。我如何在该主视图组件的“主体”内添加一个新的视图组件,以使其最大程度地可重用?

这里的语法当然只是为了演示这个想法,但例如,像这样:

这样的事情可能吗?

这不一定需要使用视图组件——也许是部分视图?——只要实现了重用其他可重用元素的容器的主要目标。

我研究了帮助程序,但它们在 ASP.NET Core 中不再可用。

0 投票
2 回答
1393 浏览

c# - 使用路由值时 ViewComponent 返回但模型在视图中为空

我还是 Razor 页面和视图组件的新手,但我已经在 ASP.NET 中遇到过几次。

我不确定为什么我的视图组件没有填充其模型。我注意到我做错的一件事是将路由参数放在顶部。例如,

我知道(至少现在)视图组件不打算作为端点直接路由到,但现在我很好奇使用@page带有路由属性的 a 可以防止模型绑定发生什么?我只是通过试验/错误发现删除它可以让我的模型填充到视图组件中。

这是代码

视图组件

ViewComponent 的视图,Default.html

客户列表模型

父视图,Index.cshtml

0 投票
0 回答
310 浏览

.net-core - 将 FluentValidation 与 ASP.NET Core 3.1 和视图组件集成

我刚刚将我的应用程序更新到 .NET Core 3.1 并将流式验证更新到最新版本 (8.6.2),并且在呈现具有输入字段的视图组件时出现以下错误。

问题是在视图组件上,HttpContext实例IHttpContextAccessor的 是null,因此当流利的验证尝试将验证器插入管道时会给出空引用异常。我确实services.AddHttpContextAccessor();Startup.

这是受影响的观点之一。如果我删除该字段中的asp-for标签助手,input那么它就可以工作。但这并不是真正的解决方案。

有没有人遇到过同样的问题,或者您对我该如何解决这个问题有任何想法?

0 投票
1 回答
65 浏览

asp.net-core-mvc - 如何将视图组件数据与局部视图同步?

我想按照下图显示我的 .NET Core 网页。

在此处输入图像描述

对于左窗格,我使用的是局部视图,而我正在使用视图组件渲染右窗格。

我调用不同的 API 从数据库中检索数据,以便在两个窗格中显示数据。

我想将左窗格记录计数与右窗格视图组件数据同步。

他们是否有任何视图组件或部分视图的模式/组合来满足我的要求?

0 投票
1 回答
409 浏览

.net - 在 ASP.NET MVC 4 中查看组件

我找不到在 ASP.NET MVC Framework 4.5 中实现视图组件的任何示例。我喜欢在 .NET Core 中使用它们,但是很难找到它们是否存在于 ASP.NET MVC Framework 4.5 中。

0 投票
1 回答
414 浏览

ruby-on-rails - 自定义刺激反射类

我正在 Rails 6 中进行一个实验项目。这个项目的目的对我来说是学习新的方法和使用新的(“ish”)技术。

简而言之,我正在使用Trailblazer基础设施、stimulus_reflexview_component以及view_component_reflex

据我所知,StimulusReflex&ViewComponentReflex期望反射类驻留在reflexes文件夹/命名空间中。

我想要达到的目标:

ViewComponentReflex将我的组件嵌套在Trailblazer概念文件夹(命名空间)中。

我试过的:

创建了以下文件夹结构:

  • concepts/post/component/counter.rb
  • concepts/post/component/counter/counter.html.erb

预期结果:

我希望 Rails 允许命名空间等。设置上述内容并运行示例应用程序时,出现错误:uninitialized constant Component::CounterReflex. 这个类的依赖是内置在其中一个宝石中的,但我不知道在哪里可以找到它。我尝试过覆盖一些方法ViewComponentReflex无济于事。

当我将我Component::Counter的移动到components文件夹(如本例中所示)时,代码有效。

有没有办法使用这个堆栈重新定义/配置反射类的路由(模块)?

更新:

我的应用程序的 GitHub 存储库可以在这里找到

我在点击计数器按钮时看到的确切错误消息是:

0 投票
2 回答
927 浏览

c# - ASP.NET Core 依赖注入错误:尝试激活时无法解析服务类型 - 调用视图组件时出现错误

我正在创建视图组件,下面是我的所有代码..但是当我调用这个视图组件时,我收到如下错误..所以任何人都可以帮助我解决这个问题并解释我到底是什么问题。

错误是:

InvalidOperationException:尝试激活“PerfumeStore.ViewComponents.ShoppingCartSummaryViewComponent”时,无法解析“PerfumeStore.Data.Models.ShoppingCart”类型的服务。

首先,我创建了一个名为 ViewComponents 的文件夹,其中我创建了名为 ShoppingCartSummaryViewComponent.cs 的新类,下面是它的代码。

现在 cshtml 文件位于以下路径中:在 Views / Shared / Components / ShoppingCartSummary /Default.cshtml

现在在我的 _Layout.cshtml 文件中,我以这种方式调用这个视图组件。

但我收到此错误:

InvalidOperationException:尝试激活“PerfumeStore.ViewComponents.ShoppingCartSummaryViewComponent”时,无法解析“PerfumeStore.Data.Models.ShoppingCart”类型的服务。

谢谢