Watermark Model TextBox using jQuery in ASP.Net MVC
In this article, we are creating watermark effect on TextBox in MVC. Watermark model is instructing to the user and make easier and friendly application. If you want to validate the textbox or more understand this article then you must Data Annotation
Model:-
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
namespace MVCCODESOLUTIONS.Models
{
public class DataAnnotation
{
[Display(Name = "Name:")]
public string Name { get; set; }
[Display(Name = "Mobile:")]
public string Mobile { get; set; }
}
}
Controller:-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MVCCODESOLUTIONS.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
}
View:-
@model MVCCODESOLUTIONS.Models.DataAnnotation
@{
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 () {
$("#Name").WaterMark();
$("#Mobile").WaterMark();
});
</script>
</head>
<body>
<table>
<tr>
<td>@Html.DisplayNameFor(m => m.Name)</td>
<td>@Html.TextBoxFor(m => m.Name, new { title = "Enter Your Name" })</td>
</tr>
<tr>
<td>@Html.DisplayNameFor(m => m.Mobile)</td>
<td>@Html.TextBoxFor(m => m.Mobile, new { title = "Enter Your Mobile " })</td>
</tr>
</table>
</body>
</html>
Out-Put:-
Note you have needed to download application
watermark.js
Watermark Model TextBox using jQuery in ASP.Net MVC
Reviewed by NEERAJ SRIVASTAVA
on
2:09:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
2:09:00 PM
Rating:
No comments: