How to create CAPTCHA in MVC 5

As a developer you probably aware of CAPTCHA, It is a type of challenge-response test used in computing to determine whether or not the user is human [CAPTCHA]
In development time we want to implement some CAPTCHA functionalists in your website, Lets check How can we do that

Basic idea is

1. Create a image with some letters
2. Save that letters in session or cache 
3. Display our image in web page with textbox
4. Validate TextBox value and letter what we saved in session

Then How to create an Image?

Function to create image

 
        /// <summary>
        /// Create image Byte[]
        /// </summary>
        /// <returns></returns>
        public byte[] DrawByte()
        {
            byte[] returnByte = { };
            Bitmap bitmapImage = new Bitmap(150, 30, PixelFormat.Format32bppArgb);

            //
            // Here we generate random string
            string key = getRandomString();
            
            //
            // key string adding to Session
            HttpContext.Current.Session.Add(SessionKey, key);

            //
            // Creating image with key
            using (Graphics g = Graphics.FromImage(bitmapImage))
            {
                g.SmoothingMode = SmoothingMode.HighQuality;
                Rectangle rect = new Rectangle(0, 0, 150, 30);
                HatchBrush hBrush = new HatchBrush(HatchStyle.SmallConfetti, Color.LightGray, Color.White);
                g.FillRectangle(hBrush, rect);
                hBrush = new HatchBrush(HatchStyle.LargeConfetti, Color.Red, Color.Black);
                float fontSize = 20;
                Font font = new Font(FontFamily.GenericSerif, fontSize, FontStyle.Strikeout);
                float x = 10;
                float y = 1;
                PointF fPoint = new PointF(x, y);
                g.DrawString(key, font, hBrush, fPoint);

                using (MemoryStream ms = new MemoryStream())
                {
                    bitmapImage.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
                    returnByte = ms.ToArray();
                }
            }
            return returnByte;
        }

Now we can chck the function to create session value or random string

        /// <summary>
        /// Generate random string value
        /// </summary>
        /// <returns></returns>
        private string getRandomString() {

            string returnString = string.Empty;
            string letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

            Random rand = new Random();

            int length = rand.Next(5, 8);
            for (int i = 0; i < length; i++)
            {
                int pos = rand.Next(0, 62);
                returnString += letters[pos].ToString();
            }
            return returnString;
        }

Here I am usign one Controller to create Image.. check below for to see my Controller

namespace CaptchaMVC.Controllers
{
    public class CaptchaController : Controller
    {
        //
        // GET: /Captcha/
        public ActionResult Index()
        {
            CaptchaHelper captchaHelper = new CaptchaHelper();
            return File(captchaHelper.DrawByte(), "image/jpeg");
        }
 }
}

From the View you call

<div class="form-group">
            <span class="control-label col-md-2"></span>
                <div class="col-md-10">
                    <img src="@Url.Action("Index","Captcha")" alt="image" />
                </div>
        </div>

I this example I created a Person Controller and displaying and validating captcha image when someone create a new person. Here I am not including everything but you can download and check the whole code

