Sử dụng EditorFor with Twitter Bootstrap để hiển thị một nhãn biểu mẫu, thông tin đầu vào và xác thực

Question

Tôi đã ghi đè mẫu trình chỉnh sửa mặc định (Object.ascx) để tạo HTML dạng (body) theo hướng dẫn của Twitter Bootstrap (http://twitter.github.io/bootstrap/base-css.html#forms) được thực thi qua Html.EditorForModel().

@if (ViewData.TemplateInfo.TemplateDepth > 1) 
{ 
    @(Model == null ? ViewData.ModelMetadata.NullDisplayText : ViewData.ModelMetadata.SimpleDisplayText) 
} 
else 
{ 
    foreach (var property in ViewData.ModelMetadata.Properties.Where(m => m.ShowForEdit @*&& m.ModelType != typeof (System.Data.EntityState)*@ && !m.IsComplexType && !ViewData.TemplateInfo.Visited(m))) 
    { 
     if (property.HideSurroundingHtml) 
     { 
      @Html.Editor(property.PropertyName) 
     } 
     else 
     { 
      <div class="control-group @(!ViewData.ModelState.IsValidField(property.PropertyName) ? "error" : ViewData.ModelState.ContainsKey(property.PropertyName) ? "success" : "")"> 
       @if (!string.IsNullOrEmpty(Html.Label(property.PropertyName).ToHtmlString())) 
       { 
        @Html.Label(property.GetDisplayName() + (property.IsRequired ? " *" : ""), new { @class = "control-label" }) 
       } 

       <div class="controls"> 
        @Html.Editor(property.PropertyName) 
        @Html.ValidationMessage(property.PropertyName, "*", new { @class = "help-inline" }) 
       </div> 
      </div> 
     } 
    } 
} 

Điều này hoạt động tốt trừ khi tôi muốn chỉnh sửa biểu mẫu (ví dụ: thay đổi thứ tự hoặc thêm các trường). Về cơ bản, tôi muốn tách một phần của mã trên thành một mẫu trình soạn thảo khác, dẫn đến Property.ascx. Điều này sẽ hiển thị thông báo nhãn, đầu vào và xác nhận hợp lệ cho một thuộc tính cụ thể, được thực thi thông qua Html.Editor ("{PropertyName"}) hoặc Html.EditorFor (m => m. {PropertyName}).

<div class="control-group @(!ViewData.ModelState.IsValidField(ViewData.ModelMetadata.PropertyName) ? "error" : ViewData.ModelState.ContainsKey(ViewData.ModelMetadata.PropertyName) ? "success" : "")"> 
    @if (!string.IsNullOrEmpty(Html.Label(ViewData.ModelMetadata.PropertyName).ToHtmlString())) 
    { 
     @Html.Label(ViewData.ModelMetadata.GetDisplayName() + (ViewData.ModelMetadata.IsRequired ? " *" : ""), new { @class = "control-label" }) 
    } 

    <div class="controls"> 
     @Html.Editor(ViewData.ModelMetadata.PropertyName) 
     @Html.ValidationMessage(ViewData.ModelMetadata.PropertyName, "*", new { @class = "help-inline" }) 
    </div> 
</div> 

Vấn đề với mẫu trình chỉnh sửa ở trên là nó không hiển thị đầu vào chính xác cho loại đã cho. Vì vậy, một thuộc tính ngày/giờ sẽ chỉ hiển thị một hộp văn bản bình thường mà không có thuộc tính type.

Tôi có thực hiện đúng cách này không? Tôi có nên sử dụng trình trợ giúp HTML chuẩn hoặc chế độ xem một phần không? Nếu vậy, làm thế nào để chúng ta xử lý bản chất chung?

Answer 1

MVC 5.1 bao gồm bản sửa lỗi chính xác cho trường hợp này, Bootstrap support for editor templates. Bạn có thể bao gồm các thuộc tính bổ sung cho đánh dấu bằng cách cung cấp một đối tượng anonmyous như tham số thứ hai để EditorFor

@Html.EditorFor(model => model, new { htmlAttributes = new { @class = "form-control" }, })