以 asp-for 为参数的自定义 ViewComponent答案

【问题标题】：Custom ViewComponent with asp-for as parameter以 asp-for 为参数的自定义 ViewComponent
【发布时间】：2017-03-17 11:00:16
【问题描述】：

我想把这个包装起来：

<textarea asp-for="@Model.Content" ...>

进入可重用的 ViewComponent，其中属性将是参数：

<vc:editor asp-for="@Model.Content" />

我能够将 asp-for 作为参数传递给视图组件：

public class EditorViewComponent : ViewComponent
{
    public IViewComponentResult Invoke(ModelExpression aspFor = null)
    {
        //when debugging, aspFor has correct value
        return View(aspFor);
    }
}

但我无法从组件的角度评估它。这不起作用：

<!-- ViewComponents/Editor/Default.cshtml -->
@model Microsoft.AspNetCore.Mvc.ViewFeatures.ModelExpression
<textarea asp-for="@Model" />

有什么想法吗？

【问题讨论】：

我认为你在混合ViewComponents 和TagHelpers。 docs.microsoft.com/en-us/aspnet/core/mvc/views/view-components
我只想将我的 textarea 包装到 viewcomponent 中，但我无法将 ModelExpression 传递到 textarea。您的回答仅显示了如何使用视图组件，但无助于将 ModelExpression 传递到视图组件内的文本区域。
使用不同的类作为您的优先级。喜欢modelExpression？或 func
??我不确定你是什么意思。什么优先级？我已经在使用 ModelExpress
*属性。啊，你可能需要重新编码这部分。或者扩展文本区域标签助手。无论如何，您可能想创建一个标签助手。

标签： c# asp.net-core asp.net-core-viewcomponent

【解决方案1】：

我认为您正在混合 ViewComponents 和 TagHelpers:https://docs.microsoft.com/en-us/aspnet/core/mvc/views/view-components

查看组件

视图组件在以下情况下被调用：

@await Component.InvokeAsync("EditorView", @Model.Property);
// or
<vc:[view-component-name]>

尝试以下代码段：

<vc:editor for="@Model.Content" />

标记助手

标签助手只能像这样调用：

<textarea asp-for="@Model.Content">

【讨论】：

当我将aspFor 参数重命名为for 参数时，我仍然有同样的问题。我无法将它传递给我的 ViewComponent 中的标签助手
我在同一条船上。为了让 asp-for 工作，幕后发生了什么样的 .NET 魔法和魔法？这些都没有记录（我可以找到），我也想为我的项目创建一个可重用的视图组件库，但据我所知，我必须手动设置属性名称。
@Keith 去年微软的技术演示中应该有很多视频解释它是如何工作的。你最好的办法是检查 GitHub 上的 taghelper 源代码来帮助你。

【解决方案2】：

如果您想将 ModelExpression 传递给底层 ViewComponent，然后将其传递给 TagHelper，则必须使用 @TheModelExpression.Model：

<!-- ViewComponents/Editor/Default.cshtml -->
@model Microsoft.AspNetCore.Mvc.ViewFeatures.ModelExpression
<textarea asp-for="@Model.Model" />

正如@JoelHarkes 提到的，在这种特殊情况下，自定义 taghelper 可能更合适。无论如何，我仍然可以在 TagHelper 中渲染 PartialView ala Template：

[HtmlTargetElement("editor", Attributes = "asp-for", TagStructure = TagStructure.WithoutEndTag)]
public class EditorTagHelper : TagHelper
{
    private HtmlHelper _htmlHelper;
    private HtmlEncoder _htmlEncoder;

    public EditorTagHelper(IHtmlHelper htmlHelper, HtmlEncoder htmlEncoder)
    {
        _htmlHelper = htmlHelper as HtmlHelper;
        _htmlEncoder = htmlEncoder;
    }

    [HtmlAttributeName("asp-for")]
    public ModelExpression For { get; set; }

    [ViewContext]
    public ViewContext ViewContext
    {
        set => _htmlHelper.Contextualize(value);
    }


    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = null;

        var partialView = await _htmlHelper.PartialAsync("TagHelpers/Editor", For);

        var writer = new StringWriter();
        partialView.WriteTo(writer, _htmlEncoder);

        output.Content.SetHtmlContent(writer.ToString());
    }
}

.cshtml 模板看起来与 viewcomponent 中的完全一样。

【讨论】：