MVC C# 网站应用程序中使用的文本区域中的换行符

问题描述 投票:0回答:10

我在 Visual Studio Web Dev 中使用 ASP.net MVC C#。我有几个文本区域,其中填充了数据,然后更新为数据库记录。

记录更新到数据库时是否可以保存换行符?我目前在主页上查看数据,但目前如果有人写了几个段落(包括换行符),格式就会丢失。

如果这不可能,也没有问题,但只是想问一下是否可以。谢谢。

查看页面的代码如下所示:

<div class="editor-field">
        @Html.TextAreaFor(model => model.para1, new { cols = 75, @rows = 5 })
        @Html.ValidationMessageFor(model => model.para1)
</div>

然后我有一个提交表单的按钮。

处理提交的控制器代码如下所示:

[HttpPost]
    public ActionResult Update(Data data)
    {
        if (ModelState.IsValid)
        {
            data.ID = 1; //EF need to know which row to update in the database.
            db.Entry(data).State = EntityState.Modified;
            db.SaveChanges();
            return RedirectToAction("Index", "Home");
        }
        return View(data);
    }

数据库的模型代码如下所示:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;
using System.ComponentModel.DataAnnotations;

namespace DFAccountancy.Models
{
    public class Data
    {
        [DataType(DataType.MultilineText)]
        public int ID { get; set; }
        public string para1 { get; set; }
        public string para2 { get; set; }
    }

    public class DataDBContext : DbContext
    {
        public DbSet<Data> Data { get; set; }
    }
}

==============================================

主页代码

@model IEnumerable<DFAccountancy.Models.Data>

@{
    ViewBag.Title = "Index";
}

<h2>
    DF Accountancy
</h2>
<div>

<fieldset>
<legend>About us</legend>

@foreach (data in Model)
{

<table>
    <tr>
        <td rowspan="2" width="50%">
            <b>
                Suspendisse lectus massa, feugiat at cursus ac, sollicitudin a metus.     Quisque adipiscing commodo sem vitae eleifend. 
            Maecenas ante risus, hendrerit ac tempor et, feugiat eu sapien. Sed sem massa, sodales a varius sit amet, porta in 
            turpis. Duis ullamcorper magna sed risus lobortis luctus. Quisque volutpat enim ut erat tristique sit amet posuere 
            sem ullamcorper. Nulla consequat lectus in sapien sagittis cursus. Quisque elit augue, luctus sed semper non, fringilla 
            sed quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vitae 
            augue quis nisi tincidunt ullamcorper. Duis posuere ultricies turpis at dictum. Vivamus at odio eros. Nunc orci 
            lectus, ornare non tincidunt sed, venenatis id lorem. Nulla ullamcorper, leo quis pellentesque sollicitudin, dui 
            libero vehicula lectus, lobortis consequat orci dui in augue. Ut gravida enim convallis sem luctus sit amet eleifend 
            lorem malesuada. Suspendisse in augue diam, eu laoreet diam.
            </b>
            </td>
            <td>
                <div class="display-field">
                    @Html.Raw(data.para1.Replace(Environment.NewLine, "<br/>"))
                </div>
            </td>
        </tr>
        <tr>    
            <td>
                <div class="display-field">
                    @Html.Raw(data.para2.Replace(Environment.NewLine, "<br/>"))
                </div>
            </td>
        </tr>
</table>
}

        </fieldset>
</div>

============================================

完整的更新视图页面代码

@model DFAccountancy.Models.Data

@{
    ViewBag.Title = "Update";
    }



<h2>Update</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript">    </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<script type="text/javascript">
    $(function () { $("#cl_button1").click(function () { $("#para1").val(""); }); });
    $(function () { $("#cl_button2").click(function () { $("#para2").val(""); }); });
</script>

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
    <legend>Data</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.para1)
    </div>
    <div class="editor-field">
        @Html.TextAreaFor(model => model.para1, new { cols = 75, @rows = 5 })
        @Html.ValidationMessageFor(model => model.para1)
        <input id="cl_button1" type="button" value="Clear Paragraph" />
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.para2)
    </div>
    <div class="editor-field">
        @Html.TextAreaFor(model => model.para2, new { cols = 75, @rows = 5 })
        @Html.ValidationMessageFor(model => model.para2)
        <input id="cl_button2" type="button" value="Clear Paragraph" />
    </div>



    <p>
        <input type="submit" value="Update" />
        <input type="reset" value="Re-Set to begining" />
    </p>

</fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>
c# asp.net-mvc textarea line-breaks
10个回答
45
投票

