如何使用 Javascript 在 ASP.NET 核心中创建可重用组件

Question

自从转向 MVC 以来，我一直想知道（现在我需要）一个可重复使用的 "component"，我可以坚持任何视图，它可以做每个视图共有的事情并包括 jQuery 在该组件内。我说的是视图组件，它们很简洁，但我还没有遇到对它们的可行需求（除了显示地址或 phone 数字）。没有什么真正的互动。

那么，如果我无法使用视图组件执行此操作，我该怎么办？我有一个使用 JavaScript 的视图组件，但这只是因为我无法引用我在布局中定义的部分。我已经阅读了数十篇文章，指出这是设计使然。好吧，在我看来，这是一个糟糕的设计，并将这些组件锁定为非交互（或受限）。

Answer 1

创建服务：

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

然后将其添加到 DI 容器范围内（每个新请求都会创建范围）：

services.AddScoped<MyViewContext, MyViewContext>();

在您看来，您可以通过以下方式访问它：

@inject MyViewContext MyViewContext

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

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

Answer 2

I have always wondered (and now am in need of) a reusable "component" that I can stick on any view

我想你要找的是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。没有充分的理由不将所有内容捆绑，这样客户端就可以一次缓存所有内容。

View Components 我觉得在 MVC 中有点老套。它们有点像这种捕获所有 在 MVC 和 WebPages 中工作 但没有真正考虑过的东西。

How To Create Reusable Component in ASP.NET Core with Javascript