คุณสมบัติ EditorFor () และ html

การสร้างตัวอย่าง Asp.Net MVC 2.0 ให้ตัวช่วยเช่น

Html.EditorFor(c => c.propertyname)

หากชื่อคุณสมบัติเป็นสตริงโค้ดด้านบนจะแสดงผลเป็น texbox

จะเกิดอะไรขึ้นถ้าฉันต้องการส่งผ่านคุณสมบัติ MaxLength และ Size ไปยังกล่องข้อความหรือคุณสมบัติคลาส css ของฉันเอง

ฉันต้องสร้างเทมเพลตหนึ่งรายการสำหรับการผสมขนาดและความยาวในแอปพลิเคชันของฉันหรือไม่ หากเป็นเช่นนั้นจะไม่ทำให้เทมเพลตเริ่มต้นใช้งานได้

ใน MVC3 คุณสามารถตั้งค่าความกว้างได้ดังนี้:

@Html.TextBoxFor(c => c.PropertyName, new { style = "width: 500px;" })

ฉันแก้ไขสิ่งนี้โดยสร้าง EditorTemplate ชื่อ String.ascx ในโฟลเดอร์ / Views / Shared / EditorTemplates:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>
<% int size = 10;
   int maxLength = 100;
   if (ViewData["size"] != null)
   {
       size = (int)ViewData["size"];
   }
   if (ViewData["maxLength"] != null)
   {
       maxLength = (int)ViewData["maxLength"];
   }
%>
<%= Html.TextBox("", Model, new { Size=size, MaxLength=maxLength }) %>

ในมุมมองของฉันฉันใช้

<%= Html.EditorFor(model => model.SomeStringToBeEdited, new { size = 15, maxLength = 10 }) %>

ใช้งานได้เหมือนมีเสน่ห์สำหรับฉัน!

ไม่มีคำตอบในหัวข้อนี้หรือหัวข้ออื่น ๆ เกี่ยวกับการตั้งค่าแอตทริบิวต์ HTML สำหรับ @ Html.EditorFor ช่วยฉันได้มาก อย่างไรก็ตามฉันพบคำตอบที่ดีที่

จัดแต่งทรงผม @ Html.EditorFor helper

ฉันใช้วิธีการเดียวกันและทำงานได้อย่างสวยงามโดยไม่ต้องเขียนโค้ดพิเศษมากมาย โปรดสังเกตว่าแอตทริบิวต์ id ของเอาต์พุต html ของ Html.EditorFor ถูกตั้งค่า รหัสมุมมอง

<style type="text/css">
#dob
{
   width:6em;
}
</style>

@using (Html.BeginForm())
{
   Enter date: 
   @Html.EditorFor(m => m.DateOfBirth, null, "dob", null)
}

คุณสมบัติของโมเดลที่มีคำอธิบายประกอบข้อมูลและการจัดรูปแบบวันที่เป็น "dd MMM yyyy"

[Required(ErrorMessage= "Date of birth is required")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd MMM yyyy}")]
public DateTime DateOfBirth { get; set; }

ทำงานได้อย่างมีเสน่ห์โดยไม่ต้องเขียนโค้ดพิเศษมากมาย คำตอบนี้ใช้ ASP.NET MVC 3 Razor C #

อาจต้องการดูบล็อกโพสต์ของ Kiran Chandเขาใช้ข้อมูลเมตาที่กำหนดเองกับโมเดลมุมมองเช่น:

[HtmlProperties(Size = 5, MaxLength = 10)]
public string Title { get; set; }

รวมกับเทมเพลตแบบกำหนดเองที่ใช้ประโยชน์จากข้อมูลเมตา วิธีการที่สะอาดและเรียบง่ายในความคิดของฉัน แต่ฉันอยากเห็นกรณีการใช้งานทั่วไปนี้ในตัวสำหรับ mvc

ฉันประหลาดใจที่ไม่มีใครพูดถึงการส่งผ่านใน "additionalViewData" และอ่านอีกด้านหนึ่ง

