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.
and in your MVC Form, apply it to TextBoxFor() as shown below:
Sample Output:
:)
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="~/Scripts/placeholders.jquery.min.js"></script>
@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") }
:)
thanks !!
ReplyDeleteYour welcome! Cheers! :)
ReplyDeleteHow to use placeholder for @Html.EditorFor
ReplyDeleteHi,
DeleteIf your using MVC 5.1 and you can use HTML attributes in EditorFor() helper.