c# - 将 ModelExpression 从 Tag Helper 传递到局部视图
问题描述
我正在使用此处找到的示例来允许从标记助手中呈现部分视图。我在这里要做的是能够像这样定义标签助手:
<mydateinput for="@Model.StartDate" />
在标签助手的 c# 代码中,我定义了“for”属性,据我所知,这需要定义为“ModelExpression”。
public class MyDateInputTagHelper : TagHelper
{
public ModelExpression For { get; set; }
...
}
使用本文前面提到的代码,我正在渲染一个局部视图,并简单地将标签助手的类作为局部视图的模型传递。
public override void Process(TagHelperContext context, TagHelperOutput output)
{
base.Process(context, output);
((IViewContextAware)HtmlHelper).Contextualize(ViewContext);
output.Content.SetHtmlContent(HtmlHelper.Partial("~/Views/Partials/TagHelpers/MyDateInput.cshtml", this));
}
最后,我的部分视图被定义为这样
<input asp-for="For" />
我遇到的问题是我无法让模型表达式“For”正确传递到局部视图中。当我查看 html 源代码时,我只是在输入的 id 和 name 属性中看到字面上的名称“For”。此外,在我的剃须刀页面模型中设置的值也没有正确显示。
我想要发生的是 html 将以这样的方式呈现,即在发布页面时,模型到我的剃须刀页面将填充在标签助手/部分视图下选择的值。它特别是围绕“StartDate”(在我的示例中),而不是属性“For”。
有谁知道我做错了什么,以及在这个例子中我可以改变什么以正确地将 ModelExpression 传递给局部视图?
解决方案
直接使用是不可能的InputTagHelper
。有关更多信息,请参阅Razor/issues #926以及关于 SO 的类似问题。
一种解决方法
但作为一种解决方法,您可以使用自定义HtmlHelper<TModel>
(就像@Html
)来实现相同的目标。您的局部视图可能如下所示:
@model App.TagHelpers.PartialVM
@{
var PartialHtml = Model.HtmlHelper;
}
@PartialHtml.Label(Model.NewFor.Name,Model.NewFor.Name)
@PartialHtml.TextBox(Model.NewFor.Name, Model.NewModel)
即,使用@Html.Label()
&@Html.TextBot
而不是<label>
& <input>
。
这PartialVM
是一个简单的类,其中包含有关模型的元信息:
public class PartialVM
{
public PartialVM(ModelExpression originalFor, IHtmlHelper htmlHelper)
{
var originalExplorer = originalFor.ModelExplorer;
OriginalFor = originalFor;
OriginalExplorer = originalExplorer;
NewModel = originalExplorer.Model;
NewModelExplorer = originalExplorer.GetExplorerForModel(NewModel);
NewFor = new ModelExpression(OriginalFor.Name, NewModelExplorer);
this.HtmlHelper = htmlHelper;
}
public IHtmlHelper HtmlHelper { get; set; }
public ModelExpression OriginalFor { get; set; }
public ModelExplorer OriginalExplorer { get; set; }
public ModelExpression NewFor { get; set; }
public ModelExplorer NewModelExplorer { get; set; }
public Object NewModel { get; set; }
}
请注意,IHtmlHelper
实际上是 aIHtmlHelper<TSomeDynamicModel>
而不是 plainIHtmlHelper
。
最后,更改TagHelper
如下:
[HtmlTargetElement("my-custom-input")]
public class MyCustomInputTagHelper : TagHelper
{
private readonly IServiceProvider _sp;
[ViewContext]
public ViewContext ViewContext { set; get; }
public ModelExpression For { get; set; }
public MyCustomInputTagHelper(IServiceProvider sp)
{
this._sp = sp;
}
public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
{
base.Process(context, output);
var originExplorer = For.ModelExplorer;
var newModel = originExplorer.Model;
var newExplorer = originExplorer.GetExplorerForModel(newModel);
var newFor = new ModelExpression(For.Name, newExplorer);
var ModelType = originExplorer.Container.Model.GetType();
var htmlHelperType = typeof(IHtmlHelper<>).MakeGenericType(ModelType);
var htmlHelper = this._sp.GetService(htmlHelperType) as IHtmlHelper; // get the actual IHtmlHelper<TModel>
(htmlHelper as IViewContextAware).Contextualize(ViewContext);
var vm = new PartialVM(For, htmlHelper);
var writer = new StringWriter();
var content = await htmlHelper.PartialAsync("~/Views/Partials/TagHelpers/MyDateInput.cshtml", vm);
output.TagName = "div";
output.TagMode = TagMode.StartTagAndEndTag;
output.Content.SetHtmlContent(content);
}
}
现在您可以为您的属性传递任何asp-for
表达式字符串,它应该可以按预期工作。For
TagHelper
测试用例:
假设我们有一个 Dto 模型:
public class XModel {
public int Id { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public string ActiveStatus{ get; set; }
}
您可以通过以下方式呈现它:
/// the action method looks like:
/// var model = new XModel {
/// StartDate = DateTime.Now,
/// EndDate = DateTime.Now.AddYears(1),
/// ActiveStatus = "Active",
/// };
/// return View(model);
@model XModel
<my-custom-input For="StartDate" />
<my-custom-input For="EndDate" />
<my-custom-input For="ActiveStatus" />
这是渲染时的屏幕截图:
推荐阅读
- numpy - 从 2d numpy 数组的每一行中删除指定的列索引
- javascript - 访问与数组中的项同名的对象——Javascript
- git - 在不导航到存储库目录的情况下执行 git pull
- angular - 在 Angular 6 及以上版本中使用 webpack 好还是由 ng-build prod 处理?
- javascript - 如何导入自定义 Js 文件的所有方法
- python - 如何有效地访问熊猫中满足条件的第一次和最后一次出现索引
- forms - 控制器操作 - 重定向到另一个模板
- sql - PostgreSQL:如何在函数中并行运行查询?
- javascript - 如何在 Vue js 中在线参考图片?
- java - 处理 100 万条记录的 Executor 框架