In vanilla HTML Helpers, I usually use <div>@Model.Name</div>
to print Name
property, is there similar function for Tag Helpers?
Asked
Active
Viewed 265 times
0

tickwave
- 3,335
- 6
- 41
- 82
-
1There isn't a tag helper that will create a div. You could use `Label` or `LabelFor` but that won't create that same HTML. You can create your own tag helpers though, if that's something you want to do regularly. – jmcilhinney Jun 10 '18 at 09:20
-
Use extension methods from [System.Web.Mvc.Html](https://learn.microsoft.com/en-us/previous-versions/aspnet/web-frameworks/dd493063(v%3dvs.118)) static classes. Also it is possible to create an [custom helper](https://learn.microsoft.com/en-us/aspnet/mvc/overview/older-versions-1/views/creating-custom-html-helpers-cs) method. – Alexander Jun 10 '18 at 09:59
2 Answers
1
As I said in my comment, there isn't a standard tag helper that generates a div (or there wasn't last time I looked, anyway). Here's an example of a tag helper that we wrote in my office to generate a div:
[HtmlTargetElement("div", Attributes = FOR_ATTRIBUTE_NAME)]
public class DivTagHelper : TagHelper
{
private const string FOR_ATTRIBUTE_NAME = "si-for";
/// <summary>
/// Creates a new <see cref="DivTagHelper"/>.
/// </summary>
/// <param name="generator">The <see cref="IHtmlGenerator"/>.</param>
public DivTagHelper(IHtmlGenerator generator)
{
Generator = generator;
}
[HtmlAttributeNotBound]
[ViewContext]
public ViewContext ViewContext { get; set; }
protected IHtmlGenerator Generator { get; }
/// <summary>
/// An expression to be evaluated against the current model.
/// </summary>
[HtmlAttributeName(FOR_ATTRIBUTE_NAME)]
public ModelExpression For { get; set; }
/// <inheritdoc />
/// <remarks>Does nothing if <see cref="For"/> is <c>null</c>.</remarks>
public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
{
var childContent = output.Content.IsModified ? output.Content.GetContent() :
(await output.GetChildContentAsync()).GetContent();
if (context == null)
{
throw new ArgumentNullException(nameof(context));
}
if (output == null)
{
throw new ArgumentNullException(nameof(output));
}
output.TagName = "div";
string content;
if (For.Metadata.UnderlyingOrModelType == typeof(bool))
{
content = ((bool?) For.Model).ToYesNo();
}
else
{
var displayFormatString = For.ModelExplorer.Metadata.DisplayFormatString;
content = string.IsNullOrEmpty(displayFormatString)
? For.Model?.ToString()
: string.Format(displayFormatString, For.Model);
}
// Honour the model's specified format if there is one.
output.Content.SetContent(content);
output.PostContent.SetHtmlContent(childContent);
}
}
Here's a usage sample:
<li class="TypeFile">
<si-label si-for="FileSize"></si-label>
<div si-for="FileSize" id="FileSize" class="ReadOnlyValue"></div>
<input class="subForm" asp-for="FileSizeInBytes" />
</li>
Note that the "si" prefixes are our company initials to ensure no ambiguity with existing attributes.
Here's an output sample:
<li class="TypeFile">
<label for="FileSize">File Size:</label>
<div id="FileSize" class="ReadOnlyValue">13.700KB</div>
<input class="subForm" type="hidden" id="FileSizeInBytes" name="FileSizeInBytes" value="14029" />
</li>

jmcilhinney
- 50,448
- 5
- 26
- 46
0
You can use the standart construction for your task:
<input asp-for="Name" class="form-control" />
-
But won't that generate a text box or hidden field or the like rather than a div? I think it depends on whether the model property is hidden via attribute but it will still be an input tag rather than a div. – jmcilhinney Jun 10 '18 at 09:34
-
@jmcilhinney, no, wiill be generated input with few attributes. Check this documentation: https://learn.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/intro?view=aspnetcore-2.1 – Jun 10 '18 at 09:39
-
So I ask whether it will be an input tag and you say "no, it will be an input tag". The OP wants a div tag, not an input tag. That's the problem. There is no `asp-for` tag helper for the div tag. – jmcilhinney Jun 10 '18 at 09:44
-
For display value from model Name field - use @Model.Name or use specific view-model. – Jun 10 '18 at 10:03