使用 asp-for 作为参数的自定义 ViewComponent
Custom ViewComponent with asp-for as parameter
我要包装这个:
<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: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">
如果你想将 ModelExpression 传递给底层的 ViewComponent,然后再传递给 TagHelper,你必须使用 @TheModelExpression.Model
:
<!-- ViewComponents/Editor/Default.cshtml -->
@model Microsoft.AspNetCore.Mvc.ViewFeatures.ModelExpression
<textarea asp-for="@Model.Model" />
正如@JoelHarkes 所提到的,在这种特殊情况下,自定义标签助手可能更合适。无论如何,我仍然可以在 TagHelper 中呈现 PartialView ala 模板:
[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 中看起来完全一样。
我要包装这个:
<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: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">
如果你想将 ModelExpression 传递给底层的 ViewComponent,然后再传递给 TagHelper,你必须使用 @TheModelExpression.Model
:
<!-- ViewComponents/Editor/Default.cshtml -->
@model Microsoft.AspNetCore.Mvc.ViewFeatures.ModelExpression
<textarea asp-for="@Model.Model" />
正如@JoelHarkes 所提到的,在这种特殊情况下,自定义标签助手可能更合适。无论如何,我仍然可以在 TagHelper 中呈现 PartialView ala 模板:
[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 中看起来完全一样。