ดู (พร้อมตัวแบ่งบรรทัดเพื่อความชัดเจน):

<%= Html.EditorFor(c => c.propertyname, new
    {
        htmlAttributes = new
        {
            @class = "myClass"
        }
    }
)%>

เทมเพลตบรรณาธิการ:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>

<%= Html.TextBox("", Model, ViewData["htmlAttributes"])) %>

ปัญหาคือเทมเพลตของคุณสามารถมีองค์ประกอบ HTML ได้หลายรายการดังนั้น MVC จะไม่รู้ว่าควรใช้ขนาด / คลาสของคุณ คุณจะต้องกำหนดเอง

สร้างเทมเพลตของคุณมาจากคลาสของคุณเองที่เรียกว่า TextBoxViewModel:

public class TextBoxViewModel
{
  public string Value { get; set; }
  IDictionary<string, object> moreAttributes;
  public TextBoxViewModel(string value, IDictionary<string, object> moreAttributes)
  {
    // set class properties here
  }
  public string GetAttributesString()
  {
     return string.Join(" ", moreAttributes.Select(x => x.Key + "='" + x.Value + "'").ToArray()); // don't forget to encode
  }

}

ในเทมเพลตคุณสามารถทำได้:

<input value="<%= Model.Value %>" <%= Model.GetAttributesString() %> />

ในมุมมองของคุณคุณทำ:

<%= Html.EditorFor(x => x.StringValue) %>
or
<%= Html.EditorFor(x => new TextBoxViewModel(x.StringValue, new IDictionary<string, object> { {'class', 'myclass'}, {'size', 15}}) %>

รูปแบบแรกจะแสดงเทมเพลตเริ่มต้นสำหรับสตริง แบบฟอร์มที่สองจะแสดงเทมเพลตแบบกำหนดเอง

ไวยากรณ์ทางเลือกใช้อินเทอร์เฟซที่คล่องแคล่ว:

public class TextBoxViewModel
{
  public string Value { get; set; }
  IDictionary<string, object> moreAttributes;
  public TextBoxViewModel(string value, IDictionary<string, object> moreAttributes)
  {
    // set class properties here
    moreAttributes = new Dictionary<string, object>();
  }

  public TextBoxViewModel Attr(string name, object value)
  {
     moreAttributes[name] = value;
     return this;
  }

}

   // and in the view
   <%= Html.EditorFor(x => new TextBoxViewModel(x.StringValue).Attr("class", "myclass").Attr("size", 15) %>

สังเกตว่าแทนที่จะทำสิ่งนี้ในมุมมองคุณสามารถทำได้ในคอนโทรลเลอร์หรือดีกว่ามากใน ViewModel:

public ActionResult Action()
{
  // now you can Html.EditorFor(x => x.StringValue) and it will pick attributes
  return View(new { StringValue = new TextBoxViewModel(x.StringValue).Attr("class", "myclass").Attr("size", 15) });
}

โปรดสังเกตด้วยว่าคุณสามารถสร้างคลาส TemplateViewModel พื้นฐานซึ่งเป็นพื้นฐานทั่วไปสำหรับเทมเพลตมุมมองทั้งหมดของคุณซึ่งจะมีการรองรับพื้นฐานสำหรับแอตทริบิวต์ / ฯลฯ

แต่โดยทั่วไปฉันคิดว่า MVC v2 ต้องการโซลูชันที่ดีกว่า ยังเป็นเบต้าอยู่ - ไปขอเลย ;-)

ฉันคิดว่าการใช้ CSS เป็นวิธีที่จะไป ฉันหวังว่าฉันจะทำอะไรได้มากกว่านี้ด้วยการเข้ารหัส. NET เช่นใน XAML แต่ CSS ของเบราว์เซอร์เป็นสิ่งสำคัญ

Site.css

#account-note-input { 
  width:1000px; 
  height:100px; 
} 

.cshtml

<div class="editor-label"> 
  @Html.LabelFor(model => model.Note) 
</div> 
<div class="editor-field"> 
  @Html.EditorFor(model => model.Note, null, "account-note-input", null) 
  @Html.ValidationMessageFor(model => model.Note) 
