ASP.NET MVC TextBox Helper Watermark

[KGComputers]

Hi,

In Winforms or WPF, we set an initial text to a textbox control if it's blank using watermark. In ASP.NET MVC, this can be achieved by adding the placeholder attribute which is defined as one of it's parameter.

However, the placeholder attribute is not supported by lower versions of IE specifically IE9. So, a workaround for this version is to include a Javascript library called placeholders.min.js and reference it in View Layout.cshtml.

<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="~/Scripts/placeholders.min.js"></script>

Sample Index.cshtml with placeholder defined.

@model PlaceHolderDemo.Models.Student

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<h2>Registration</h2>
<hr/>
<br/>
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Student Information</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.LastName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LastName)
            @Html.ValidationMessageFor(model => model.LastName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.FirstMidName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FirstMidName)
            @Html.ValidationMessageFor(model => model.FirstMidName)
        </div>
        
         <div class="editor-label">
            @Html.LabelFor(model => model.EmailAddress)
        </div>
        <div class="editor-field">
           @Html.TextBoxFor(model => model.EmailAddress, new { placeholder = "sample@mail.com" })
            @Html.ValidationMessageFor(model => model.EmailAddress)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.EnrollmentDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.EnrollmentDate)
            @Html.ValidationMessageFor(model => model.EnrollmentDate)
        </div>
        
        <div class="editor-label">
            @Html.LabelFor(model => model.StartDate)
        </div>
        <div class="editor-field">
           @Html.TextBoxFor(m => m.StartDate, "{0:yyyy-MM-dd}",  new { placeholder = "yyyy-MM-dd" })  
            @Html.ValidationMessageFor(model => model.StartDate)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}
<br/>
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Sample Model used

public class Student
{
    public int ID { get; set; }
    public string LastName { get; set; }
    public string FirstMidName { get; set; }
    public string EmailAddress { get; set; }
    public DateTime EnrollmentDate { get; set; }
    public DateTime StartDate { get; set; }
}

KGC