//
        // POST: /Person/Create
        [HttpPost]
        public ActionResult Create(PersonViewModel person)
        {
            try
            {
                CaptchaHelper captchaHelper = new CaptchaHelper();
                bool success = captchaHelper.Verify(person.Captcha);
                if (success)
                { 
                    //captcha success
                }

                // TODO: Add insert logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

-- Happy Coding--
Download Sample

Paging In MVC 5 with Entity Framework

How to do Paging in MVC You can find lot of examples for paging in MVC with Entity Framework in internet. I am adding one more example. In this example you can see one partial page for paging control and ViewModel for called Pager. Here I am using AdventureWorks database Employee table to page Empoyees Following is ViewModel class, data that you need to pass to the view. Class constructor have IQueryable Datasource, It hold the data and return DataSource, TotalCount,PageSize currentpage and TotalPages. 

public class Pager<T>:List<T>
    {
        public int TotalPages { get; set; }
        public int CurrentPage { get; set; }
        public int PageSize { get; set; }
        public int TotalCount { get; set; }

        public Pager(IQueryable<T> dataSource, int pageIndex, int pageSize, int totalCount)
        {
            TotalCount = totalCount;
            CurrentPage = pageIndex;
            PageSize = pageSize;
            TotalPages = (int)Math.Ceiling(TotalCount / (double)PageSize);
            this.AddRange(dataSource);
        }
    }

Model and DataContext class

 public partial class EmployeeContext : DbContext
    {
        public EmployeeContext()
            : base("name=AdventureWorksConnectionString")
        {
        }

        public virtual DbSet<DimEmployee> DimEmployees { get; set; }
        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {
        }
    }

In Model class I am not included all the columns, Just added only columns I need..

[Table("DimEmployee")]
    public partial class DimEmployee
    {
        [Key]
        public int EmployeeKey { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Title { get; set; }
        public string EmailAddress { get; set; }
        public string DepartmentName { get; set; }
    }

EmployeeContext class return Data from database, I already Installed Entity Framework from Package Manager, But in this example I am calling one stored procedure to get the data using EF. Its for I am not taking the whole data from database.. Just taking what I want to display. Here we need to pass the limit of data we want.

USE [AdventureWorksDW2008R2]
GO
/****** Object:  StoredProcedure [dbo].[getEmployeeByPageNumber]    Script Date: 08/12/2014 14:24:29 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- Author:  <Raju Melveetilpurayil>
-- Create date: <Create Date,,>
-- Description: <Get rows by row between limit>
-- =============================================
ALTER PROCEDURE [dbo].[getEmployeeByPageNumber]
 -- Add the parameters for the stored procedure here
 @Start INT,
 @End INT,
 @TotalCount INT OUTPUT
AS
BEGIN
 -- SET NOCOUNT ON added to prevent extra result sets from
 -- interfering with SELECT statements.
 SET NOCOUNT ON;
SELECT @TotalCount=COUNT(*) FROM dbo.DimEmployee
SELECT [EmployeeKey]
      ,[FirstName]
      ,[LastName]
      ,[Title]
      ,[EmailAddress]
      ,[DepartmentName] FROM 
(
 SELECT ROW_NUMBER() OVER(ORDER BY EmployeeKey) ROW_NUM, * FROM DimEmployee
 ) AS K
 WHERE ROW_NUM >@Start AND ROW_NUM <=@End
  
END

Now we can see our MVC pages. Here is a partial page it only meant to display paging controls. The advantage of this control and model are generic, so we can pass any datasouce to do paging.

   @{
         double _pageCount = ((double)((Model.TotalCount-1) / Model.PageSize));
         int pageCount = _pageCount - (Math.Round(_pageCount)) != 0 ? (int)(_pageCount + 1) : (int)_pageCount;

         //
         // disable class for next and previous button if there is no previous and next
         string classNameForNext = Model.CurrentPage == _pageCount ? "disabled" : string.Empty;
         string classNameForPrevious = Model.CurrentPage == 1 ? "disabled" : string.Empty;
    }

        @if (classNameForPrevious == string.Empty){
         @Html.ActionLink("« Prev", "Index", new { page = (Model.CurrentPage - 1) })}
        else{
        « Prev}

    
@for (int pages = 1; pages <= pageCount; pages++)
    {
        //
        //adding active class to current page
        string active = "";
        if (pages == Model.CurrentPage) { active = "active"; }
@Html.ActionLink(pages.ToString(), "Index", new { page = pages })
}

        @if (classNameForNext == string.Empty){
            @Html.ActionLink("Next »", "Index", new { page = (Model.CurrentPage + 1) })}
        else{
           Next »
        }
    

form the Index.cshtml we pass Model to the partial page. From the Model partial page read class properties TotalPage,CurrentPage.. and generate page numbers and next and previous buttons Passing Model to partial Page

<tr>
     <td colspan="5">
        @Html.Partial("_PagingPartial",Model)
     </td>
</tr>

Ok Now we can see the whole Index.cshtml

@model EFMVCSample.ViewModel.Pager<EFMVCSample.Models.DimEmployee>
@{
    ViewBag.Title = "Employee";
}
<table class="table">
         <tr>
            <th>FirstName</th>
            <th>LastName</th>
            <th>Title</th>
            <th>EmailAddress</th>
            <th>DepartmentName</th>
        </tr>
            @foreach (EFMVCSample.Models.DimEmployee employee in Model.AsQueryable().ToList())
            {
                <tr>
                    <td>@employee.FirstName</td>
                    <td>@employee.LastName</td>
                    <td>@employee.Title</td>
                    <td>@employee.EmailAddress</td>
                    <td>@employee.DepartmentName</td>
                </tr>
            }
    <tr>
        <td colspan="5">
            @Html.Partial("_PagingPartial",Model)
        </td>
    </tr>
</table>

So we can see PagingController to see how controller works

public class PagingController : Controller
    {
        private List<DimEmployee> AllEmpoyees { get; set; }

        //
        // GET: /Paging/
        public ActionResult Index(int? page)
        {
            int pageno = 0;
            pageno = page == null ? 1 : int.Parse(page.ToString());

            int pageSize = 15;
            int totalCount = 0;



            using (var db = new EmployeeContext())
            {
                int limitEnd = pageno * pageSize;
                int limitStart = limitEnd - pageSize;

                //
                //calling stored procedure to get the total result count

                var start = new SqlParameter("@Start", limitStart);
                var end = new SqlParameter("@End", limitEnd);

                //
                // setting stored procedure OUTPUT value
                // This return total number of rows, and avoid two database call for data and total number of rows 
                var spOutput = new SqlParameter
                {
                    ParameterName = "@TotalCount",
                    SqlDbType = System.Data.SqlDbType.BigInt,
                    Direction = System.Data.ParameterDirection.Output
                };

                //
                //calling stored procedure to get paged data.
                AllEmpoyees = db.Database.SqlQuery<DimEmployee>(
                                                "getEmployeeByPageNumber @Start,@End,@TotalCount out",
                                                start, end, spOutput)
                                                .ToList();

                //
                // setting total number of records
                totalCount = int.Parse(spOutput.Value.ToString());

            }
            Pager<DimEmployee> pager = new Pager<DimEmployee>(AllEmpoyees.AsQueryable(), pageno, pageSize, totalCount);
            return View(pager);

        }
 }

Depend on page number, Controller create pageno,pageSize and call stored procedure to get data between limit.

 var spOutput = new SqlParameter
                {
                    ParameterName = "@TotalCount",
                    SqlDbType = System.Data.SqlDbType.BigInt,
                    Direction = System.Data.ParameterDirection.Output
                };

//
//calling stored procedure to get paged data.
AllEmpoyees = db.Database.SqlQuery<DimEmployee>("getEmployeeByPageNumber @Start,@End,@TotalCount out",start, end, spOutput).ToList();

Download example

CodeProject

How to get stored procedure OUTPUT Parameters in Entity Framework

Calling stored procedure from Entity framework code first is not an issue. Its explained very well in Entity Framework tutorials as well [Here] , Let see how to call custom stored procedure from C#


This is my stored procedure to return total number of employes from database

USE [AdventureWorksDW2008R2]
GO
/****** Object:  StoredProcedure [dbo].[getEmployeeCount] 
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- Author: Raju Melveetilpurayil
-- Create date: 
-- Description: Get total number of employes from AdventureWorksDW2008R2 database
-- =============================================
ALTER PROCEDURE [dbo].[getEmployeeCount] 
AS
BEGIN
 SET NOCOUNT ON;

 SELECT COUNT(*)AS EmpCount FROM dbo.DimEmployee
END

--
--

Now we can check how to call above stored procedure from C#

using (var db = new EmployeeContext())
{
 var totalNumberOfEmployes = db.Database.SqlQuery<int>("getEmployeeCount").ToList();
 int totalNumber = totalNumberOfEmployes.FirstOrDefault<int>();
}  

So  we can call a stored procedure with some parameter including OUTPUT parameter

USE [AdventureWorksDW2008R2]
GO
/****** Object:  StoredProcedure [dbo].[getEmployeeByPageNumber]    Script Date: 08/10/2014 22:25:18 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- Author:  <Raju Melveetilpurayil>
-- Create date: <Create Date,,>
-- Description: <Get rows by row between limit>
-- =============================================
ALTER PROCEDURE [dbo].[getEmployeeByPageNumber]
 -- Add the parameters for the stored procedure here
 @Start INT,
 @End INT,
 @TotalCount INT OUTPUT
AS
BEGIN
 -- SET NOCOUNT ON added to prevent extra result sets from
 -- interfering with SELECT statements.
 SET NOCOUNT ON;
SELECT @TotalCount=COUNT(*) FROM dbo.DimEmployee
SELECT [EmployeeKey]
      ,[FirstName]
      ,[LastName]
      ,[Title]
      ,[EmailAddress]
      ,[DepartmentName] FROM 
(
 SELECT ROW_NUMBER() OVER(ORDER BY EmployeeKey) ROW_NUM, * FROM DimEmployee
 ) AS K
 WHERE ROW_NUM >@Start AND ROW_NUM <=@End
  
--
--
END

Actually the above script I am using for to get data between some limit.. I will use this same script in my later articles for How to do paging in MVC 5 We need to pass one SqlParameter parameter and set its direction to System.Data.ParameterDirection.Output, after executing the function SqlParameter hold the OUTPUT data.

var spOutput = new SqlParameter {
                    ParameterName = "@TotalCount",
                    SqlDbType = System.Data.SqlDbType.BigInt,
                    Direction = System.Data.ParameterDirection.Output 
                };

we pass other parameter like normal SqlParameter

var start = new SqlParameter("@Start", limitStart);
var end = new SqlParameter("@End", limitEnd);

db.Database.SqlQuery help us to call raw Sql from entity framework The whole code

//
// calling stored procedure to get the total result count

var start = new SqlParameter("@Start", limitStart);
var end = new SqlParameter("@End", limitEnd);
               
//
// setting stored procedure OUTPUT value
// This return total number of rows, and avoid two database call for data and total number of rows 
var spOutput = new SqlParameter {
                    ParameterName = "@TotalCount",
                    SqlDbType = System.Data.SqlDbType.BigInt,
                    Direction = System.Data.ParameterDirection.Output 
                };
//
//calling stored procedure to get paged data.
  List<DimEmployee> AllEmpoyees = db.Database.SqlQuery<DimEmployee>(
                               "getEmployeeByPageNumber @Start,@End,@TotalCount out",
                                start, end, spOutput)
                                .ToList();
//
// setting total number of records
totalCount = int.Parse(spOutput.Value.ToString());


//
//

Happy programming ..

How to return JSON from WebAPI 2

Nowadays JSON is more common than XML, Most of the JavaScript frameworks work well with JSON contents, AngularJS is an excellent example. Default WebAPI have   IEnumerable<string>  Get() and string Get(int id) methods

Take a look

public class DefaultController : ApiController
    {
        // GET api/default2
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET api/default2/5
        public string Get(int id)
        {
            return "value";
        }

        // POST api/default2
        public void Post([FromBody]string value)
        {
        }

        // PUT api/default2/5
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE api/default2/5
        public void Delete(int id)
        {
        }
    }

If you wish to return a JSON instead of string from WebAPI 2 may face some issues, So How can it resolved? You can return HttpResponseMessage instead of string or IEnumerable.. If you want to read more check this out Two ways to work with HTTP responses in ApiController Below code will return JSON string for you

       [Route("api/Default/GetProductLookup/{id}")]
        public HttpResponseMessage GetProductLookup(string id)
        {
            string json = "Your JSON String";
            var response = Request.CreateResponse(HttpStatusCode.OK);
            response.Content = new StringContent(json, Encoding.UTF8, "application/json");
            return response;
        }

Here is the whole class

public class DefaultController : ApiController
    {
        // GET api/default2
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET api/default2/5
        public string Get(int id)
        {
            return "value";
        }

        [Route("api/Default/GetProductLookup/{id}")]
        public HttpResponseMessage GetProductLookup(string id)
        {
            string json = "Your JSON String";
            var response = Request.CreateResponse(HttpStatusCode.OK);
            response.Content = new StringContent(json, Encoding.UTF8, "application/json");
            return response;
        }

        // POST api/default2
        public void Post([FromBody]string value)
        {
        }

        // PUT api/default2/5
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE api/default2/5
        public void Delete(int id)
        {
        }
    }

How to Add Json MIME type in IIS 7.5

Today .NET Web Development and Tools group at Microsoft released Customer Tech Preview (CTP2) release of Visual Studio 2013 Update 2 contains a new JSON editor. "New JSON editor features in Visual Studio 2013 Update 2 CTP2"

So I Installed CTP2 updated for my visual studio 2013 to see how JSON template works and all.

{
   "Person":[
      {
         "FirstName":"Raju",
         "LastName":"Melveetilpurayil",
         "Languages":[
            {
               "id":"1",
               "name":"C#"
            },
            {
               "id":"2",
               "name":"Javascript"
            },
            {
               "id":"3",
               "name":"C++"
            }
         ]
      }
   ]
}

It was ok. but when I tried to read my json file from browser (localhost url)  I am started getting some some errors, I knew I got one exception because last day I got my laptop after repair, everything is new and ready for first run, I do not installed IIS on  my machine.

This was the exception 
HTTP Error 404.3 - Not Found The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map.  Installed IIS 7.5 and Added MIME type for JSON, default there is no JOSN type in IIS 7.5

How To Add MIME Type In IIS 7.5

1: Open IIS  Manager [ in RUN  type inetmgr] press Enter

2: Click on MIME Types

3: Right click and Select Add

DONE, You added MIME type for JSON in IIS.

I ran my JSON file again and still got some other exceptions.  I started goggling, finally I found Solution that we need to give to run JSON
To allow the IIS to serve JSON files, your need to add some configuration in web.config:

<system.webServer>
      <staticContent>
        <mimeMap fileExtension=".json" mimeType="application/json" />
      </staticContent>
</system.webServer>