扩展为输入标签助手的部分 [英] Partial that expands into input tag helper
问题描述
Pro ASP.NET Core 3 这本书有
查看源码，我们看到原来的代码:
<label>供应商</label><输入类=表单控件"asp-for=Product.Supplier.Name"/>扩展为:
<label>供应商</label><输入类=表单控件"类型=文本"id="Product_Supplier_Name"name="Product.Supplier.Name"value =Splash Dudes"/>而我们的部分:
扩展为:
<label>供应商</label><输入类=表单控件"类型=文本"id=ForString"名称=ForString"值=产品.供应商.名称"/>有没有什么好的方法可以实现这个partial，以获得与原始代码相同的输出?
更新 2020-09-30
PeterG 在下面的回答中提出以下建议:
这扩展为以下内容:
<label>供应商</label><输入类=表单控件"类型=文本"id=ForString"名称=ForString"value =Splash Dudes"/>而目标如下:
<label>供应商</label><输入类=表单控件"类型=文本"id="Product_Supplier_Name"name="Product.Supplier.Name"value =Splash Dudes"/>所以 value 现在是正确的.但是 id 和 name 仍然关闭.
该书的作者 Adam Freeman 通过电子邮件向我提供了一个示例，演示了如何使用标签助手解决此问题.
添加文件TagHelpers/FormGroupTagHelper.cs:
使用 Microsoft.AspNetCore.Razor.TagHelpers；使用 Microsoft.AspNetCore.Mvc.Rendering；使用 Microsoft.AspNetCore.Mvc.ViewFeatures；命名空间 WebApp.TagHelpers{[HtmlTargetElement(表单组")]公共类 FormGroupTagHelper : TagHelper{公共字符串标签{获取；放;}公共 ModelExpression For { get;放;}公共覆盖无效流程(TagHelperContext 上下文，TagHelperOutput 输出){output.TagName = "div";output.TagMode = TagMode.StartTagAndEndTag;output.Attributes.SetAttribute("class", "form-group");var label = new TagBuilder("label");label.InnerHtml.Append(Label ?? For.Name);var input = new TagBuilder("input");input.AddCssClass(表单控件");input.Attributes["type"] = "text";input.Attributes[id"] = For.Name.Replace(.", _");input.Attributes[name"] = For.Name;input.Attributes[value"] = For.Model.ToString();output.Content.AppendHtml(label);output.Content.AppendHtml(input);}}}现在，在 Pages/FormHandler.cshtml 中，而不是这样:
<label>供应商</label><输入类=表单控件"asp-for=Product.Supplier.Name"/>您可以使用以下内容:
谢谢亚当！
The book Pro ASP.NET Core 3 has the the following code in its example for chapter 27:
<div class="m-2">
<h5 class="bg-primary text-white text-center p-2">HTML Form</h5>
<form asp-page="FormHandler" method="post" id="htmlform">
<div class="form-group">
<label>Name</label>
<input class="form-control" asp-for="Product.Name" />
</div>
<div class="form-group">
<label>Price</label>
<input class="form-control" asp-for="Product.Price" />
</div>
<div class="form-group">
<label>Category</label>
<input class="form-control" asp-for="Product.Category.Name" />
</div>
<div class="form-group">
<label>Supplier</label>
<input class="form-control" asp-for="Product.Supplier.Name" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<button form="htmlform" asp-page="FormHandler" class="btn btn-primary mt-2">
Sumit (Outside Form)
</button>
</div>
As you can see, the <div class="form-group>...</div> pattern is repeated four times. As a test of partials, I added the file Pages\_FormGroupPartial.cshtml:
@model FormGroupParams
<div class="form-group">
<label>@Model.LabelContent</label>
<input class="form-control" asp-for="@Model.ForString" />
</div>
In Pages\FormHandler.cshtml.cs I added the following class:
public class FormGroupParams
{
public string LabelContent;
public string ForString;
public FormGroupParams(string labelContent, string forString)
{
LabelContent = labelContent;
ForString = forString;
}
}
To test this out, I edited Pages\FormHandler.cshtml to use the new partial right after the original approach:
<div class="form-group">
<label>Supplier</label>
<input class="form-control" asp-for="Product.Supplier.Name" />
</div>
<partial name="_FormGroupPartial" model='new FormGroupParams("Supplier", "Product.Supplier.Name")' />
In the resulting page, we see that the partial did not quite generate the same code; note that the value is now Product.Supplier.Name instead of the expected Splash Dudes:
Looking at the source, we see that the original code:
<div class="form-group">
<label>Supplier</label>
<input class="form-control" asp-for="Product.Supplier.Name" />
</div>
expanded into:
<div class="form-group">
<label>Supplier</label>
<input class="form-control" type="text" id="Product_Supplier_Name" name="Product.Supplier.Name" value="Splash Dudes" />
</div>
Whereas our partial:
<partial name="_FormGroupPartial" model='new FormGroupParams("Supplier", "Product.Supplier.Name")' />
expanded into:
<div class="form-group">
<label>Supplier</label>
<input class="form-control" type="text" id="ForString" name="ForString" value="Product.Supplier.Name" />
</div>
Is there a good way to implement this partial so as to get the same output as the original code?
UPDATE 2020-09-30
PeterG suggests the following in his answer below:
<partial name="_FormGroupPartial" model='new FormGroupParams("Supplier", @Model.Product.Supplier.Name)' />
This expands into the following:
<div class="form-group">
<label>Supplier</label>
<input class="form-control" type="text" id="ForString" name="ForString" value="Splash Dudes" />
</div>
whereas the goal is the following:
<div class="form-group">
<label>Supplier</label>
<input class="form-control" type="text" id="Product_Supplier_Name" name="Product.Supplier.Name" value="Splash Dudes" />
</div>
So the value is now correct. But the id and name are still off.
The author of the book, Adam Freeman, has provided an example to me via email which demonstrates solving this using a tag helper.
Add the file TagHelpers/FormGroupTagHelper.cs:
using Microsoft.AspNetCore.Razor.TagHelpers;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
namespace WebApp.TagHelpers
{
[HtmlTargetElement("form-group")]
public class FormGroupTagHelper : TagHelper
{
public string Label { get; set; }
public ModelExpression For { get; set; }
public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.TagName = "div";
output.TagMode = TagMode.StartTagAndEndTag;
output.Attributes.SetAttribute("class", "form-group");
var label = new TagBuilder("label");
label.InnerHtml.Append(Label ?? For.Name);
var input = new TagBuilder("input");
input.AddCssClass("form-control");
input.Attributes["type"] = "text";
input.Attributes["id"] = For.Name.Replace(".", "_");
input.Attributes["name"] = For.Name;
input.Attributes["value"] = For.Model.ToString();
output.Content.AppendHtml(label);
output.Content.AppendHtml(input);
}
}
}
Now, in Pages/FormHandler.cshtml instead of this:
<div class="form-group">
<label>Supplier</label>
<input class="form-control" asp-for="Product.Supplier.Name" />
</div>
you can use the following:
<form-group label="Supplier" for="Product.Supplier.Name"/>
Thanks Adam!
这篇关于扩展为输入标签助手的部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
