Phần giữ chỗ Html5 với .NET MVC 3 Razor EditorĐể biết tiện ích mở rộng?

Có cách nào để viết trình giữ chỗ Html5 bằng @ Html.EditorFor không, hay tôi chỉ nên sử dụng phần mở rộng TextBoxFor tức là

@Html.TextBoxFor(model => model.Title, new { @placeholder = "Enter title here"})

Hoặc sẽ có ý nghĩa khi viết tiện ích mở rộng tùy chỉnh của riêng chúng tôi có thể sử dụng thuộc tính hiển thị 'Mô tả' thông qua DataAnnotations (tương tự như thế này )?

Tất nhiên, câu hỏi tương tự cũng áp dụng cho 'tự động lấy nét'.

Bạn có thể xem qua bài viết sau để viết một tùy chỉnh DataAnnotationsModelMetadataProvider.

Và đây là một cách ASP.NET MVC 3ish khác để tiến hành liên quan đến giao diện IMetadataAware mới được giới thiệu .

Bắt đầu bằng cách tạo một thuộc tính tùy chỉnh triển khai giao diện này:

public class PlaceHolderAttribute : Attribute, IMetadataAware
{
    private readonly string _placeholder;
    public PlaceHolderAttribute(string placeholder)
    {
        _placeholder = placeholder;
    }

    public void OnMetadataCreated(ModelMetadata metadata)
    {
        metadata.AdditionalValues["placeholder"] = _placeholder;
    }
}

Và sau đó trang trí mô hình của bạn với nó:

public class MyViewModel
{
    [PlaceHolder("Enter title here")]
    public string Title { get; set; }
}

Tiếp theo xác định một bộ điều khiển:

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

Một chế độ xem tương ứng:

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

Và cuối cùng là mẫu trình soạn thảo ( ~/Views/Shared/EditorTemplates/string.cshtml):

@{
    var placeholder = string.Empty;
    if (ViewData.ModelMetadata.AdditionalValues.ContainsKey("placeholder"))
    {
        placeholder = ViewData.ModelMetadata.AdditionalValues["placeholder"] as string;
    }
}
<span>
    @Html.Label(ViewData.ModelMetadata.PropertyName)
    @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { placeholder = placeholder })
</span>

Như nhận xét của smnbss trong câu trả lời của Darin Dimitrov, Prompttồn tại cho chính xác mục đích này, vì vậy không cần tạo thuộc tính tùy chỉnh . Từ tài liệu:

Nhận hoặc đặt một giá trị sẽ được sử dụng để đặt hình mờ cho lời nhắc trong giao diện người dùng.

Để sử dụng nó, chỉ cần trang trí thuộc tính của mô hình xem của bạn như sau:

[Display(Prompt = "numbers only")]
public int Age { get; set; }

Văn bản này sau đó được đặt một cách thuận tiện ModelMetadata.Watermark. Ngoài ra, mẫu mặc định trong MVC 3 bỏ qua thuộc Watermarktính, nhưng làm cho nó hoạt động thực sự đơn giản. Tất cả những gì bạn cần làm là tinh chỉnh mẫu chuỗi mặc định, để cho MVC biết cách hiển thị nó. Chỉ cần chỉnh sửa String.cshtml, giống như Darin, ngoại trừ việc thay vì lấy hình mờ từ đó ModelMetadata.AdditionalValues, bạn sẽ có được nó ngay từ ModelMetadata.Watermark:

~ / Lượt xem / Đã chia sẻ / EditorTemplates / String.cshtml:

@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "text-box single-line", placeholder = ViewData.ModelMetadata.Watermark })

Và đó là nó.

Như bạn có thể thấy, chìa khóa để làm cho mọi thứ hoạt động chính là placeholder = ViewData.ModelMetadata.Watermarkbit.

Nếu bạn cũng muốn bật tính năng đánh dấu nước cho các hộp văn bản nhiều dòng (textareas), bạn làm tương tự cho MultilineText.cshtml:

~ / Lượt xem / Chia sẻ / EditorTemplates / MultilineText.cshtml:

@Html.TextArea("", ViewData.TemplateInfo.FormattedModelValue.ToString(), 0, 0, new { @class = "text-box multi-line", placeholder = ViewData.ModelMetadata.Watermark })

