Wednesday, March 12, 2014

Add placeholder (watermark) to Html.TextBoxFor() helper in ASP.NET MVC 4

After working with simple form html elements, I decided to give it a try applying the placeholder jquery framework to ASP.NET MVC4 application. The steps are similar in this post: Placeholder attribute in HTML5 form Elements except that the target controls are HTML Helpers.

Basically, TextBoxFor() helper when rendered to the browser is an input text element. So, let's give it a spin. On your _Layout.cshtml, reference the jquery and placeholder scripts.
 <script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>  
 <script type="text/javascript" src="~/Scripts/placeholders.jquery.min.js"></script>  
and in your MVC Form, apply it to TextBoxFor() as shown below:
 @model TextBoxFor.Models.Movie  
 @{  
   ViewBag.Title = "CreateMovie";  
 }  
 <h2>Create</h2>  
 @using (Html.BeginForm()) {  
   @Html.ValidationSummary(true)  
   <fieldset>  
     <legend>Movie</legend>  
     <div class="editor-label">  
       @Html.LabelFor(model => model.Title)  
     </div>  
     <div class="editor-field">  
       @Html.EditorFor(model => model.Title)  
       @Html.ValidationMessageFor(model => model.Title)  
     </div>  
     <div class="editor-label">  
       @Html.LabelFor(model => model.Price)  
     </div>  
     <div class="editor-field">  
       @Html.EditorFor(model => model.Price)  
       @Html.ValidationMessageFor(model => model.Price)  
     </div>  
     <div class="editor-label">  
       @Html.LabelFor(model => model.ReleaseDate)  
     </div>  
     <div class="editor-field">  
       @Html.TextBoxFor(m => m.ReleaseDate, "{0:yyyy-MM-dd}",  
           new { placeholder = "yyyy-MM-dd" })  
       @Html.ValidationMessageFor(model => model.ReleaseDate)  
     </div>  
     <div class="editor-label">  
       @Html.LabelFor(model => model.Genre)  
     </div>  
     <div class="editor-field">  
       @Html.EditorFor(model => model.Genre)  
       @Html.ValidationMessageFor(model => model.Genre)  
     </div>  
     <div class="editor-label">  
       @Html.LabelFor(model => model.Rating)  
     </div>  
     <div class="editor-field">  
       @Html.EditorFor(model => model.Rating)  
       @Html.ValidationMessageFor(model => model.Rating)  
     </div>  
     <p>  
       <input type="submit" value="Create" />  
     </p>  
   </fieldset>  
 }  
 <div>  
   @Html.ActionLink("Back to List", "Index")  
 </div>  
 @section Scripts {  
   @Scripts.Render("~/bundles/jqueryval")  
 }  
Sample Output:
:)

4 comments: