Render span tag with title attribute with ASP.NET MVC 3 Helpers

Question

It's possible to add a HTML title attribute to an input tag like so:

@Html.TextBoxFor(model => model.Name, new { title = "Customer name" })

Is there a similar helper for static text? With @Html.DisplayFor(model => model.Name) I can render the text from a model property. How can I add HTML attributes so that I get a span tag rendered like this:

<span title="Customer name">ABC</span>

This question's explicitly tagged "MVC **3**", but note that for version 4 (razor 2) and up you can just get away with doing e.g. `@Model.Name` — Jeroen, Feb 24 '15 at 21:17

Necros · Accepted Answer · 2013-08-07T14:54:09.207

45

Custom html helper is probably the neatest solution.

public static MvcHtmlString SpanFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes = null)
{
    var valueGetter = expression.Compile();
    var value = valueGetter(helper.ViewData.Model);

    var span = new TagBuilder("span");
    span.MergeAttributes(new RouteValueDictionary(htmlAttributes));
    if (value != null)
    {
        span.SetInnerText(value.ToString());
    }

    return MvcHtmlString.Create(span.ToString());
}

=>

@Html.SpanFor(model => model.Name, new { title = "Customer name" })

edited Aug 07 '13 at 14:54

answered May 14 '11 at 12:08

Necros

3,004
23
29

That works great! I only had to catch that `value` can be `null` (`if (value != null)` before `span.SetInnerText(value.ToString());` Thank you very much! – Slauma May 14 '11 at 13:58
data binded to this spanfor is not available during httpPost... Any update for that – tanuj shrivastava Jul 18 '16 at 10:11
I had issues with this for data attributes, you need to wrap htmlAttributes with HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes) otherwise it doesn't replace _ with - like other objects. – Jay Jan 23 '17 at 15:18

score 5 · Answer 2 · answered May 14 '11 at 11:49

5

<span title="Customer name">@Model.Name</span>

answered May 14 '11 at 11:49

Kris Ivanov

10,476
1
24
35

or `@Html.DisplayTextFor(m => m.Name)` if `Name` can be `null` – Kris Ivanov May 14 '11 at 11:52
So, is there no built-in helper which could create this span tag? – Slauma May 14 '11 at 13:03

score 2 · Answer 3 · answered Feb 24 '17 at 10:30

2

If you are using @HTML.DisplayFor(model=>model.CustomerName) It will render as text, It will not shows any tag inside the values.

If you want to bind the "DisplayFor" using span , Use the below tag,

<span id="CustomerName">@Html.DisplayFor(model=>model.CustomerName)</span>

answered Feb 24 '17 at 10:30

Ramesh P

81
4

This solution allowed me to continue to use the display template for my datetime value that @Html.DisplayFor uses as well as add a title to the span. – Mark Libner May 14 '19 at 13:26

score 0 · Answer 4 · answered Sep 01 '20 at 04:43

Ugly, but works ;-) (required field, without rendering .EditorFor content get lost during submit, even HTML comment around does not work, tested on System.Web.Mvc 5.0.0.0)

<b style="display:none">@Html.EditorFor(model => model.UserName)</b>
<input name="UserName" disabled readonly value=@Html.DisplayTextFor(model => model.UserName)>

Original looked like:

<input class="text-box single-line" data-val="true" data-val-required="The User Name field is required." id="UserName" name="UserName" type="text" value="Hate Razor !">

score -1 · Answer 5 · edited May 25 '18 at 13:07

-1

You use the below

<span title="Customer name">@Html.DisplayTextFor(m => m.CustomerName)</span>

edited May 25 '18 at 13:07

Irvin Dominin

30,819
9
77
111

answered May 14 '11 at 12:21

devson

990
8
22

2

This doesn't create a span tag. – Slauma May 14 '11 at 13:05

Render span tag with title attribute with ASP.NET MVC 3 Helpers

5 Answers5

Linked