</div>

โจ

ใน MVC 5 หากคุณต้องการเพิ่มคุณสมบัติใด ๆ คุณสามารถทำได้

 @Html.EditorFor(m => m.Name, new { htmlAttributes = new { @required = "true", @anotherAttribute = "whatever" } })

ข้อมูลที่พบจากบล็อกนี้

คุณสามารถกำหนดแอตทริบิวต์สำหรับคุณสมบัติของคุณ

[StringLength(100)]
public string Body { get; set; }

นี้เรียกว่าSystem.ComponentModel.DataAnnotations. หากคุณไม่พบสิ่งValidationAttributeที่ต้องการคุณสามารถกำหนดแอตทริบิวต์ที่กำหนดเองได้ตลอดเวลา

ขอแสดงความนับถือ Carlos

นี่อาจไม่ใช่วิธีแก้ปัญหาที่เนียนที่สุด แต่ตรงไปตรงมา คุณสามารถเขียนส่วนขยายลงในคลาส HtmlHelper.EditorFor ในส่วนขยายนั้นคุณสามารถระบุพารามิเตอร์ตัวเลือกที่จะเขียนตัวเลือกไปยัง ViewData สำหรับผู้ช่วยเหลือ นี่คือรหัสบางส่วน:

ขั้นแรกวิธีการขยาย:

public static MvcHtmlString EditorFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, TemplateOptions options)
{
    return helper.EditorFor(expression, options.TemplateName, new
    {
        cssClass = options.CssClass
    });
}

ถัดไปวัตถุตัวเลือก:

public class TemplateOptions
{
    public string TemplateName { get; set; }
    public string CssClass { get; set; }
    // other properties for info you'd like to pass to your templates,
    // and by using an options object, you avoid method overload bloat.
}

และสุดท้ายนี่คือบรรทัดจากเทมเพลต String.ascx:

<%= Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = ViewData["cssClass"] ?? "" }) %>

ตรงไปตรงมาฉันคิดว่านี่เป็นเรื่องที่ตรงไปตรงมาและชัดเจนสำหรับผู้ที่มีจิตใจยากจนที่ต้องรักษารหัสของคุณไว้ข้างทาง และง่ายต่อการขยายสำหรับข้อมูลอื่น ๆ ที่คุณต้องการส่งผ่านไปยังเทมเพลตของคุณ มันใช้งานได้ดีสำหรับฉันในโครงการที่ฉันพยายามรวมชุดเทมเพลตให้มากที่สุดเท่าที่จะทำได้เพื่อช่วยสร้างมาตรฐาน html โดยรอบ a la http://bradwilson.typepad.com/blog/2009/ 10

ฉันเขียนรายการบล็อกเพื่อตอบคำถามของตัวเอง

การเพิ่มการสนับสนุนแอตทริบิวต์ html สำหรับเทมเพลต - ASP.Net MVC 2.0 Beta

ฉันไม่รู้ว่าทำไมมันใช้ไม่ได้กับ Html.EditorFor แต่ฉันลอง TextBoxFor แล้วมันใช้ได้กับฉัน

@Html.TextBoxFor(m => m.Name, new { Class = "className", Size = "40"})

... และการตรวจสอบยังใช้ได้ผล

ในทางปฏิบัติของฉันฉันพบว่าควรใช้ EditorTemplates กับ HtmlHelper เพียงตัวเดียว - กล่องข้อความซึ่งส่วนใหญ่แล้ว ถ้าฉันต้องการเทมเพลตสำหรับโครงสร้าง html ที่ซับซ้อนมากขึ้นฉันจะเขียน HtmlHelper แยกต่างหาก

ระบุว่าเราสามารถติดวัตถุ ViewData ทั้งหมดแทน htmlAttributes ของ TextBox นอกจากนี้เรายังสามารถเขียนโค้ดการปรับแต่งสำหรับคุณสมบัติบางอย่างของ ViewData ได้หากต้องการการดูแลเป็นพิเศษ:

