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
    Location
    Cebu, PH
    Posts
    2,020

    ASP.NET MVC TextBox Helper Watermark

    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.

    Code:
    <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.
    Code:
    @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
    Code:
    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
    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