sauts de ligne dans la zone de texte utilisée dans une application de site Web MVC C #
J'utilise ASP.net MVC C # dans Visual Studio Web Dev. J'ai quelques zones de texte qui sont remplies de données, puis mises à jour vers un enregistrement de base de données.
Est-il possible d'avoir des sauts de ligne enregistrés lorsqu'un enregistrement est mis à jour dans la base de données? Je vois actuellement les données sur la page d'accueil, mais pour le moment si quelqu'un écrit quelques paragraphes (y compris les sauts de ligne), le formatage sera perdu.
Si ce n'est pas possible, pas de problème, mais je voulais juste demander si c'est le cas. Merci.
Le code de la page Afficher ressemble à ceci:
<div class="editor-field">
@Html.TextAreaFor(model => model.para1, new { cols = 75, @rows = 5 })
@Html.ValidationMessageFor(model => model.para1)
</div>
J'ai ensuite un bouton qui soumet le formulaire.
Le code du contrôleur qui gère la soumission ressemble à ceci:
[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);
}
et le code modèle de la base de données ressemble à ceci:
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; }
}
}
============================================
le code de la page d'accueil
@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>
==========================================
Le code de page complet de la vue de mise à jour
@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>
Lors de l'affichage du champ en html, il n'inclura pas les sauts de ligne car ils sont traités comme des espaces dans le balisage html. Vous pouvez les remplacer par <br/>. Cela ressemblerait à quelque chose comme ceci:
<div class="display-field">
@Html.Raw(Model.para1.Replace(Environment.NewLine, "<br/>"))
</div>
Ou vous pouvez l'afficher sous forme de texte préformaté, ce qui préservera l'espace blanc:
<div class="display-field">
<pre>
@Model.para1
</pre>
</div>
Mise à jour Si votre modèle est IEnumerable<T>:
@foreach (var data in Model)
{
<div class="display-field">
@Html.Raw(data.para1.Replace(Environment.NewLine, "<br/>"))
</div>
}
ou
@foreach (var data in Model)
{
<div class="display-field">
<pre>
@data.para1
</pre>
</div>
}
Ne manipulez pas du tout les données. Lorsque vous l'affichez, enveloppez-le simplement dans <pre> </pre>
Exemple: <pre>@Model.Data</pre>
Cela préservera les retours chariot
Je ne sais pas si cela importe quand sauvegarde les données - je suppose que c'est juste utilisé pour choisir visualisation du membre, mais essayez de déplacer votre attribut MultiLineText vers les champs de chaîne :
public class Data
{
public int ID { get; set; }
[DataType(DataType.MultilineText)]
public string para1 { get; set; }
[DataType(DataType.MultilineText)]
public string para2 { get; set; }
}
Pré fonctionne bien, MAIS il faut un formatage "étrange".
<pre>
@data.para1
</pre>
Ce genre de travaux, Sauf qu'il met en retrait la première ligne par les 8 espaces devant le @ (pas justifié à droite car il pourrait apparaître en un coup d'œil)
<pre>
@data.para1
</pre>
Cela fonctionne bien, mais a toujours des retours parasites.
<pre>@data.para1</pre>
Cela semble être juste à droite.
Le saut de ligne à l'intérieur d'une zone de texte est CrLf donc le contenu n'est pas rempli dans une zone de texte la prochaine fois qu'il semble disparaître. Cependant, si vous regardez dans la source HTML, vous constaterez qu'ils existent.
Mais parce qu'un saut de ligne n'est pas égal à un <br/> ce sera un peu déroutant.
Donc, ce que les gens font, c'est de remplacer le CrLf en HTML BR comme ceci:
string ContentToDatabase = input.replace(Environment.NewLine, "<br/>")
Si vous ouvrez à nouveau le même contenu dans la zone de texte, vous verrez <br/> insteed de sauts de ligne, vous devez donc le reconvertir.
string contentToEdit = fromDatabase.replace("<br/>",Environment.NewLine)
Voici ce que j'ai fini par faire qui, je pense, est essentiellement le même que le <pre> tag mais sans le laid bootstrap (c.-à-d. bordure, couleur de fond blanc cassé, style de police étrange, etc.)
CSS:
.multi-line{
white-space: pre-wrap;
}
Vue:
<div class="multi-line">@Html.DisplayFor(model => model.Description)</div>
<div class="multi-line">@data.para</div>
Assurez-vous qu'il n'y a pas d'espaces entre votre élément div et votre assistant html ou ceux-ci apparaîtront également comme quelqu'un d'autre mentionné dans les réponses ci-dessus avec le <pre> tag.
J'ai rencontré une situation similaire avec cela, ayant besoin d'être en mesure d'ajouter un article entier dans une base de données à partir de MVC3 et de zones de texte. Il y a plusieurs façons de procéder, mais le plus simple que j'ai trouvé est de désactiver ValidateInput (ne le faites PAS si vous l'ouvrez au public ... cela pourrait provoquer des scripts intersites et toutes sortes de nasties, assurez-vous de valider les utilisateurs).
[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);
}
Si vous placez un point d'arrêt dans les données, vous devriez voir le caractère de la nouvelle ligne ('\ r\n') dans VStudio. Vous pouvez remplacer ce caractère particulier par ce que vous voulez (je suggère Environnement.Newline si ce n'est pas en train de revenir au HTML).
data.dataString = dataString.Replace(@"\r\n", Environment.Newline);
//Or change Newline to "<br />" if posting to HTML
Votre problème n'est probablement pas dans la zone de texte. Lorsque vous affichez l'entrée sur la page d'accueil, le faites-vous dans les balises pré? Sinon, les sauts de ligne et la mise en forme sont ignorés.
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 })