Translate

Tuesday, 12 May 2015

Apply watermark text for text boxes in HTML in different Ways


we can apply water mark to html text boxes.

Using watermark plugin

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="~/Scripts/WaterMark.min.js"></script>

    <script>
        $(document).ready(function () {
            $("#txtName,#Email,#Mobile").WaterMark();
        });
    </script>
<body>
<table>

        <tr>
            <td>Name:</td>
            <td>
                <input type="text" id="txtName" title="Enter Name" />
            </td>
        </tr>
        <tr>
            <td>Email:</td>
            <td>
                <input type="text" id="Email" title="Enter Email" /></td>
        </tr>
        <tr>
            <td>Mobile:</td>
            <td>
                <input type="text" id="Mobile" title="Enter Mobile" /></td>
        </tr>
    </table>

</body>





using naormal place holder

<body>

<form action="demo_form.asp">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="Submit">
</form>

</body>

Monday, 4 May 2015

simple Captcha in MVC

Simple Captcha In MVC :

In Model:
 public class SubscribeModel
    {
        //model specific fields
        [Required]
        [Display(Name = "How much is the sum")]
        public string Captcha { get; set; }

    }

In Controller:

Name Spaces in controller:

using System.Drawing;
using System.IO;
using System.Drawing.Drawing2D;
using System.Drawing.Text;

using JQGridExample.Models;


public ActionResult Index()
   {
            return View();

   }

   public ActionResult CaptchaImage(string prefix, bool noisy = true)
        {
            var rand = new Random((int)DateTime.Now.Ticks);
            //generate new question
            int a = rand.Next(10, 99);
            int b = rand.Next(0, 9);
            var captcha = string.Format("{0} + {1} = ?", a, b);

            //store answer
            Session["Captcha" + prefix] = a + b;

            //image stream
            FileContentResult img = null;

            using (var mem = new MemoryStream())
            using (var bmp = new Bitmap(130, 30))
            using (var gfx = Graphics.FromImage((Image)bmp))
            {
                gfx.TextRenderingHint = TextRenderingHint.ClearTypeGridFit;
                gfx.SmoothingMode = SmoothingMode.AntiAlias;
                gfx.FillRectangle(Brushes.White, new Rectangle(0, 0, bmp.Width, bmp.Height));

                //add noise
                if (noisy)
                {
                    int i, r, x, y;
                    var pen = new Pen(Color.Yellow);
                    for (i = 1; i < 10; i++)
                    {
                        pen.Color = Color.FromArgb(
                        (rand.Next(0, 255)),
                        (rand.Next(0, 255)),
                        (rand.Next(0, 255)));

                        r = rand.Next(0, (130 / 3));
                        x = rand.Next(0, 130);
                        y = rand.Next(0, 30);

                        gfx.DrawEllipse(pen,x-r, y-r,r,r);
                    }
                }

                //add question
                gfx.DrawString(captcha, new Font("Tahoma", 15), Brushes.Gray, 2, 3);

                //render as Jpeg
                bmp.Save(mem, System.Drawing.Imaging.ImageFormat.Jpeg);
                img = this.File(mem.GetBuffer(), "image/Jpeg");
            }

            return img;

        }
        [HttpPost]
        public ActionResult Index(SubscribeModel model)
        {
            //validate captcha
            if (Session["Captcha"] == null || Session["Captcha"].ToString() != model.Captcha)
            {
                ModelState.AddModelError("Captcha", "Wrong value of sum, please try again.");
                //dispay error and generate a new captcha
                return View(model);
            }
            return View("ThankYouPage");
        }
        public ActionResult ThankYouPage()
        {
            return View();

        }



In View:

@model JQGridExample.Models.SubscribeModel

@{
    ViewBag.Title = "CaptchaImage";
}

<h2>CaptchaImage</h2>
@using(Html.BeginForm()){
    <table>
        <tr>
            <td> @Html.LabelFor(model => model.Captcha)
    <a href="@Url.Action("Index","Add")">
        <img alt="Captcha" src="@Url.Action("CaptchaImage")" style="" />
    </a> </td>
            <td> @Html.TextBoxFor(model => model.Captcha)
    @Html.ValidationMessageFor(model => model.Captcha) </td>
        </tr>
        <tr><td><input type="submit" value="submit" /></td</tr>

    </table>

}

Thursday, 30 April 2015

Vertual Keyboard in mvc using jquery

Vertual Keyboard in mvc using jquery shown below



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Virtual Keyboard Example</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link href="css/keyboard.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.keyboard.js"></script>
    <script src="js/jquery.keyboard.extension-typing.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#txtkeyboard').keyboard({
        autoAccept:true
    })
     .addTyping();
        $('#txtNumkeyboard').keyboard({
            layout: 'num',
            restrictInput: true,
            preventPaste: true,
            autoAccept: true
        })
        .addTyping();
    });
</script>
</head>
<body>
<table>
<tr>
<td><b>Keyboard Text:</b></td><td> <input type="text" id="txtkeyboard" /></td>
</tr>
<tr>
<td><b>Numberpad Text:</b></td>
<td><input type="text" id="txtNumkeyboard" /></td>
</tr>
</table>
</body>
</html>

Output: