Question

我正在建立一个显示表格值的表格。其中一个字段来自textarea输入。

如果我使用此方法，则会保留空格：

@Html.TextAreaFor(model => model.goalDescr, new { cols="90", rows="3", @readonly = "true"})

- 例如：

哎

有

- 结束示例

但是，我不喜欢这种观点，因为它仍然看起来像一个表格字段。我尝试使用displayfor，但删除了空格，所有文本都是一行。

@Html.DisplayFor(model => model.goalDescr)

- 例如：

嘿那里

- 结束示例

有没有办法在我的视图中，在表单元素之外显示文本，并保持空白？

Answer 1

将您的数据库内容包装成pre tag

<pre>
 All whitespaces      and linebreaks
are preserved

</pre>

Answer 2

正如Steve B's answer所述，您可以使用<pre>来维护空格。

如果您不喜欢自动格式化<pre>，并希望保留继承的样式，只需使用<span>或<div> style="white-space:pre-wrap;"属性。我发现这是一个更优雅的解决方案。

Live demo

Answer 3

您可以编写一个自定义帮助程序，用\r\n标记替换新行（{{1}}）。

<br/>

然后：

public static class HtmlExtensions
{
    public static IHtmlString FormatValue(this HtmlHelper html, string value)
    {
        if (string.IsNullOrEmpty(value))
        {
            return MvcHtmlString.Empty;
        }
        value = string.Join(
            "<br/>", 
            value.Split(new[] { Environment.NewLine }, StringSplitOptions.None)
                 .Select(x => html.Encode(x))
        );
        return MvcHtmlString.Create(value);
    }
}

或换入@Html.FormatValue(Model.goalDescr)标记以保留新行：

<pre>

Answer 4

当您使用DisplayFor时，我的猜测是它正在渲染input type="text"而不是textarea，这就是它在一行中显示它的原因。

您可以使用[DataType(DataType.MultilineText)]来装饰您的模型：

[DataType(DataType.MultilineText)]
public string goalDescr { get; set; }

从数据库显示文本时保持空白

4 个答案: