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 Watermark Model TextBox using jQuery in ASP.Net MVC Reviewed by NEERAJ SRIVASTAVA on 2:09:00 PM Rating: 5

No comments:

Powered by Blogger.