Html5 ตัวยึดตำแหน่งกับ. NET MVC 3 Razor Editor

มีวิธีเขียนตัวยึดตำแหน่ง Html5โดยใช้ @ Html.EditorFor หรือไม่หรือฉันควรใช้นามสกุล TextBoxFor เช่น

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

หรือจะเป็นการดีที่จะเขียนส่วนขยายที่กำหนดเองของเราเองซึ่งอาจใช้แอตทริบิวต์การแสดง "คำอธิบาย" ผ่าน DataAnnotations (คล้าย ๆนี้ )

แน่นอนว่าคำถามเดียวกันนี้ก็ใช้กับ 'ออโต้โฟกัส' เช่นกัน

คุณอาจจะใช้เวลาดูที่บทความต่อไปนี้DataAnnotationsModelMetadataProviderสำหรับการเขียนแบบกำหนดเอง

และนี่คืออีกวิธีหนึ่งของ ASP.NET MVC 3ish ที่เกี่ยวข้องกับอินเทอร์เฟซIMetadataAware ที่เพิ่งเปิดตัว

เริ่มต้นด้วยการสร้างแอตทริบิวต์ที่กำหนดเองโดยใช้อินเทอร์เฟซนี้:

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

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

จากนั้นตกแต่งโมเดลของคุณด้วย:

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

ถัดไปกำหนดคอนโทรลเลอร์:

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

มุมมองที่สอดคล้องกัน:

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

และสุดท้ายแม่แบบตัวแก้ไข ( ~/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>

เป็นความคิดเห็น smnbss ในคำตอบของดารินทร์ดิมิทรอฟของPromptที่มีอยู่สำหรับตรงจุดประสงค์นี้จึงมีความจำเป็นที่จะต้องสร้างแอตทริบิวต์ที่กำหนดเอง จากเอกสารประกอบ:

รับหรือกำหนดค่าที่จะใช้ในการตั้งค่าลายน้ำสำหรับพร้อมต์ใน UI

ในการใช้งานเพียงแค่ตกแต่งคุณสมบัติของโมเดลมุมมองของคุณดังนี้:

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

ModelMetadata.Watermarkข้อความนี้แล้ววางอยู่ในทำเลที่สะดวก เทมเพลตเริ่มต้นใน MVC 3 นอกกรอบจะไม่สนใจWatermarkคุณสมบัติ แต่การทำให้มันใช้งานได้ง่ายมาก สิ่งที่คุณต้องทำคือปรับแต่งเทมเพลตสตริงเริ่มต้นเพื่อบอก MVC ถึงวิธีการแสดงผล เพียงแก้ไข String.cshtml เช่นเดียวกับที่ดารินทำยกเว้นว่าแทนที่จะได้รับลายน้ำจากModelMetadata.AdditionalValuesคุณจะได้รับโดยตรงจากModelMetadata.Watermark:

~ / Views / Shared / EditorTemplates / String.cshtml:

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

และนั่นก็คือ

อย่างที่คุณเห็นกุญแจสำคัญที่จะทำให้ทุกอย่างใช้งานได้placeholder = ViewData.ModelMetadata.Watermarkจริง

หากคุณต้องการเปิดใช้งานการใส่ลายน้ำสำหรับกล่องข้อความหลายบรรทัด (textareas) ให้ทำเช่นเดียวกันสำหรับ MultilineText.cshtml:

~ / Views / Shared / EditorTemplates / MultilineText.cshtml:

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

ฉันชอบใช้ชื่อที่แสดงสำหรับข้อความตัวยึดตำแหน่งเป็นส่วนใหญ่ นี่คือตัวอย่างของการใช้ DisplayName:

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

ฉันได้เขียนคลาสง่ายๆเช่นนี้:

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);
    }
}

การใช้งานดังต่อไปนี้:

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

และคุณสมบัติใน viewmodel:

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

แจ้งให้ทราบพารามิเตอร์พรอมต์ ในกรณีนี้ฉันใช้สตริงจากทรัพยากรสำหรับการแปลเป็นภาษาท้องถิ่น แต่คุณสามารถใช้สตริงได้เพียงแค่หลีกเลี่ยงพารามิเตอร์ ResourceType

ฉันใช้วิธีนี้กับไฟล์ทรัพยากร (ไม่ต้องใช้พรอมต์อีกต่อไป!)

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

นี่คือวิธีแก้ปัญหาที่ฉันสร้างขึ้นโดยใช้แนวคิดข้างต้นที่สามารถใช้กับ TextBoxFor และ 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));
    }
}

ฉันคิดว่าการสร้าง EditorTemplate แบบกำหนดเองไม่ใช่วิธีแก้ปัญหาที่ดีเนื่องจากคุณต้องดูแลเกี่ยวกับ tepmlates ที่เป็นไปได้มากมายสำหรับกรณีต่างๆ: สตริงตัวเลขคอมโบบ็อกซ์และอื่น ๆ โซลูชันอื่นคือส่วนขยายที่กำหนดเองสำหรับ HtmlHelper

รุ่น:

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

ส่วนขยายตัวช่วย 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);

}

มุมมองที่สอดคล้องกัน:

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