Results 1 to 1 of 1

Thread: ASP.NET MVC TextBox Helper Watermark

  1. #1

    Thread Starter
    Frenzied Member KGComputers's Avatar
    Join Date
    Dec 2005
    Cebu, PH

    ASP.NET MVC TextBox Helper Watermark


    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";
    @using (Html.BeginForm()) {
            <legend>Student Information</legend>
            <div class="editor-label">
                @Html.LabelFor(model => model.LastName)
            <div class="editor-field">
                @Html.EditorFor(model => model.LastName)
                @Html.ValidationMessageFor(model => model.LastName)
            <div class="editor-label">
                @Html.LabelFor(model => model.FirstMidName)
            <div class="editor-field">
                @Html.EditorFor(model => model.FirstMidName)
                @Html.ValidationMessageFor(model => model.FirstMidName)
             <div class="editor-label">
                @Html.LabelFor(model => model.EmailAddress)
            <div class="editor-field">
               @Html.TextBoxFor(model => model.EmailAddress, new { placeholder = "" })
                @Html.ValidationMessageFor(model => model.EmailAddress)
            <div class="editor-label">
                @Html.LabelFor(model => model.EnrollmentDate)
            <div class="editor-field">
                @Html.EditorFor(model => model.EnrollmentDate)
                @Html.ValidationMessageFor(model => model.EnrollmentDate)
            <div class="editor-label">
                @Html.LabelFor(model => model.StartDate)
            <div class="editor-field">
               @Html.TextBoxFor(m => m.StartDate, "{0:yyyy-MM-dd}",  new { placeholder = "yyyy-MM-dd" })  
                @Html.ValidationMessageFor(model => model.StartDate)
                <input type="submit" value="Create" />
        @Html.ActionLink("Back to List", "Index")
    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; }
    Attached Files Attached Files
    CodeBank: VB.NET & C#.NET | ASP.NET
    Programming: C# | VB.NET
    Blogs: Personal | Programming
    Projects: GitHub | jsFiddle

    Rating someone's post is a way of saying Thanks...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

Click Here to Expand Forum to Full Width