MVC中是否存在可渲染带name属性的属性值的HTML Helper？

嘿，这个问题我刚好碰到过！你想要的是能渲染出带name属性的元素，这样表单提交时能把值传回服务器对吧？毕竟@Html.DisplayFor()只是输出纯文本，不会生成带name的表单控件，自然没法提交数据。给你几个实用的解决方案：

方案1：隐藏域+显示文本（最推荐） #

这种方式完美兼顾“显示文本”和“提交数据”的需求——用HiddenFor生成带name的隐藏输入框存值，同时用DisplayFor显示文本：

<td>
    <div>@Html.DisplayFor(x => x.FileName)</div>
    @Html.HiddenFor(x => x.FileName)
</td>

生成的HTML会是这样：

<td>
    <div>Hello World</div>
    <input type="hidden" name="FileName" id="FileName" value="Hello World">
</td>

页面上用户看到的是正常文本，表单提交时隐藏域的值会自动被提交到服务器，完全不需要额外处理。

方案2：只读文本框（视觉上接近纯文本） #

如果你希望元素看起来像纯文本，但本质是表单控件，可以用TextBoxFor并设置只读属性，配合样式让它更像普通文本：

<td>
    @Html.TextBoxFor(x => x.FileName, new { @class = "form-control-plaintext", @readonly = "readonly" })
</td>

生成的HTML：

<td>
    <input type="text" name="FileName" id="FileName" value="Hello World" class="form-control-plaintext" readonly="readonly">
</td>

Bootstrap的form-control-plaintext类会让输入框去掉边框和背景，看起来和纯文本几乎一样，同时它作为表单控件，提交时会自动带上值。

方案3：自定义HTML Helper（特殊场景用） #

如果你一定要生成带name的<div>，可以自定义一个Helper方法，但要注意：div不是表单控件，默认表单提交不会包含它的值，需要额外用JS处理提交逻辑。

首先创建一个静态Helper类：

public static class CustomHtmlHelpers
{
    public static MvcHtmlString DisplayWithNameFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression)
    {
        var metadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData);
        var fieldName = html.NameFor(expression).ToString();
        var fieldValue = metadata.Model?.ToString() ?? string.Empty;

        var div = new TagBuilder("div");
        div.Attributes.Add("name", fieldName);
        div.InnerHtml = fieldValue;

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

然后在视图中使用：

<td>
    @Html.DisplayWithNameFor(x => x.FileName)
</td>

生成的HTML就是你想要的：

<td><div name="FileName">Hello World</div></td>

注意事项 #

因为div不是表单控件，服务器默认拿不到它的值，所以需要在表单提交前用JS把div的内容存入隐藏域，比如：

document.querySelector('form').addEventListener('submit', function(e) {
    var fileNameDiv = document.querySelector('div[name="FileName"]');
    var hiddenInput = document.createElement('input');
    hiddenInput.type = 'hidden';
    hiddenInput.name = 'FileName';
    hiddenInput.value = fileNameDiv.textContent;
    this.appendChild(hiddenInput);
});

内容的提问来源于stack exchange，提问作者japes Sophey