不会调用作为标记帮助器的视图组件 [英] View Component as a Tag Helper does not get Invoked

问题描述

在ASP.NET Core 1.1中引入了将视图组件用作标记帮助器。 （请参阅将视图组件作为标记助手 ）。但是以下内容仅返回视图的 Test for VC 部分。似乎< vc：annual-orders>…< / vc：annual-orders> 部分根本没有被调用。

视图\共享\组件\AnnualOrders\Default.cshtml ：

  @ {
 Layout =; 
} 
< div>测试VC< / div> 
< div> 
< vc：年度订单> 
 
< / vc：年度订单> 
< / div> 
  

myProj\ViewComponents\AnnualOrdersViewComponent.cs ：

 公共类AnnualOrdersViewComponent：ViewComponent 
 {
 private readonly OrdersContext _context; 
 
 public AnnualOrdersViewComponent（OrdersContext context）
 {
 _context = context; 
} 
 
公共异步任务< IViewComponentResult> InvokeAsync（）
 {
 var lastOrders = _context.Where（t => t.orderType == new）; 
 return View（await lastOrders）; 
} 
} 
  

注意：

1. 我正在使用ASP.NET Core 1.1，并且没有标签助手的View组件运行正常。


2. 我还遵循了MSDN的官方教程，将View组件作为标签助手 ，其中解释了标签助手的PascalCase类名称和方法参数已转换为其较低的 kebab-case 。

解决方案

这不能解决您的具体情况，但关系密切，因此我想我会将它留给需要听它的任何人：

即使标记帮助器已在例如中正确注册 _ViewStart.cshtml ，按照@ alan-savage的回答，如果您不包含< InvokeAsync（）方法。这看起来似乎是不言而喻的，但是由于它没有异常响应，因此也可能在最初造成混淆，在 Visual Studio 中也没有内置任何（明显的）设计时验证。 p>

注意：实际上 Visual Studio中内置了 设计时验证。在代码编辑器中，正确引用的视图组件将以粗体显示。但是，如果您不需要它，这很容易错过。而且没有在 Error List 面板中显示的警告，或作为构建输出的一部分显示的警告。

，例如，如果您改为：

 公共类AnnualOrdersViewComponent：ViewComponent {
公共异步Task< IViewComponentResult> InvokeAsync（string labelName）{
…
} 
} 
  

然后将您的标记助手称为：

 < vc：annual-orders>< / vc：annual-orders> 
  

您的代码将在没有警告的情况下编译，并且您的页面将毫无例外地运行，但是视图组件不会呈现，而是将其注入到页面源中。

实际上，如果您将视图组件参数值设置为可选，例如标记帮助程序语法不支持可选参数：

 公共类AnnualOrdersViewComponent：ViewComponent {
 public async Task< IViewComponentResult> InvokeAsync（string labelName = null）{
…
} 
} 
  

< blockquote>

注意： Microsoft已承诺在ASP.NET 5.0中将它们作为标签助手调用时尊重View组件上的可选参数（源）。

很明显，在以上任何一个示例中，都可以通过简单地包括所有参数来解决此问题：

 < vc：annual -orders label-name =人为的示例>< / vc：annual-orders> 
  

同样，这不能解决您的问题的具体细节，但我想开发人员会为此而奋斗这个线程可能会遇到问题，因此，如果标签帮助程序已经正确注册，我想将其作为另一个故障排除步骤。

Invoking a View Component as a Tag Helper was introduced in ASP.NET Core 1.1. (See "Invoking a view component as a Tag Helper"). But the following only returns the Test for VC part of the view. It seems that <vc:annual-orders>…</vc:annual-orders> part does not get invoked at all.

Views\Shared\Components\AnnualOrders\Default.cshtml:

@{ 
    Layout = "";
}
<div>Test for VC</div>
<div>
    <vc:annual-orders>

    </vc:annual-orders>
</div>

myProj\ViewComponents\AnnualOrdersViewComponent.cs:

public class AnnualOrdersViewComponent : ViewComponent
{
    private readonly OrdersContext _context;

    public AnnualOrdersViewComponent(OrdersContext context)
    {
        _context = context;
    }

    public async Task<IViewComponentResult> InvokeAsync()
    {
        var lastOrders = _context.Where(t => t.orderType == "new");
        return View(await lastOrders);
    }
}

NOTE:

1. I'm using ASP.NET Core 1.1 and the View Components without Tag Helpers are working fine.
2. I also followed MSDN's official tutorial, "Invoking View Components as Tag Helpers" where it explains that PascalCase class names and method parameters for the Tag Helper are translated into their lower kebab-case.

解决方案

This doesn't address your specific situation, but it's closely related, so I figured I'd leave it here for anyone that needs to hear it:

Even if the tag helper is correctly registered in e.g. the _ViewStart.cshtml, as per @alan-savage's answer, it will still fail to render if you don't include all parameters from the InvokeAsync() method. This may seem self-evident, but it can be initially confusing since it doesn't respond with an exception, nor is there any (obvious) design-time validation built into Visual Studio for this.

Note: There actually is design-time validation built into Visual Studio. In the code editor, properly referenced view components will show up with bold property names. But this is easy to miss if you're not looking for it. And there isn't e.g. a warning that shows up in the Error List panel, or as part of the build output.

So, for example, if you instead had:

public class AnnualOrdersViewComponent : ViewComponent {
  public async Task<IViewComponentResult> InvokeAsync(string labelName) {
    … 
  }
}

And then called your tag helper as:

<vc:annual-orders></vc:annual-orders>

Your code would compile without warning, and your page would run without exception—but the view component wouldn't be rendered, and would instead be injected into the source of the page.

In fact, this would even happen if you made the view component parameter value optional, as the tag helper syntax doesn't honor optional parameters:

public class AnnualOrdersViewComponent : ViewComponent {
  public async Task<IViewComponentResult> InvokeAsync(string labelName = null) {
    … 
  }
}

Note: Microsoft has committed to honoring optional parameters on View Components when calling them as Tag Helpers in ASP.NET 5.0 (source).

Obviously, in either of the above examples, this could be fixed by simply including all parameters:

<vc:annual-orders label-name="Contrived Example"></vc:annual-orders>

Again, this doesn't address the specifics of your problem, but I imagine developers running up against this issue will likely come across this thread, so I wanted to include this as another troubleshooting step in case the tag helper has already been correctly registered.

这篇关于不会调用作为标记帮助器的视图组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！