@model DateTime?

@*
    1) applies class datepicker to the input;
    2) applies additionalViewData object to the attributes of the input
    3) applies property "format" to the format of the input date.
*@

@{
    if (ViewData["class"] != null) { ViewData["class"] += " datepicker"; }
    else { ViewData["class"] = " datepicker"; }
    string format = "MM/dd/yyyy";
    if (ViewData["format"] != null)
    {
        format = ViewData["format"].ToString();
        ViewData.Remove("format");
    }
}

@Html.TextBox("", (Model.HasValue ? Model.Value.ToString(format) : string.Empty), ViewData)

ด้านล่างนี้เป็นตัวอย่างของไวยากรณ์ในมุมมองและ html ที่ส่งออก:

@Html.EditorFor(m => m.Date)

<input class="datepicker" data-val="true" data-val-required="&amp;#39;Date&amp;#39; must not be empty." id="Date" name="Date" type="text" value="01/08/2012">

@Html.EditorFor(m => m.Date, new { @class = "myClass", @format = "M/dd" })

<input class="myClass datepicker" data-val="true" data-val-required="&amp;#39;Date&amp;#39; must not be empty." id="Date" name="Date" type="text" value="1/08">

เพราะคำถามคือสำหรับEditorForไม่ได้ข้อเสนอแนะ TextBoxFor WEFX ไม่ทำงาน

สำหรับการเปลี่ยนช่องป้อนข้อมูลแต่ละช่องคุณสามารถประมวลผลผลลัพธ์ของวิธี EditorFor:

<%: new HtmlString(Html.EditorFor(m=>m.propertyname).ToString().Replace("class=\"text-box single-line\"", "class=\"text-box single-line my500pxWideClass\"")) %>

นอกจากนี้ยังสามารถเปลี่ยน EditorFors ทั้งหมดของคุณได้เนื่องจาก MVC ตั้งค่าคลาสของกล่องข้อความ EditorFor ด้วย. text-boxดังนั้นคุณสามารถแทนที่สไตล์นี้ในสไตล์ชีทหรือบนเพจได้

.text-box {
    width: 80em;
}

นอกจากนี้คุณสามารถตั้งค่ารูปแบบสำหรับ

input[type="text"] {
    width: 200px;
}

• สิ่งนี้จะแทนที่. text-box และจะเปลี่ยนกล่องข้อความอินพุต EditorFor หรืออื่น ๆ

ฉันมีปัญหากับการตั้งค่าความกว้างของ TextBox ใน MVC3 ในขณะที่การตั้งค่าแอตทริบิวต์ Clsss ใช้งานได้กับการควบคุม TextArea แต่ไม่ใช่สำหรับ TextBoxFor control หรือ EditorFor control:

ฉันลองทำตามแล้วและได้ผลสำหรับฉัน:

@ Html.TextBoxFor (model => model.Title ใหม่ {Class = "textBox", style = "width: 90%;"})

เช่นกันในกรณีนี้การตรวจสอบจะทำงานได้อย่างสมบูรณ์

วิธีหนึ่งที่คุณสามารถแก้ไขได้คือการให้ผู้ร่วมประชุมในโมเดลมุมมองจัดการพิมพ์การเรนเดอร์พิเศษเช่นนี้ ฉันทำสิ่งนี้สำหรับคลาสเพจจิ้งแล้วฉันเปิดเผยทรัพย์สินสาธารณะบนโมเดลFunc<int, string> RenderUrlเพื่อจัดการกับมัน

ดังนั้นกำหนดวิธีการเขียนบิตที่กำหนดเอง:

Model.Paging.RenderUrl = (page) => { return string.Concat(@"/foo/", page); };

แสดงผลมุมมองสำหรับPagingคลาส:

@Html.DisplayFor(m => m.Paging)

... และสำหรับPagingมุมมองจริง:

@model Paging
@if (Model.Pages > 1)
{
    <ul class="paging">
    @for (int page = 1; page <= Model.Pages; page++)
    {
        <li><a href="@Model.RenderUrl(page)">@page</a></li>
    }
    </ul>
}

