ASP.NET MVC3 - textarea with @Html.EditorFor

Question

I have ASP.NET MVC3 app and I have also form for add news. When VS2010 created default view I have only text inputs for string data, but I want to have textarea for news text. How I can do it with Razor syntax.

Text input look like this:

@Html.EditorFor(model => model.Text)

Related, see [this answer](http://stackoverflow.com/a/10696647/419956) to another question about how to customize that EditorTemplate. — Jeroen, Feb 22 '15 at 14:04

score 383 · Accepted Answer · edited Dec 17 '13 at 17:09

383

You could use the [DataType] attribute on your view model like this:

public class MyViewModel
{
    [DataType(DataType.MultilineText)]
    public string Text { get; set; }
}

and then you could have a controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }
}

and a view which does what you want:

@model AppName.Models.MyViewModel
@using (Html.BeginForm())
{
    @Html.EditorFor(x => x.Text)
    <input type="submit" value="OK" />
}

edited Dec 17 '13 at 17:09

Tallmaris

7,605
3
28
58

answered Feb 07 '11 at 21:49

Darin Dimitrov

1,023,142
271
3,287
2,928

7

Pretty much what I was looking for, but what if I need to specify the rows and cols html attributes? – Jason Feb 10 '11 at 02:51
3

I am still getting [class="text-box single-line"] at the source code :( – Stavros Mar 21 '11 at 11:41
7

Extremely knowledgeable and still keeping it as simple as it gets and explains everything step by step. hail @Darin Dimitrov. – İsmet Alkan Apr 04 '13 at 05:21
@Jason use CSS for styling. – Jo Smo Dec 01 '15 at 17:09

Tyson Phalp · Answer 2 · 2014-02-11T17:47:13.443

139

Someone asked about adding attributes (specifically, 'rows' and 'cols'). If you're using Razor, you could just do this:

@Html.TextAreaFor(model => model.Text, new { cols = 35, @rows = 3 })

That works for me. The '@' is used to escape keywords so they are treated as variables/properties.

edited Feb 11 '14 at 17:47

answered Mar 08 '12 at 21:36

Tyson Phalp

2,737
3
20
12

Indeed - if you know your want a text area with cols/rows, there is little reason to use EditorFor instead of TextAreaFor. Anyone have a reason you'd still need to use EditorFor and know you need to specify cols/rows? – James Haug Oct 26 '16 at 17:50

score 98 · Answer 3 · edited Dec 14 '11 at 20:05

98

@Html.TextAreaFor(model => model.Text)

edited Dec 14 '11 at 20:05

animuson

53,861
28
137
147

answered Aug 09 '11 at 11:09

addy

1,215
1
9
11

6

I like this method better because the popular answer here involves modifying the database model, which means you have to drop and recreate the underlying database if using EntityFramework. – Ciaran Gallagher Mar 28 '13 at 18:13
6

That DataType Annotation does not force a refresh in Entity Framework. – Tallmaris Dec 17 '13 at 17:09
10

@Ciaran: This statement should ring a bell. There should never be any need to change the database layer to modify the UI. There should be a presentation object, which is mapper to the database object. Never use the database object in ur UI. – Frederik Prijck Jul 08 '14 at 07:55
5

To be clear, what Frederik is referring to is creating classes that represent your view data SEPARATE from classes that are used in your DbContext. Don't pass your DbContext models into views. Create a view model class, then shift the info you care about from the db model into the view model, and vice versa when accepting inputs. – Jim Yarbro Jul 20 '14 at 19:26
3

@FrederikPrijck I don't disagree, but doesn't that violate the DRY principal? You have to copy all the properties from one class to another class. Is there a less "mundane" of doing it, that you have found? – James Haug Oct 26 '16 at 17:52
@JamesHaug The cons of this duplication are outweighed by its pros. If mapping is your concern, there are tools like AutoMapper that can help. – OJ Raqueño Oct 27 '20 at 01:22

score 4 · Answer 4 · answered Apr 03 '20 at 08:26

Declare in your Model with

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

Then in .cshtml can make use of editor as below. you can make use of @cols and @rows for TextArea size

     @Html.EditorFor(model => model.urString, new { htmlAttributes = new { @class = "",@cols = 35, @rows = 3 } })

Thanks !

ASP.NET MVC3 - textarea with @Html.EditorFor

4 Answers4

Linked