How to create Registration and Login Module with Razor View Engine in Asp.Net MVC using binary format image file ~ Microsoft .Net Expert Call@+91-9555484663

How to create Registration and Login Module with Razor View Engine in Asp.Net MVC 4.0 using Upload Image without Image Handler

Note – Here we will create a Login Registration WelCome module using Razor View Engine with Ado.Net Entity Model. Then we will explain Registration form with file upload, where we will use how to save binary format data in SQL server and also retrieve it. After that we will also discuss the Login and Welcome page. Further we will also teach how to fetch the image saved in the database with binary format.

-- sql query---------

CREATE TABLE Emp_Info

(

Name varchar(50),

Gender varchar(50),

EmailId varchar(50) primary key ,

Password varchar(50),

MobileNo varchar(50),

UserImage varbinary (max)

)

--******************************----

1. First we take MVC based Application named LoginRegistration and using Ado.Net Entity Data Model like this

Then we will add class which name is Employee for View Model respective data mentioned below

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.Linq;

using System.Web;

namespace LoginRegistration.Models

{

public class Employee

{

[Required(ErrorMessage = "Please enter Name")]

[RegularExpression(@"^[a-zA-Z\s]+$", ErrorMessage = "Name should be proper format Like-:Kush")]

public string Name { get; set; }

[Required(ErrorMessage = "Please enter Gender")]

[StringLength(6, MinimumLength = 4, ErrorMessage = "your enter Male or FeMale have 6 string length")]

public string Gender { get; set; }

[Required(ErrorMessage = "Please enter EmailId")]

[EmailAddress(ErrorMessage = "Please enter valid EmailId")]

public string EmailId { get; set; }

[Required(ErrorMessage = "Please enter Password")]

public string Password { get; set; }

[Required(ErrorMessage = "Please enter Confirm Password")]

[Compare("Password", ErrorMessage = "Password and Confirm Password is not match")]

public string ConfirmPassword { get; set; }

[Required(ErrorMessage = "Please enter MobileNo")]

[RegularExpression(@"^[789]\d{9}$", ErrorMessage = "Please enter Mobile No Like -9555484663")]

public string MobileNo { get; set; }

[Required(ErrorMessage = "Please uploade image")]

[FileExtensions(Extensions = ".jpg,.png", ErrorMessage = "Please upload only jpg and png file")]

public HttpPostedFileBase UserImage { get; set; }

}

We will create HomeController with ActionView RegistrationPage and add strongly type View with Employee View Model. For more details kindly follow below mentioned snapshot

################### Registration Page ###################

Code for RegistrationPage.cshtml…………………………..

@model LoginRegistration.Models.Employee

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>RegistrationPage</title>

</head>

<body>

@using (Html.BeginForm("RegistrationPage", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))

{

@Html.ValidationSummary(true)

<legend>Employee</legend>

@Html.LabelFor(model => model.Name)

</div>

@Html.EditorFor(model => model.Name)

@Html.ValidationMessageFor(model => model.Name)

</div>

@Html.LabelFor(model => model.Gender)

</div>

@Html.EditorFor(model => model.Gender)

@Html.ValidationMessageFor(model => model.Gender)

</div>

@Html.LabelFor(model => model.EmailId)

</div>

@Html.EditorFor(model => model.EmailId)

@Html.ValidationMessageFor(model => model.EmailId)

</div>

@Html.LabelFor(model => model.Password)

</div>

@Html.PasswordFor(model => model.Password)

@Html.ValidationMessageFor(model => model.Password)

</div>

@Html.LabelFor(model => model.ConfirmPassword)

</div>

@Html.PasswordFor(model => model.ConfirmPassword)

@Html.ValidationMessageFor(model => model.ConfirmPassword)

</div>

@Html.LabelFor(model => model.MobileNo)

</div>

@Html.EditorFor(model => model.MobileNo)

@Html.ValidationMessageFor(model => model.MobileNo)

</div>

@Html.LabelFor(model => model.UserImage)

</div>

@Html.TextBoxFor(model => model.UserImage ,new { type="file" })

@Html.ValidationMessageFor(model => model.UserImage)

@Html.ValidationMessage("CustomError")

</div>

<p>

@ViewBag.msg

</p>

</fieldset>

}

<div>

@Html.ActionLink("Login Page ?", "LoginPage")

</div>

</body>

</html>

####################### end code ###################

####################### Start Code ###################

Code for LoginPage.cshtml…………………………..

@model LoginRegistration.Models.Employee

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>LoginPage</title>

</head>

<body>

@using (Html.BeginForm()) {

@Html.ValidationSummary(true)

<tr>

<td>EmailId</td>

<td>@Html.TextBox("EmailId")

@Html.ValidationMessageFor(model => model.EmailId)</td>

</tr>

<tr>

<td>Password</td>

<td>@Html.Password("Password")

@Html.ValidationMessageFor(model => model.Password)</td>

</tr>

@Html.ActionLink("New User","RegistrationPage")</td></tr>

<tr><td style="color:red">@ViewBag.msg</td></tr>

</table>

}

</body>

</html>

####################### end Code ###################

####################### WelCome ###################

@model LoginRegistration.Models.Emp_Info

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>WelCome</title>

{

color:#0094ff;

font-family:Verdana;

margin-left:15px;

}

</style>

</head>

<body>

<div>

@if(Model !=null)

{

<tr><td><b>Name</b></td><td>@Model.Name</td></tr>

<tr><td><b>Gender</b></td><td>@Model.Gender</td></tr>

<tr><td><b>EmailId</b></td><td>@Model.EmailId</td></tr>

<tr><td><b>Mobile No</b></td><td>@Model.MobileNo</td></tr>

<tr><td><b>Photo</b></td><td>

</table>

}

</div>

</body>

</html>

####################### end code ###################

####################### Show All Employee ###################

@model List<LoginRegistration.Models.Emp_Info>

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>ShowAllEmp</title>

</head>

<body>

<tr><th>Name</th><th>Gender</th><th>EmailId</th><th>MobileNo</th><th>User Image</th></tr>

@for (int i = 0; i < Model.Count(); i++)

{

<tr><td>@Model[i].Name</td><td>@Model[i].Gender</td><td>@Model[i].EmailId</td><td>@Model[i].MobileNo</td>

<td>

}

</table>

</body>

</html>

###################### End Code ###################

############Code for HomeController.cs #################

using LoginRegistration.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace LoginRegistration.Controllers

{

public class HomeController : Controller

{

// GET: /Home/

public ActionResult Index()

{

return View();

}

// database object........

testEntities1 database = new testEntities1();

// Registration Page....

public ActionResult RegistrationPage()

{

return View();

}

[HttpPost]

public ActionResult RegistrationPage(Employee emp)

{

//if (!(emp.UserImage.ContentType == "image/jpeg" || emp.UserImage.ContentType == "image/gif"))

//{

// ModelState.AddModelError("UserImage", "Please upload jpg and gif file only");

//}

if (emp.UserImage.ContentLength > (20 * 1024))

{

ModelState.AddModelError("UserImage", " ");

ModelState.AddModelError("CustomError", "File must be less 20 kb ");

}

else

{

byte[] data = new byte[emp.UserImage.ContentLength];

emp.UserImage.InputStream.Read(data, 0, emp.UserImage.ContentLength);

Emp_Info employee = new Emp_Info

{

Name = emp.Name,

Gender = emp.Gender,

EmailId = emp.EmailId,

Password = emp.Password,

MobileNo = emp.MobileNo,

UserImage = data

};

database.Emp_Info.Add(employee);

database.SaveChanges();

ViewBag.msg = "Data saved Suceessfully";

}

return View();

}

// Login Page............

public ActionResult LoginPage()

{

return View();

}

[HttpPost]

public ActionResult LoginPage(FormCollection fc)

{

string emailid = fc["EmailId"].ToString();

string pass = fc["Password"].ToString();

//Emp_Info emp = (from u in database.Emp_Info where u.EmailId.Equals(emailid) select u).FirstOrDefault();

Emp_Info emp = database.Emp_Info.Where(m => m.EmailId == emailid).FirstOrDefault();

if (emp == null)

{

ViewBag.msg = "User is invalid";

}

else if (!emp.Password.Equals(pass))

{

ViewBag.msg = "Invalid Password please try again";

}

else

{

return View("WelComePage", emp);

}

return View();

}

// WelCome Page

public ActionResult WelComePage()

{

return View();

}

// Show All Employee

public ActionResult ShowAllEmp()

{

return View(database.Emp_Info.ToList());

}

Note: Please must change priority of Page in your MVC Application if you want to set Default page to LoginPage .In Visual Studio 10, 12, 13 there are need to change but now if you are working with latest IDE Visual Studio 2015 there are no need to it

Step

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Web.Routing;

namespace LoginRegistration

{

public class RouteConfig

{

public static void RegisterRoutes(RouteCollection routes)

{

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute(

name: "Default",

url: "{controller}/{action}/{id}",

defaults: new { controller = "Home", action = "LoginPage", id = UrlParameter.Optional }

);

}

Result:

Microsoft .Net Expert Call@+91-9555484663

Friday 22 July 2016

How to create Registration and Login Module with Razor View Engine in Asp.Net MVC using binary format image file

1 comments:

Microsoft .Net Expert Call@+91-9555484663

Friday 22 July 2016

How to create Registration and Login Module with Razor View Engine in Asp.Net MVC using binary format image file

1 comments:

Social Profiles