อาจถูกมองว่าเป็นเรื่องที่ซับซ้อนเกินไป แต่ฉันใช้วิทยุติดตามตัวเหล่านี้ทุกที่และไม่สามารถทนเห็นรหัสต้นแบบเดียวกันเพื่อให้แสดงผลได้

อัปเดต: อืมเห็นได้ชัดว่าสิ่งนี้ใช้ไม่ได้เนื่องจากโมเดลถูกส่งผ่านค่าดังนั้นแอตทริบิวต์จะไม่ถูกเก็บรักษาไว้ แต่ฉันปล่อยให้คำตอบนี้เป็นไอเดีย

ฉันคิดว่าอีกวิธีหนึ่งคือการเพิ่มตัวช่วย TextBox / etc ของคุณเองซึ่งจะตรวจสอบคุณสมบัติของคุณเองในแบบจำลอง

public class ViewModel
{
  [MyAddAttribute("class", "myclass")]
  public string StringValue { get; set; }
}

public class MyExtensions
{
  public static IDictionary<string, object> GetMyAttributes(object model)
  {
     // kind of prototype code...
     return model.GetType().GetCustomAttributes(typeof(MyAddAttribute)).OfType<MyAddAttribute>().ToDictionary(
          x => x.Name, x => x.Value);
  }
}

<!-- in the template -->
<%= Html.TextBox("Name", Model, MyExtensions.GetMyAttributes(Model)) %>

อันนี้ง่ายกว่า แต่ไม่สะดวก / ยืดหยุ่นเท่า

นี่เป็นวิธีที่เรียบง่ายและสะอาดที่สุดในการหาทางออกที่นี่

บล็อกโพสต์ที่ยอดเยี่ยมและไม่มีความยุ่งเหยิงมากเกินไปในการเขียนส่วนขยาย / วิธีการช่วยเหลือที่กำหนดเองเช่นศาสตราจารย์ที่บ้าคลั่ง

http://geekswithblogs.net/michelotti/archive/2010/02/05/mvc-2-editor-template-with-datetime.aspx

ฉันชอบคำตอบของ @tjeerdans ซึ่งใช้ EditorTemplate ชื่อ String.ascx ในโฟลเดอร์ / Views / Shared / EditorTemplates ดูเหมือนว่าจะเป็นคำตอบที่ตรงไปตรงมาที่สุดสำหรับคำถามนี้ อย่างไรก็ตามฉันต้องการเทมเพลตที่ใช้ไวยากรณ์ของ Razor นอกจากนี้ดูเหมือนว่า MVC3 จะใช้เทมเพลต String เป็นค่าเริ่มต้น (โปรดดูคำถาม StackOverflow " เทมเพลตการแสดง mvc สำหรับสตริงใช้สำหรับจำนวนเต็ม ") ดังนั้นคุณต้องตั้งค่าโมเดลเป็นอ็อบเจ็กต์แทนที่จะเป็นสตริง เทมเพลตของฉันดูเหมือนจะใช้งานได้แล้ว:

@model object 

@{  int size = 10; int maxLength = 100; }

@if (ViewData["size"] != null) {
    Int32.TryParse((string)ViewData["size"], out size); 
} 

@if (ViewData["maxLength"] != null) {
    Int32.TryParse((string)ViewData["maxLength"], out maxLength); 
}

@Html.TextBox("", Model, new { Size = size, MaxLength = maxLength})

แก้แล้ว !!
สำหรับ Razor ไวยากรณ์คือ:
@Html.TextAreaFor(m=>m.Address, new { style="Width:174px" })สิ่งนี้จะปรับความกว้างของพื้นที่ข้อความให้เป็นความกว้างที่ฉันกำหนดไว้ในพารามิเตอร์ style
สำหรับ ASPx ไวยากรณ์คือ:
<%=Html.TextAreaFor(m => m.Description, new { cols = "20", rows = "15", style="Width:174px" })%>
สิ่งนี้จะทำเคล็ดลับ