ASP.NET MVC3 - textarea dengan @ Html.EditorFor

209

Saya memiliki aplikasi ASP.NET MVC3 dan saya juga memiliki formulir untuk menambahkan berita. Ketika VS2010 membuat tampilan default, saya hanya memiliki input teks untuk data string, tetapi saya ingin memiliki textarea untuk teks berita. Bagaimana saya bisa melakukannya dengan sintaks Razor.

Input teks terlihat seperti ini:

@Html.EditorFor(model => model.Text)
Yakub Jedryszek
sumber
Terkait, lihat jawaban ini untuk pertanyaan lain tentang cara mengkustomisasi EditorTemplate itu.
Jeroen

Jawaban:

375

Anda bisa menggunakan [DataType]atribut pada model tampilan Anda seperti ini:

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

dan kemudian Anda bisa memiliki controller:

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

dan tampilan yang melakukan apa yang Anda inginkan:

@model AppName.Models.MyViewModel
@using (Html.BeginForm())
{
    @Html.EditorFor(x => x.Text)
    <input type="submit" value="OK" />
}
Darin Dimitrov
sumber
7
Cukup banyak apa yang saya cari, tetapi bagaimana jika saya perlu menentukan atribut html baris dan cols?
Jason
3
Saya masih mendapatkan [class = "text-box single-line"] di kode sumber :(
Stavros
7
Sangat berpengetahuan dan tetap menjaganya sesederhana mungkin dan menjelaskan semuanya langkah demi langkah. salam @Darin Dimitrov.
İsmet Alkan
@Jason menggunakan CSS untuk penataan.
Jo Smo
DataAnnotationsftw! Terima kasih.
Kon
136

Seseorang bertanya tentang menambahkan atribut (khususnya, 'baris' dan 'cols'). Jika Anda menggunakan Razor, Anda bisa melakukan ini:

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

Itu bekerja untuk saya. '@' Digunakan untuk keluar dari kata kunci sehingga diperlakukan sebagai variabel / properti.

Tyson Phalp
sumber
Memang - jika Anda tahu Anda menginginkan area teks dengan cols / rows, ada sedikit alasan untuk menggunakan EditorFor daripada TextAreaFor. Adakah yang punya alasan Anda masih perlu menggunakan EditorFor dan tahu Anda harus menentukan cols / rows?
James Haug
95
@Html.TextAreaFor(model => model.Text)
addy
sumber
6
Saya suka metode ini lebih baik karena jawaban populer di sini melibatkan memodifikasi model database, yang berarti Anda harus membuang dan membuat ulang database yang mendasarinya jika menggunakan EntityFramework.
Ciaran Gallagher
6
Anotasi DataType itu tidak memaksa penyegaran di Entity Framework.
Tallmaris
9
@Ciaran: Pernyataan ini harus membunyikan lonceng. Seharusnya tidak perlu mengubah lapisan database untuk memodifikasi UI. Harus ada objek presentasi, yang merupakan mapper ke objek database. Jangan pernah gunakan objek basis data di UI Anda.
Frederik Prijck
5
Untuk lebih jelasnya, apa yang dirujuk oleh Frederik adalah membuat kelas yang mewakili data tampilan Anda TERPISAH dari kelas yang digunakan dalam DbContext Anda. Jangan meneruskan model DbContext Anda ke tampilan. Buat kelas model tampilan, lalu pindahkan info yang Anda pedulikan dari model db ke model tampilan, dan sebaliknya saat menerima input.
Jim Yarbro
3
@ FrederikPrijck Saya tidak setuju, tapi bukankah itu melanggar prinsip DRY? Anda harus menyalin semua properti dari satu kelas ke kelas lain. Adakah yang kurang "biasa" dalam melakukannya, yang telah Anda temukan?
James Haug
1

Nyatakan dalam Model Anda dengan

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

Kemudian dalam .cshtml dapat menggunakan editor seperti di bawah ini. Anda dapat menggunakan @ col dan @ baris untuk ukuran TextArea

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

Terima kasih!

Abdul Hadee
sumber