Tôi thực sự thích sử dụng tên hiển thị cho phần lớn văn bản giữ chỗ. Đây là một ví dụ về việc sử dụng DisplayName:

  @Html.TextBoxFor(x => x.FirstName, true, null, new { @class = "form-control", placeholder = Html.DisplayNameFor(x => x.FirstName) })

Tôi đã viết một lớp đơn giản như vậy:

public static class WatermarkExtension
{
    public static MvcHtmlString WatermarkFor<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression)
    {
        var watermark = ModelMetadata.FromLambdaExpression(expression, html.ViewData).Watermark;
        var htmlEncoded = HttpUtility.HtmlEncode(watermark);
        return new MvcHtmlString(htmlEncoded);
    }
}

Việc sử dụng như vậy:

@Html.TextBoxFor(model => model.AddressSuffix, new {placeholder = Html.WatermarkFor(model => model.AddressSuffix)})

Và thuộc tính trong một mô hình xem:

[Display(ResourceType = typeof (Resources), Name = "AddressSuffixLabel", Prompt = "AddressSuffixPlaceholder")]
public string AddressSuffix
{
    get { return _album.AddressSuffix; }
    set { _album.AddressSuffix = value; }
}

Thông báo tham số Nhắc. Trong trường hợp này, tôi sử dụng chuỗi từ tài nguyên để bản địa hóa nhưng bạn có thể chỉ sử dụng chuỗi, chỉ cần tránh tham số ResourceType.

Tôi sử dụng cách này với tệp Tài nguyên (không cần Lời nhắc nữa!)

@Html.TextBoxFor(m => m.Name, new 
{
     @class = "form-control",
     placeholder = @Html.DisplayName(@Resource.PleaseTypeName),
     autofocus = "autofocus",
     required = "required"
})

Đây là một giải pháp tôi đã thực hiện bằng cách sử dụng các ý tưởng trên có thể được sử dụng cho TextBoxFor và PasswordFor:

public static class HtmlHelperEx
{
    public static MvcHtmlString TextBoxWithPlaceholderFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper,
        Expression<Func<TModel, TProperty>> expression, object htmlAttributes)
    {
        var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
        return htmlHelper.TextBoxFor(expression, htmlAttributes.AddAttribute("placeholder", metadata.Watermark));

    }

    public static MvcHtmlString PasswordWithPlaceholderFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper,
        Expression<Func<TModel, TProperty>> expression, object htmlAttributes)
    {
        var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
        return htmlHelper.PasswordFor(expression, htmlAttributes.AddAttribute("placeholder", metadata.Watermark));

    }
}

public static class HtmlAttributesHelper
{
    public static IDictionary<string, object> AddAttribute(this object htmlAttributes, string name, object value)
    {
        var dictionary = htmlAttributes == null ? new Dictionary<string, object>() : htmlAttributes.ToDictionary();
        if (!String.IsNullOrWhiteSpace(name) && value != null && !String.IsNullOrWhiteSpace(value.ToString()))
            dictionary.Add(name, value);
        return dictionary;
    }

    public static IDictionary<string, object> ToDictionary(this object obj)
    {
        return TypeDescriptor.GetProperties(obj)
            .Cast<PropertyDescriptor>()
            .ToDictionary(property => property.Name, property => property.GetValue(obj));
    }
}

Tôi nghĩ rằng việc tạo một EditorTemplate tùy chỉnh không phải là giải pháp tốt, vì bạn cần quan tâm đến nhiều tepmlate có thể có cho các trường hợp khác nhau: chuỗi, numsers, combobox, v.v. Giải pháp khác là mở rộng tùy chỉnh cho HtmlHelper.

Mô hình:

public class MyViewModel
{
    [PlaceHolder("Enter title here")]
    public string Title { get; set; }
}

Tiện ích mở rộng trình trợ giúp html:

   public static MvcHtmlString BsEditorFor<TModel, TValue>(this HtmlHelper<TModel> htmlHelper,
    Expression<Func<TModel, TValue>> expression, string htmlClass = "")
{
    var modelMetadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
    var metadata = modelMetadata;

    var viewData = new
    {
        HtmlAttributes = new
            {
                @class = htmlClass,
                placeholder = metadata.Watermark,
            }
    };
    return htmlHelper.EditorFor(expression, viewData);

}

Một chế độ xem tương ứng:

@Html.BsEditorFor(x => x.Title)