Freelance Project Requests info@CodeDocu.de Software Development in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

Asp MVC: Large text box Input, Textarea, Div with HTML

 

Input text fields

In an Asp Core MVC input form you can not simply switch text input fields as multi-line.

 

Textarea fields

You only have to define larger text fields by Textarea. Textarea input fields represent a multiline text input field. The height of the multiline textarea input field is defined by @rows.

If you want to enter an HTML text in a textarea field, it will be converted to visible text.

 

Div-fields

Alternatively, you can introduce a Div input field, which has attibut contenteditable = true.

For div input fields with contenteditable enabled, you can freely describe the inner area in the div and edit it at runtime.

If you insert html, then this will also be displayed as HTML.

Unfortunately, a div range does not come back directly as a postback value. You have to copy the text content via jquery into a hidden field before sending it back.

 

Input fields 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 and Div

 

differences

The differences become clear when you insert HTML in the input area

With input asp-for or Type = Text, only one line is displayed

TextArea inserts the content but as text

And at Div the HTML text is rendered as HTML usual

 

Asp Core MVC text input fields with HTML input

 

Razor code for text input fields

For example.

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 input area

Text3 As Div Contentreadable Model.Text3

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

    @Model.Text3

</div>

 

 

 

Complete 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: Form Get field values without model
»
Asp MVC: Large text box Input, Textarea, Div with HTML
»
Asp Core Mvc: Example of a Create Form
»
Asp Core: hide input field, hide ID field

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de