【问题标题】:How To Create Reusable Component in ASP.NET Core with Javascript如何使用 Javascript 在 ASP.NET Core 中创建可重用组件
【发布时间】:2017-10-23 23:40:40
【问题描述】:

自从迁移到 MVC 以来,我一直想知道(现在需要)一个可重用的“组件”,我可以坚持任何视图,它执行每个视图共有的操作,并在该组件中包含 jQuery。我说的是视图组件,它们很整洁,但我还没有遇到对它们的可行需求(除了显示地址或电话号码)。没有什么真正的互动。

那么,如果我不能用视图组件做到这一点,我该怎么办?我有一个使用 JavaScript 的视图组件,但这只是因为我无法引用我在布局中定义的部分。我已经阅读了数十篇文章,这些文章指出这是设计使然。好吧,在我看来,这是一个糟糕的设计,并将这些组件锁定为非交互(或受限)。

【问题讨论】:

  • 我会在依赖注入容器中添加一个作用域服务MyViewContext,它可以让你共享一些元素。如果你需要它,简单地注入它。

标签: jquery asp.net-core asp.net-core-viewcomponent


【解决方案1】:

创建服务:

public class MyViewContext
{
    public bool IsJqueryRequired { get; set; }
    public object MyAwesomeSharedObject { get; set; }
}

然后将其添加到 DI Container 范围内(每个新请求都会创建 Scoped):

services.AddScoped<MyViewContext, MyViewContext>();

在您看来,您可以通过以下方式访问它:

@inject MyViewContext MyViewContext

使用constructor injection 在其他任何地方都可以。

另一个不错的选择是使用 TagHelper 和 TagHelperContextHere 是一篇很棒的文章。

【讨论】:

  • 感谢@Christian 的回答。使用构造函数注入的概念实际上很有意义,我可能不得不试一试,看看我是否喜欢这个结果。
【解决方案2】:

我一直想知道(现在我需要)一个可重复使用的“组件”,我可以坚持任何视图

我认为您正在寻找的是templates。它是可重用的,因为模型可以具有显示和编辑器模板。它非常简单:

可重复使用:

public class Car
{
  public string Model { get; set; }
}

控制器型号:

public class IndexVM
{
  public Car Car { get; set; }
}

index.cshtml

@model IndexVm

@Html.DisplayFor(m => m.Car)

shared/displaytemplates/car.cshtml

@model Car

@Html.DisplayFor(m => m.Model)

至于脚本,只渲染需要的 JS 的想法很久以前就死了。这就是为什么 Bootstrap 有 bootstrap.min.js、bootstrap.min.css。没有充分的理由不将所有内容捆绑在一起,以便客户端可以一次性缓存所有内容。

我觉得 MVC 中的视图组件有点 hacky。它们是在 MVC 和 WebPages 中工作但没有真正考虑过的所有东西。

More Reading

【讨论】:

  • 我同意您对 View Components 的看法。我从没想过使用模板。我目前正在为其他模型使用编辑器模板,所以我没有理由不能在任何视图上为“组件”应用相同的概念。感谢您的提示
猜你喜欢
  • 2013-09-05
  • 2018-04-03
  • 1970-01-01
  • 1970-01-01
  • 2017-12-06
  • 1970-01-01
  • 1970-01-01
  • 2020-11-20
  • 2017-03-08
相关资源
最近更新 更多