Registration form with image upload in MVC using jquery Ajax

In this article on asp.net MVC, we will learn how to create a complete system of simple and custom registration forms with image uploads using an entity framework with jquery validation in MVC.

We will create the registration functionality using the entity framework. This article is perfect for those who are new to asp.net MVC and want to know the best way to register users with image upload control.

Let’s start by creating the mvc project, I also created a folder to store the downloaded image in.

Step 1

Let’s add an entity frame to work with databases by following the step description in the image

• Right-click on the template folder=>Add=>New item
• Select Data from the left menu and then the Ado Entity frame.

Step 2 – Create a controller

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using UploadFileMvc.Models ;

namespace UploadFileMvc.Controllers
{
public class AccountController : Controller
{
// GET : Account
public ActionResult Index()
{
DemoDBEntities db = new DemoDBEntities();
return View(db.TblCompanyUsers.ToList());
}
// Post:Registration
[HttpPost] public ActionResult UserRegistration()
{
try
{

// Save the form data
string FullName = Request.Form[Full Name];
string Email = Request.Form[Email];
string Password = Request.Form[Password];
if(!IsEmailExist(Email))
{
if (Request.Files.Count > 0) // check if the Request object contains a file
{
try
{
using (DemoDBEntities db = new DemoDBEntities())
{
HttpPostedFileBase file = Request.Files[0];
string fname = file.FileName;
// retrieve the full path to the folder and save the file there.
fname = Path.Combine(Server.MapPath(~/Images/), fname);
file.SaveAs(fname);
TblCompanyUser userobj = new TblCompanyUser
{
Email_Id = Email,
FullName = FullName,
ProfilePicture= /Images/+ file.FileName
};
db.TblCompanyUsers.Add(userobj);
if (db.SaveChanges() > 0)
{
//Set MVC and Login Authentication
return Json(User registered successfully !) ;
}
more
{
return Json(Something went wrong, try again later !);
}
}
}
catch (exception ex)
{
return Json(ex.Message);
}
}
else
{
return Json(Files not selected.);
}
}
else
{
return Json(Email already exists, try with another one!);
}

}
catch (exception e)
{
ModelState.AddModelError(, e.Message);
}
return View();
}
private bool IsEmailExist(string email)
{
bool IsEmailExist = false;
using (DemoDBEntities db = new DemoDBEntities())
{
int count = db.TblCompanyUsers.Where(a => a.Email_Id == email).Count();
if (count > 0)
{
IsEmailExist = true;
}
}
return IsEmailExist;
}
}
}

Let’s add the view and copy and paste the code below.

@model IEnumerable
@{
ViewBag.Title = Index;
}

Index

@foreach (var item in model){}

ID	Name	Email
@item.UserId	@item.FullName	@entry.email_id

Registration form with image upload in MVC with jquery Ajax

Name

E-mail

Password

Profile Fig.

 

Related Tags:

image upload in mvc using ajax,how to upload image in mvc using jquery,file upload in mvc using ajax,upload file using ajax,jquery file upload mvc,uploading both data and files in one form using ajax mvc,Privacy settings,How Search works,upload file and json data in the same post request using jquery ajax,jquery sending file with ajax to mvc controller