ASP.NET MVC3 - textarea ด้วย @ Html.EditorFor


209

ฉันมีแอพ ASP.NET MVC3 และฉันได้ฟอร์มสำหรับเพิ่มข่าวด้วย เมื่อ VS2010 สร้างมุมมองเริ่มต้นฉันมีเพียงอินพุตข้อความสำหรับข้อมูลสตริง แต่ฉันต้องการมี textarea สำหรับข้อความข่าว ฉันจะทำอย่างไรกับไวยากรณ์ของมีดโกน

การป้อนข้อความมีลักษณะดังนี้:

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

ที่เกี่ยวข้องดูคำตอบสำหรับคำถามอื่นเกี่ยวกับวิธีปรับแต่ง EditorTemplate นั้น
Jeroen

คำตอบ:


375

คุณสามารถใช้[DataType]แอตทริบิวต์ในโมเดลมุมมองของคุณดังนี้:

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

และจากนั้นคุณสามารถมีตัวควบคุม:

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

และมุมมองที่ทำในสิ่งที่คุณต้องการ:

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

7
ค่อนข้างจะเป็นสิ่งที่ฉันกำลังมองหา แต่ถ้าฉันต้องระบุแอตทริบิวต์ html ของแถวและคอลัมน์?
เจสัน

3
ฉันยังคงได้รับ [class = "text-box single-line"] ที่ซอร์สโค้ด :(
Stavros

7
มีความรู้อย่างมากและยังคงไว้ซึ่งความเรียบง่ายตามที่ได้รับและอธิบายทุกอย่างเป็นขั้นตอน สวัสดี @Darin Dimitrov
İsmet Alkan

@ Jason ใช้ CSS สำหรับการจัดแต่งทรงผม
Jo Smo

DataAnnotationsFTW! ขอบคุณ.
Kon

136

มีคนถามเกี่ยวกับการเพิ่มแอตทริบิวต์ (โดยเฉพาะ 'แถว' และ 'cols') หากคุณใช้มีดโกนคุณสามารถทำสิ่งนี้ได้:

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

ที่เหมาะกับฉัน '@' ใช้เพื่อหลีกเลี่ยงคำหลักเพื่อใช้เป็นตัวแปร / คุณสมบัติ


แน่นอน - ถ้าคุณรู้ว่าคุณต้องการพื้นที่ข้อความที่มีคอลัมน์ / แถวมีเหตุผลเพียงเล็กน้อยที่จะใช้ EditorFor แทน TextAreaFor ใครมีเหตุผลที่คุณยังต้องใช้ EditorFor และรู้ว่าคุณต้องระบุ cols / แถว?
James Haug

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

6
ฉันชอบวิธีนี้ดีกว่าเพราะคำตอบที่ได้รับความนิยมที่นี่เกี่ยวข้องกับการปรับเปลี่ยนรูปแบบฐานข้อมูลซึ่งหมายความว่าคุณจะต้องวางและสร้างฐานข้อมูลพื้นฐานใหม่หากใช้ EntityFramework
Ciaran Gallagher

6
DataType Annotation นั้นไม่ได้บังคับให้รีเฟรชใน Entity Framework
Tallmaris

9
@Ciaran: คำสั่งนี้ควรกดกริ่ง ไม่จำเป็นต้องเปลี่ยนเลเยอร์ฐานข้อมูลเพื่อแก้ไข UI ควรมีวัตถุการนำเสนอซึ่งเป็น mapper ไปยังวัตถุฐานข้อมูล ห้ามใช้วัตถุฐานข้อมูลใน ur UI
Frederik Prijck

5
เพื่อให้ชัดเจนสิ่งที่ Frederik อ้างถึงคือการสร้างคลาสที่แสดงข้อมูลมุมมองของคุณ SEPARATE จากคลาสที่ใช้ใน DbContext ของคุณ อย่าส่งโมเดล DbContext ของคุณไปยังมุมมอง สร้างคลาสโมเดลมุมมองจากนั้นเปลี่ยนข้อมูลที่คุณสนใจจากโมเดล db เป็นโมเดลมุมมองและในทางกลับกันเมื่อยอมรับอินพุต
Jim Yarbro

3
@FrederikPrijck ฉันไม่เห็นด้วย แต่นั่นไม่ได้เป็นการละเมิดอาจารย์ใหญ่ DRY ใช่ไหม? คุณต้องคัดลอกคุณสมบัติทั้งหมดจากคลาสหนึ่งไปอีกคลาสหนึ่ง คุณมี "โลกีย์น้อย" ในการทำสิ่งนั้นบ้างไหมที่คุณได้พบ?
James Haug

1

ประกาศในแบบจำลองของคุณด้วย

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

จากนั้นใน. cshtml สามารถใช้ประโยชน์จากเครื่องมือแก้ไขด้านล่าง คุณสามารถใช้ @colsและ@rows สำหรับขนาด TextArea

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

ขอบคุณมาก!

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.