Net Framework, Office 365, C#, WPF, ASP.Net, Visual Studio, Programmiersprachen PC, C# Programmieren, vba, SQL Server, free source code snippets Antivirus free
#

Asp MVC: Großes Textfeld Input,  Textarea , Div mit HTML

 

Input Textfelder

In einem Asp Core MVC Eingabe Formular kann man Text-Eingabefelder nicht einfach als Mehrzeilig umschalten.

 

Textarea-Eingabefelder

Man muss größere Textfelder nur nurch Textarea definieren. Textarea Eingabefelder stellen ein mehrzeiliges Text-Eingabefeld dar.Die Höhe des mehrzeiligen Textarea-Eingabefeldes wird durch @rows festgelegt.

Wenn man in ein Textarea-Feld ein HTML Text eingeben möchte, dann wird dieser zu sichtbaerem Text umgewandelt.

 

Div-Eingabefelder

Alternativ kann man ein Div Eingabefeld einführen, welches als Attibut contenteditable=true aufweist.

Bei Div-Eingabefelder mit aktiviertem contenteditable kann man den inneren Bereich im Div frei beschreiben und bearbeiten zur Laufzeit.

Wenn man Html einfügt, dann wird dieser auch als HTML angezeigt.

Leider kommt ein Div-Bereich nicht direkt als Postback Wert zurück. Man muss den Textinhalt vor dem Zurücksenden per jquery in ein hidden-Feld kopieren.

 

Eingabefelder in Asp.Net Core MVC

1)Asp Core Text
<
input asp-for="Text1" class="form-control" />


2)Asp MVC

@Html.TextAreaFor(model => model.Text2, new { @class = "form-control", @rows = 4 })


3)Asp HTML

<div contenteditable="true" style="height:200px;overflow:auto;" >@Model.Text3</div>

 

Asp.Net Core MVC: Text, TextArea und Div

 

Unterschiede

Die Unterschiede werden dann deutlich, wenn man HTML in die Eingabebereich einfügt

Bei input asp-for oder Type=Text wird nur eine Zeile dargestellt

Bei TextArea wird der Inhalt eingefügt aber als Text

Und bei Div wird der HTML Text so dargestellt wie HTML üblich

 

Asp Core MVC Texteingabefelder mit HTML Eingabe

 

Razor Code für Texteingabefelder

Zum Beispiel.

1. Input Text

Text1 As Asp-Tag-Helper: input asp-for="Text1" class="form-control"

<input asp-for="Text1" class="form-control" />

 

2. TextArea

Text2 As TextAreaFor MVC Row3 model.Text2

@Html.TextAreaFor(model => model.Text2, new { @class = "form-control", @rows = 4 })

 

3. Div Eingabebereich

Text3 As Div Contentreadable Model.Text3

<div contenteditable="true" id="Text3" name="Text3" style="height:200px;overflow:auto;" >

    @Model.Text3

</div>

 

 

 

Kompletter Code

<br />

Text1 As Asp-Tag-Helper: input asp-for="Text1" class="form-control"

<input asp-for="Text1" class="form-control" />

 

<br />

Text2 As TextAreaFor MVC Row3 model.Text2

@Html.TextAreaFor(model => model.Text2, new { @class = "form-control", @rows = 4 })

 

 

<br />

Text3 As Div Contentreadable Model.Text3

<div contenteditable="true" id="Text3" name="Text3" style="height:200px;overflow:auto;" >

    @Model.Text3

</div>

 

 

 

Mobile
»
Asp.Net Core MVC: Formular Feldwerte ohne Model ermitteln
»
Asp MVC: Großes Textfeld Input, Textarea , Div mit HTML
»
Asp Core Mvc: Beispiel eines Create Formular
»
Asp Core: Eingabefeld ausblenden, ID Feld verstecken

.

Jobs, Projekte, Angebote für Freiberufler, Selbstständig an Raimund.Popp@Microsoft-Programmierer.de