0

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

tickwave
  • 3,335
  • 6
  • 41
  • 82
  • 1
    There 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 Answers2

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