In this article I will explain with an example, how to Watermark TextBox created using Model and @Html.TextBoxFor helper function in ASP.Net MVC Razor.
This article will make use of the Free ASPSnippets jQuery Watermark plugin, to Watermark TextBox created using Model and @Html.TextBoxFor helper function in ASP.Net MVC Razor.
Model
The following Model class consists of two properties FirstName and LastName. The properties are decorated with the Display Data Annotation attributes for displaying Labels for the TextBoxes.
public class UserModel
{
[Display(Name = "FirstName:")]
public string FirstName { get; set; }
[Display(Name = "LastName:")]
public string LastName { get; set; }
}
Controller
The Controller consists of the following Action method.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
View
Inside the View, in the very first line the UserModel class is declared as Model for the View.
The View consists of the following two HTML Helper functions:-
1. Html.TextBoxFor – Creating a TextBox for the Model property.
2. Html.DisplayFor – Displaying the Display message (Label) for the Model property.
For both the TextBoxes, the title attribute is set to the value which needs to be displayed as Watermark Text.
Inside the jQuery document ready event handler, the Free ASPSnippets jQuery Watermark plugin is applied to both the TextBoxes.
@model WaterMark_TextBox_MVC.Models.UserModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="~/Scripts/WaterMark.min.js"></script>
<script type="text/javascript">
$(function () {
//Default usage.
$("#FirstName").WaterMark();
//Change color of Watermark.
$("#LastName").WaterMark(
{
WaterMarkTextColor: '#ff0000'
});
});
</script>
</head>
<body>
<table>
<tr>
<td>@Html.DisplayNameFor(m => m.FirstName)</td>
<td>@Html.TextBoxFor(m => m.FirstName, new { title = "Enter First Name" })</td>
</tr>
<tr>
<td>@Html.DisplayNameFor(m => m.LastName)</td>
<td>@Html.TextBoxFor(m => m.LastName, new { title = "Enter Last Name" })</td>
</tr>
</table>
</body>
</html>
Screenshot
![MVC @Html.TextBoxFor Watermark: Watermark Model TextBox using jQuery in ASP.Net MVC]()
Downloads
