Donate

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:
Add Placeholder (Watermark) To Html.TextBoxFor() Helper In  ASP.NET MVC 4 :)

Comments

Post a Comment

Donate

Popular Posts From This Blog

WPF CRUD Application Using DataGrid, MVVM Pattern, Entity Framework, And C#.NET

TypeScript Error Or Bug: The term 'tsc' is not recognized as the name of a cmdlet, function, script file, or operable program.

Invalid nested tag div found, expected closing tag input