将字段显示为 html 时,它将不包含换行符,因为换行符在 html 标记中被视为空格。您可以将它们替换为

<br/>
。它看起来像这样:

<div class="display-field">
   @Html.Raw(Model.para1.Replace(Environment.NewLine, "<br/>"))
</div>

或者您可以将其显示为预格式化文本,这将保留空白:

<div class="display-field">
    <pre>
        @Model.para1
    </pre>
</div>

更新 如果您的型号是

IEnumerable<T>

@foreach (var data in Model)
{
    <div class="display-field">
       @Html.Raw(data.para1.Replace(Environment.NewLine, "<br/>"))
    </div>
}

@foreach (var data in Model)
{
    <div class="display-field">
        <pre>
            @data.para1
        </pre>
    </div>
}

9
投票

根本不要操纵数据。当你展示它时,只需将它包裹起来

示例:

<pre>@Model.Data</pre>

这将保留回车符


6
投票

这就是我最终所做的,我认为它与

<pre>
标签基本相同,但没有丑陋的引导格式(即边框、灰白色背景色、奇怪的字体样式等)

CSS:

.multi-line{
   white-space: pre-wrap;
}

查看:

<div class="multi-line">@Html.DisplayFor(model => model.Description)</div>
<div class="multi-line">@data.para</div>

确保 div 元素和 html 帮助器之间没有空格,否则这些也会像上面答案中其他人提到的那样显示,并带有

<pre>
标签。


4
投票

Pre 工作正常,但需要一些“奇怪”的格式。

    <pre>
        @data.para1
    </pre>

这种工作方式,除了它在@前面将第一行缩进8个空格(乍一看可能不是右对齐的)

    <pre>
@data.para1
    </pre>

这效果很好,但仍然有一些杂散回报。

<pre>@data.para1</pre>

这似乎恰到好处


3
投票

我不知道保存数据是否重要 - 我假设它只是用于选择成员的可视化,但尝试将 MultiLineText 属性移动到字符串字段:

public class Data
{
    public int ID { get; set; }
    [DataType(DataType.MultilineText)]
    public string para1 { get; set; }
    [DataType(DataType.MultilineText)]
    public string para2 { get; set; }
}

3
投票

文本框中的换行符是

CrLf
,因此下次它们似乎消失时,内容不会填充到文本框中。但是,如果您查看 HTML 源代码,您会发现它们存在。

但是因为换行符不等于

<br/>
,所以会有点混乱。

所以人们正在做的是将

CrLf
替换为 HTML BR,如下所示:

string ContentToDatabase = input.replace(Environment.NewLine, "<br/>")

如果您再次在文本区域中打开相同的内容,您将看到

<br/>
而不是换行符,因此您必须将其转换回来。

string contentToEdit = fromDatabase.replace("<br/>",Environment.NewLine)

0
投票

您的问题可能不在文本区域。当在主页上显示输入时,您是否在 pre 标记内执行此操作?如果没有,换行符和格式将被忽略。


0
投票

我遇到了类似的情况,需要能够从 MVC3 和文本区域将整篇文章添加到数据库中。有很多方法可以解决这个问题,但我发现的最简单的方法是关闭 ValidateInput(如果您向公众开放,请不要这样做......这可能会导致跨站点脚本和各种讨厌的,请确保验证用户)。

    [HttpPost]
    [AuthRole(Role = "Administrator")]  //Created Validataion so inaccessible from outside
    [ValidateInput(false)]      
    public ActionResult Update(Data data)       
    {       
        if (ModelState.IsValid)       
        {       
            data.ID = 1; //EF need to know which row to update in the database.       
            db.Entry(data).State = EntityState.Modified;       
            db.SaveChanges();       
            return RedirectToAction("Index", "Home");       
        }       
        return View(data);       
    }    

如果在数据中放置断点,您应该看到换行符 (' ') 在 VStudio 中。您可以用您想要的任何字符替换该特定字符(如果这不回发到 HTML,我建议使用 Environment.Newline)。

                data.dataString = dataString.Replace(@"\r\n", Environment.Newline);
                //Or change Newline to "<br />" if posting to HTML

0
投票
public class YourClass
{
    public int Id { get; set; }

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

@Html.TextAreaFor(m => m.paragraph, new { @class = "form-control", @rows = 5 })

0
投票

如果有人想要另一种方法,这里有一个对我有用的 css 解决方案。

添加 css 属性:

white-space: pre-line;

当您在视图中显示文本区域字段时,此样式将保留它们的换行符和空格。它比使用 @html.Raw() 操作输出更安全,因为它不会将内容解释为 HTML

© www.soinside.com 2019 - 2024. All rights reserved.