Red: CRUD Operation With ASP.NET Core 3.1

This demo is based on MVC Core CRUD in this we will perform a simple CRUD operation with database using Entity Framework and save master data to database when application start.

Key Features Point: -

1. Controller Employee

2. Custom Validator DOBValidationAttribute.cs

3. Database EmployeeDbContext.cs

4. Models-Domain (CityModel.cs, DepartmentModel.cs, EmployeeModel.cs, GenderModel.cs) & SeedData.cs

5. Repository (IEmployeeRepository.cs, EmployeeRepository.cs)

6. Models-View (EmployeeViewModel.cs)

7. Views

To Do: -

1. Install following packages using Manage NuGet Packages… manager

1. Microsoft.EntityFrameworkCore --To use EF

2. Microsoft.EntityFrameworkCore.Design --To Enable Scaffolding

3. Microsoft.EntityFrameworkCore.SqlServer --To Enable Sql Server

4. Microsoft.EntityFrameworkCore.Tools --To Enable Migration command

2. Configure connection string in appsettings.json

4. Create CustomValidationAttribute, Database, Repository & ViewModels folder

5. Register database in Startup.cs using DI

6. Register repository in Startup.cs using DI

7. Change default route Home controller to Employee controller in Startup.cs

8. Attach SeedData.cs in Program.cs main method

9. Create images folder inside the wwwroot and add noimage.jpg file

10. Install jqueryui using Client-Side Library... manager

Migration Command: -

1. Add-Migration InitDbCreate

2. Update-Database

3. Remove-migration

Let’s Start

Step 1: - Launch Visual Studio 2019 => Click on Create a new project from the list

Step 2: - Choose ASP.NET Core Web Application from the list

Step 3: - Type Project name MVCCoreCRUD => Click on Create

Step 4: - Choose Web Application (Model-View-Controller) from the list

Step 5: - Install following packages using Manage NuGet Packages… manager => Right click on Dependencies => Click on Manage NuGet Packages… => Search Package & Install

1.       Microsoft.EntityFrameworkCore --To use EF
2.       Microsoft.EntityFrameworkCore.Design --To Enable Scaffolding
3.       Microsoft.EntityFrameworkCore.SqlServer --To Enable Sql Server

4. Microsoft.EntityFrameworkCore.Tools --To Enable Migration command

Step 6: - Right click on Project Root folder => Add => New folder => Type name Database

Step 7: - Right Click on Database folder => Add => Click New Items... => Expand Visual C# from left pane => Select Class from middle pane => Type EmployeeDbContext.cs in the Name box => Click Add => Copy Past following code in EmployeeDbContext.cs file

using Microsoft.EntityFrameworkCore;
using MVCCoreCRUD.Models;

namespace MVCCoreCRUD.Database
{
  public class EmployeeDbContext : DbContext
  {
  public EmployeeDbContext(DbContextOptions<EmployeeDbContext> options): base(options)
  {
  }

  public DbSet<EmployeeModel> Employee { get; set; }
  public DbSet<DepartmentModel> Department { get; set; }
  public DbSet<CityModel> City { get; set; }
  public DbSet<GenderModel> Gender { get; set; }
  }

}

Step 8: - Right click on Project Root folder => Add => New folder => Type name CustomValidationAttribute

Step 9: - Right click on CustomValidationAttribute folder => Add => Click New Items... => Expand Visual C# from left pane => Select Class from middle pane => Type DOBValidationAttribute.cs in the Name box => Click Add => Copy Past following code in DOBValidationAttribute.cs file

using System;
using System.ComponentModel.DataAnnotations;

namespace MVCCoreCRUD.CustomValidationAttribute
{
  public class DOBValidationAttribute : ValidationAttribute
  {
  protected override ValidationResult IsValid(object value, ValidationContext validationContext)
  {
  DateTime dob = Convert.ToDateTime(value);
  if (dob <= DateTime.Now.AddYears(-18))
  return ValidationResult.Success;
  else
  return new ValidationResult(ErrorMessage);
  }
  }

}

Step 10: - Right click on Models folder => Add => Click New Items... => Expand Visual C# from left pane => Select Class from middle pane => Type CityModel.cs in the Name box => Click Add => Copy Past following code in CityModel.cs file

using System.ComponentModel.DataAnnotations.Schema;

namespace MVCCoreCRUD.Models
{
[Table("City")]
  public class CityModel
  {
  public int Id { get; set; }
  public string Name { get; set; }
  }

}

Step 11: - Right click on Models folder => Add => Click New Items... => Expand Visual C# from left pane => Select Class from middle pane => Type DepartmentModel.cs in the Name box => Click Add => Copy Past following code in DepartmentModel.cs file

using System.ComponentModel.DataAnnotations.Schema;

namespace MVCCoreCRUD.Models
{
[Table("Department")]
  public class DepartmentModel
  {
  public int Id { get; set; }
  public string Name { get; set; }
  }

}

Step 12: - Right click on Models folder => Add => Click New Items... => Expand Visual C# from left pane => Select Class from middle pane => Type EmployeeModel.cs in the Name box => Click Add => Copy Past following code in EmployeeModel.cs file

using System;
using System.ComponentModel.DataAnnotations.Schema;

namespace MVCCoreCRUD.Models
{
[Table("Employee")]
  public class EmployeeModel
  {
  public int Id { get; set; }
  public string Name { get; set; }
  public int Gender { get; set; }
  public DateTime DOB { get; set; }
  public string EmailId { get; set; }
  public string MobileNo { get; set; }
  public int Department { get; set; }
  public int City { get; set; }
  public string PhotoPath { get; set; }
  }

}

Step 13: - Right click on Models folder => Add => Click New Items... => Expand Visual C# from left pane => Select Class from middle pane => Type GenderModel.cs in the Name box => Click Add => Copy Past following code in GenderModel.cs file

using System.ComponentModel.DataAnnotations.Schema;

namespace MVCCoreCRUD.Models
{
[Table("Gender")]
  public class GenderModel
  {
  public int Id { get; set; }
  public string Name { get; set; }
  }

}

Step 14: - Right click on Models folder => Add => Click New Items... => Expand Visual C# from left pane => Select Class from middle pane => Type SeedData.cs in the Name box => Click Add => Copy Past following code in SeedData.cs file

using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
using MVCCoreCRUD.Database;
using System;
using System.Linq;

namespace MVCCoreCRUD.Models
{
  public static class SeedData
  {
  public static void Initialize(IServiceProvider serviceProvider)
  {
  using (var context = new EmployeeDbContext(
  serviceProvider.GetRequiredService<
  DbContextOptions<EmployeeDbContext>>()))
  {
  // Look for any gender, Department, City.
  if (context.Gender.Any() && context.Department.Any() && context.City.Any())
  {
  return;   // DB has been seeded
  }

  if (!context.Gender.Any())
  {
  context.Gender.AddRange(
  new GenderModel { Name = "Male" },
  new GenderModel { Name = "Female" },
  new GenderModel { Name = "Other" }
  );
  }

  if (!context.Department.Any())
  {
  context.Department.AddRange(
  new DepartmentModel { Name = "IT" },
  new DepartmentModel { Name = "Admin" },
  new DepartmentModel { Name = "Finance" },
  new DepartmentModel { Name = "Sales" }
  );
  }

  if (!context.City.Any())
  {
  context.City.AddRange(
  new CityModel { Name = "Mumbai" },
  new CityModel { Name = "Delhi" },
  new CityModel { Name = "Kolkatta" },
  new CityModel { Name = "Chennai" }
  );
  }
  context.SaveChanges();
  }
  }
  }

}

Step 15: - Right click on Project Root folder => Add => New folder => Type name Repository

Step 16: - Right click on Repository folder => Add => Click New Items... => Expand Visual C# from left pane => Select Interface from middle pane => Type IEmployeeRepository.cs in the Name box => Click Add => Copy Past following code in IEmployeeRepository.cs file

using MVCCoreCRUD.Models;
using System.Collections.Generic;

namespace MVCCoreCRUD.Repository
{
  public interface IEmployeeRepository
  {
  List<GenderModel> GetGender();
  List<DepartmentModel> GetDepartment();
  List<CityModel> GetCity();
  List<EmployeeModel> GetEmployee();
EmployeeModel GetEmployeeById(int? id);
  int UpdateEmployee(int? id, EmployeeModel model);
  int DeleteEmployee(int? id, EmployeeModel model);
  int AddEmployee(EmployeeModel model);
  }

}

Step 17: - Right click on Repository folder => Add => Click New Items... => Expand Visual C# from left pane => Select Class from middle pane => Type EmployeeRepository.cs in the Name box => Click Add => Copy Past following code in EmployeeRepository.cs file

using Microsoft.EntityFrameworkCore;
using MVCCoreCRUD.Database;
using MVCCoreCRUD.Models;
using System.Collections.Generic;
using System.Linq;

namespace MVCCoreCRUD.Repository
{
  public class EmployeeRepository : IEmployeeRepository
  {
  private readonly EmployeeDbContext _employeeDbContext;

  public EmployeeRepository(EmployeeDbContext employeeDbContext)
  {
  _employeeDbContext = employeeDbContext;
  }

        public int AddEmployee(EmployeeModel model)
  {
  _employeeDbContext.Employee.Add(model);
  try
  {
  _employeeDbContext.SaveChanges();
  }
  catch (DbUpdateException)
  {
  return 0;
  }
  return model.Id;
  }

  public int DeleteEmployee(int? id, EmployeeModel model)
  {
  EmployeeModel employeeModel = _employeeDbContext.Employee.FirstOrDefault(m => m.Id == id);
  if (employeeModel != null)
  {
  _employeeDbContext.Employee.Remove(employeeModel);
  try
    {
  _employeeDbContext.SaveChanges();
  }
  catch (DbUpdateException)
  {
  return 0;
  }
  return employeeModel.Id;
  }
  return 0;
  }

  public List<CityModel> GetCity()
  {
  return _employeeDbContext.City.ToList();
  }

  public List<DepartmentModel> GetDepartment()
  {
  return _employeeDbContext.Department.ToList();
  }

  public List<EmployeeModel> GetEmployee()
  {
  return _employeeDbContext.Employee.ToList();
  }

  public EmployeeModel GetEmployeeById(int? id)
  {
  return _employeeDbContext.Employee.FirstOrDefault(m => m.Id == id);
  }

  public List<GenderModel> GetGender()
  {
  return _employeeDbContext.Gender.ToList();
  }

  public int UpdateEmployee(int? id, EmployeeModel model)
  {
  EmployeeModel employeeModel = _employeeDbContext.Employee.FirstOrDefault(m => m.Id == id);
  if (employeeModel != null)
  {
  employeeModel.Name = model.Name;
  employeeModel.Gender = model.Gender;
  employeeModel.DOB = model.DOB;
  employeeModel.EmailId = model.EmailId;
  employeeModel.MobileNo = model.MobileNo;
  employeeModel.Department = model.Department;
  employeeModel.City = model.City;
  employeeModel.PhotoPath = model.PhotoPath;

  _employeeDbContext.Employee.Update(employeeModel);
  try
  {
  _employeeDbContext.SaveChanges();
  }
  catch (DbUpdateException)
  {
  return 0;
  }
  return model.Id;
  }
    return 0;
  }

  #region Private Method
  private bool EmployeeExists(int id)
  {
  return _employeeDbContext.Employee.Any(e => e.Id == id);
  }
  #endregion
  }

}

Step 18: - Right click on Project Root folder => Add => New folder => Type name ViewModels

Step 19: - Right click on ViewModels folder => Add => Click New Items... => Expand Visual C# from left pane => Select Class from middle pane => Type EmployeeViewModel.cs in the Name box => Click Add => Copy Past following code in EmployeeViewModel.cs file

using Microsoft.AspNetCore.Http;
using MVCCoreCRUD.CustomValidationAttribute;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace MVCCoreCRUD.Models
{
  public class EmployeeViewModel
  {
  public int Id { get; set; }

  [Required]
  public string Name { get; set; }

  [Required]
  public string Gender { get; set; }

  [Required]
  [DataType(DataType.Text)]
[DisplayFormat(DataFormatString = "{0:yyyy/MM/dd}", ApplyFormatInEditMode = true)]
[Display(Name = "Date Of Birth")]
[DOBValidation(ErrorMessage = "Date Of Birth must be 18 or above.")]
  public DateTime DOB { get; set; }

  [Required]
  [EmailAddress]
[Display(Name = "Email Id")]
  public string EmailId { get; set; }

  [Required]
[StringLength(10, ErrorMessage = "Mobile number cannot be greater than 10 digit.")]
[RegularExpression("[0-9]{10}$", ErrorMessage = "Invalid Mobile number.")]
[Display(Name = "Mobile No")]
  public string MobileNo { get; set; }

  [Required]
  public string Department { get; set; }

  [Required]
  public string City { get; set; }

  public List<GenderModel> Genders { get; set; }

  public List<DepartmentModel> Departments { get; set; }

  public List<CityModel> Cities { get; set; }

  public IFormFile Photo { get; set; }

[DisplayName("Photo")]
  public string PhotoPath { get; set; }
  }

}

Step 20: - Open appsettings.json file from Solution Explorer => => Copy Past following code in appsettings.json file

{
  "Logging": {
  "LogLevel": {
  "Default": "Information",
  "Microsoft": "Warning",
  "Microsoft.Hosting.Lifetime": "Information"
  }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
  "EMployeeContext": "Server=(localdb)\\mssqllocaldb;Database=MVCCoreCRUD;Trusted_Connection=True;MultipleActiveResultSets=true"
  }

}

Step 21: - Open Program.cs file from Solution Explorer => => Copy Past following code in Program.cs file

using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
using MVCCoreCRUD.Models;
using System;

namespace MVCCoreCRUD
{
  public class Program
  {
  public static void Main(string[] args)
  {
  //CreateHostBuilder(args).Build().Run();

  var host = CreateHostBuilder(args).Build();

  using (var scope = host.Services.CreateScope())
  {
  var services = scope.ServiceProvider;

  try
  {
  SeedData.Initialize(services);
  }
  catch (Exception ex)
  {
  var logger = services.GetRequiredService<ILogger<Program>>();
logger.LogError(ex, "An error occurred seeding the DB.");
  }
  }

  host.Run();
  }

  public static IHostBuilder CreateHostBuilder(string[] args) =>
  Host.CreateDefaultBuilder(args)
  .ConfigureWebHostDefaults(webBuilder =>
  {
  webBuilder.UseStartup<Startup>();
  });
  }

}

Step 22: - Open Startup.cs file from Solution Explorer => => Copy Past following code in Startup.cs file

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using MVCCoreCRUD.Database;
using MVCCoreCRUD.Repository;

namespace MVCCoreCRUD
{
  public class Startup
  {
  public Startup(IConfiguration configuration)
  {
  Configuration = configuration;
  }

  public IConfiguration Configuration { get; }

  // This method gets called by the runtime. Use this method to add services to the container.
  public void ConfigureServices(IServiceCollection services)
  {
  services.AddControllersWithViews(options =>
  {
  // Global filters for Auto Validate Antiforgery Token
options.Filters.Add(new AutoValidateAntiforgeryTokenAttribute());
  });

  // Getting Connection String from appsettings.json file
  services.AddDbContext<EmployeeDbContext>(
options => options.UseSqlServer(Configuration.GetConnectionString("EMployeeContext")));

  // Adding Dependency Injection
  services.AddTransient<IEmployeeRepository, EmployeeRepository>();
  }

  // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
  public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
  {
  if (env.IsDevelopment())
  {
  app.UseDeveloperExceptionPage();
  }
  else
  {
app.UseExceptionHandler("/Home/Error");
  // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
  app.UseHsts();
  }
  app.UseHttpsRedirection();
  app.UseStaticFiles();

  app.UseRouting();

  app.UseAuthorization();

  app.UseEndpoints(endpoints =>
  {
  endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
  });
  }
  }

}

Build Project

Step 23: - Open Package Manager Console => Type Command Add-Migration InitDbCreate => Press Enter

Step 24: - In Package Manager Console => Type Command Update-Database to create the database => Enter

Step 25: - Open SQL Server Object Explorer => Database created successfully

Step 26: - Right click on Controller folder => Add => Controller... => Select MVC Controller – Empty => Click Add => Type name EmployeeController.cs => Click Add => Copy Past following code in EmployeeController.cs file

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace MVCCoreCRUD.Controllers
{
  public class EmployeeController : Controller
  {
  private readonly IEmployeeRepository _employeeRepository;
  private readonly IWebHostEnvironment _webHostEnvironment;

  public EmployeeController(IEmployeeRepository employeeRepository, IWebHostEnvironment webHostEnvironment)
  {
          _employeeRepository = employeeRepository;
  _webHostEnvironment = webHostEnvironment;
  }

  // GET: EmployeeController
  public ActionResult Index()
  {
  List<EmployeeViewModel> employeeViewModel =
              ConvertDomainModelToViewModel(_employeeRepository.GetEmployee());
  return View(employeeViewModel);
  }

  // GET: EmployeeController/Details/5
  public ActionResult Details(int? id)
  {
  if (id == null)
  {
  return NotFound();
  }
  EmployeeViewModel employeeViewModel =
  ConvertDomainModelToViewModel(_employeeRepository.GetEmployeeById(id));
  if (employeeViewModel == null)
        {
  return NotFound();
  }
  if (employeeViewModel == null)
  {
  return NotFound();
  }
  return View(employeeViewModel);
  }

  // GET: EmployeeController/Create
  public ActionResult Create()
  {
EmployeeViewModel employeeViewModel = new EmployeeViewModel();
  employeeViewModel.Genders = _employeeRepository.GetGender();
  employeeViewModel.Departments = _employeeRepository.GetDepartment();
  employeeViewModel.Cities = _employeeRepository.GetCity();
  return View(employeeViewModel);
  }

  // POST: EmployeeController/Create
  [HttpPost]
  [ValidateAntiForgeryToken]
  public ActionResult Create(EmployeeViewModel model)
  {
  try
  {
  if (ModelState.IsValid)
  {
  int recordId = _employeeRepository
  .AddEmployee(ConvertViewModelToDomainModel(model));

  if (recordId == 0)
  {
ModelState.AddModelError("", "Unable to save changes. " +
  "Try again, and if the problem persists, " +
  "see your system administrator.");

EmployeeViewModel employeeViewModel = new EmployeeViewModel();
  employeeViewModel.Genders = _employeeRepository.GetGender();
  employeeViewModel.Departments = _employeeRepository.GetDepartment();
  employeeViewModel.Cities = _employeeRepository.GetCity();
  return View(employeeViewModel);

          }
  return RedirectToAction(nameof(Index));
  }
EmployeeViewModel employeeViewModel1 = new EmployeeViewModel();
              employeeViewModel1.Genders = _employeeRepository.GetGender();
        employeeViewModel1.Departments = _employeeRepository.GetDepartment();
  employeeViewModel1.Cities = _employeeRepository.GetCity();
  return View(employeeViewModel1);
  }
  catch
  {
  return View();
  }
  }

  // GET: EmployeeController/Edit/5
  public ActionResult Edit(int? id)
  {
  if (id == null)
  {
  return NotFound();
  }
  EmployeeViewModel employeeViewModel =
  ConvertDomainModelToViewModelEdit(_employeeRepository.GetEmployeeById(id));
  if (employeeViewModel == null)
  {
  return NotFound();
  }
  employeeViewModel.Genders = _employeeRepository.GetGender();
  employeeViewModel.Departments = _employeeRepository.GetDepartment();
  employeeViewModel.Cities = _employeeRepository.GetCity();
  return View(employeeViewModel);
  }

  // POST: EmployeeController/Edit/5
  [HttpPost]
  [ValidateAntiForgeryToken]
  public ActionResult Edit(int? id, EmployeeViewModel model)
  {
  try
  {
  if (id == null)
  {
  return NotFound();
  }
  else if (id != model.Id)
  {
  return BadRequest();
  }

  if (ModelState.IsValid)
  {
  int recordId = _employeeRepository.UpdateEmployee(id, ConvertViewModelToDomainModel(model));

  if (recordId == 0)
  {
ModelState.AddModelError("", "Unable to save changes. " +
  "Try again, and if the problem persists, " +
  "see your system administrator.");

EmployeeViewModel employeeViewModel = new EmployeeViewModel();
        employeeViewModel.Genders = _employeeRepository.GetGender();
  employeeViewModel.Departments = _employeeRepository.GetDepartment();
  employeeViewModel.Cities = _employeeRepository.GetCity();
  return View(employeeViewModel);
  }

  return RedirectToAction(nameof(Index));
  }
EmployeeViewModel employeeViewModel1 = new EmployeeViewModel();
            employeeViewModel1.Genders = _employeeRepository.GetGender();
  employeeViewModel1.Departments = _employeeRepository.GetDepartment();
  employeeViewModel1.Cities = _employeeRepository.GetCity();
  return View(employeeViewModel1);
  }
  catch
  {
  return View();
  }
  }

  // GET: EmployeeController/Delete/5
  public ActionResult Delete(int id)
  {
  EmployeeViewModel employeeViewModel =
          ConvertDomainModelToViewModel(_employeeRepository.GetEmployeeById(id));
  if (employeeViewModel == null)
  {
  return NotFound();
  }
  return View(employeeViewModel);
        }

  // POST: EmployeeController/Delete/5
  [HttpPost]
  [ValidateAntiForgeryToken]
  public ActionResult Delete(int? id, EmployeeViewModel model)
  {
  try
  {
  if (id == null)
  {
  return NotFound();
  }
  else if (id != model.Id)
  {
  return BadRequest();
  }

  int recordId = _employeeRepository
          .DeleteEmployee(id, ConvertViewModelToDomainModel(model));

  if (recordId == 0)
  {
ModelState.AddModelError("", "Unable to save changes. " +
  "Try again, and if the problem persists, " +
  "see your system administrator.");

  EmployeeViewModel employeeViewModel =
  ConvertDomainModelToViewModel(_employeeRepository.GetEmployeeById(id));
  return View(employeeViewModel);
  }
  return RedirectToAction(nameof(Index));
  }
  catch
  {
  return View();
  }
  }

  #region Private Method
  private EmployeeModel ConvertViewModelToDomainModel(EmployeeViewModel employeeViewModel)
  {
EmployeeModel employeeModel = new EmployeeModel();
  employeeModel.Id = employeeViewModel.Id;
  employeeModel.Name = employeeViewModel.Name;
  employeeModel.Gender = Convert.ToInt32(employeeViewModel.Gender);
  employeeModel.DOB = employeeViewModel.DOB;
  employeeModel.EmailId = employeeViewModel.EmailId;
  employeeModel.MobileNo = employeeViewModel.MobileNo;
    employeeModel.Department = Convert.ToInt32(employeeViewModel.Department);
  employeeModel.City = Convert.ToInt32(employeeViewModel.City);

  string fileName = string.Empty;
  if (employeeViewModel.Photo != null)
  {
  string uploadPath = Path.Combine(_webHostEnvironment.WebRootPath, "images");
fileName = string.Concat(Guid.NewGuid().ToString(), "_", employeeViewModel.Photo.FileName);
  string fullPath = Path.Combine(uploadPath, fileName);
  using (var stream = new FileStream(fullPath, FileMode.Create))
  {
  employeeViewModel.Photo.CopyTo(stream);
  employeeModel.PhotoPath = fileName;
  }
  // Deleting existing Photo when PhotoPath not blank
  if (!string.IsNullOrEmpty(employeeViewModel.PhotoPath))
  {
  System.IO.File.Delete(Path.Combine(uploadPath, employeeViewModel.PhotoPath));
  }
  }
  else if (!string.IsNullOrEmpty(employeeViewModel.PhotoPath))
  {
  employeeModel.PhotoPath = employeeViewModel.PhotoPath;
  }
  return employeeModel;
  }

  private List<EmployeeViewModel> ConvertDomainModelToViewModel(List<EmployeeModel> employeeModel)
  {
List<EmployeeViewModel> employeeViewModel = new List<EmployeeViewModel>();

  if (employeeModel != null && employeeModel.Count() > 0)
  {
  List<GenderModel> Genders = _employeeRepository.GetGender();
  List<DepartmentModel> Departments = _employeeRepository.GetDepartment();
  List<CityModel> Cities = _employeeRepository.GetCity();

  foreach (var item in employeeModel)
  {
employeeViewModel.Add(new EmployeeViewModel()
    {
  Id = item.Id,
  Name = item.Name,
  Gender = Genders.FirstOrDefault(m => m.Id == item.Gender).Name,
  DOB = item.DOB,
  EmailId = item.EmailId,
  MobileNo = item.MobileNo,
      Department = Departments.FirstOrDefault(m => m.Id == item.Department).Name,
  City = Cities.FirstOrDefault(m => m.Id == item.City).Name,
  PhotoPath = item.PhotoPath,
  });
  }
  }

  return employeeViewModel;
  }

  private EmployeeViewModel ConvertDomainModelToViewModel(EmployeeModel employeeModel)
  {
EmployeeViewModel employeeViewModel = new EmployeeViewModel();

  if (employeeModel != null)
  {
  List<GenderModel> Genders = _employeeRepository.GetGender();
  List<DepartmentModel> Departments = _employeeRepository.GetDepartment();
  List<CityModel> Cities = _employeeRepository.GetCity();

  employeeViewModel.Id = employeeModel.Id;
  employeeViewModel.Name = employeeModel.Name;
  employeeViewModel.Gender = Genders.FirstOrDefault(m => m.Id == employeeModel.Gender).Name;
          employeeViewModel.DOB = employeeModel.DOB;
  employeeViewModel.EmailId = employeeModel.EmailId;
  employeeViewModel.MobileNo = employeeModel.MobileNo;
  employeeViewModel.Department = Departments.FirstOrDefault(m => m.Id == employeeModel.Department).Name;
                employeeViewModel.City = Cities.FirstOrDefault(m => m.Id == employeeModel.City).Name;
  employeeViewModel.PhotoPath = employeeModel.PhotoPath;
  }

  return employeeViewModel;
  }

  private EmployeeViewModel ConvertDomainModelToViewModelEdit(EmployeeModel employeeModel)
  {
EmployeeViewModel employeeViewModel = new EmployeeViewModel();

  if (employeeModel != null)
            {
  employeeViewModel.Id = employeeModel.Id;
  employeeViewModel.Name = employeeModel.Name;
  employeeViewModel.Gender = Convert.ToString(employeeModel.Gender);
  employeeViewModel.DOB = employeeModel.DOB;
  employeeViewModel.EmailId = employeeModel.EmailId;
  employeeViewModel.MobileNo = employeeModel.MobileNo;
  employeeViewModel.Department = Convert.ToString(employeeModel.Department);
    employeeViewModel.City = Convert.ToString(employeeModel.City);
  employeeViewModel.PhotoPath = employeeModel.PhotoPath;
  }

  return employeeViewModel;
  }
  #endregion
  }

}

Step 27: - Right click on Views folder => Add => New Folder... => Type name Employee

Step 28: - Right click on Employee folder => Add => Views... => Select Razor View – Empty => Click Add => Type name Index.cshtml => Copy Past following code in Index.cshtml file

@model IEnumerable<MVCCoreCRUD.Models.EmployeeViewModel>

@{
ViewData["Title"] = "Index";
}

<h1>Index</h1>

<p>
  <a asp-action="Create">Create New</a>
</p>
<table class="table">
  <thead>
  <tr>
  <th>
  @Html.DisplayNameFor(model => model.Name)
  </th>
  <th>
  @Html.DisplayNameFor(model => model.Gender)
  </th>
  <th>
  @Html.DisplayNameFor(model => model.DOB)
  </th>
  <th>
  @Html.DisplayNameFor(model => model.EmailId)
  </th>
  <th>
  @Html.DisplayNameFor(model => model.MobileNo)
  </th>
  <th>
  @Html.DisplayNameFor(model => model.Department)
  </th>
  <th>
  @Html.DisplayNameFor(model => model.City)
  </th>
  <th>
  @Html.DisplayNameFor(model => model.PhotoPath)
  </th>
  <th></th>
  </tr>
  </thead>
  <tbody>
  @foreach (var item in Model)
  {
  var photoPath = "~/images/" + (item.PhotoPath ?? "noimage.jpg");
  <tr>
  <td>
  @Html.DisplayFor(modelItem => item.Name)
  </td>
  <td>
  @Html.DisplayFor(modelItem => item.Gender)
  </td>
  <td>
  @Html.DisplayFor(modelItem => item.DOB)
  </td>
  <td>
  @Html.DisplayFor(modelItem => item.EmailId)
  </td>
  <td>
  @Html.DisplayFor(modelItem => item.MobileNo)
  </td>
  <td>
  @Html.DisplayFor(modelItem => item.Department)
  </td>
  <td>
  @Html.DisplayFor(modelItem => item.City)
  </td>
  <td>
  <img height="30" width="30" src="@photoPath" asp-append-version="true" />
  </td>
  <td>
  <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
  <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
      <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
  </td>
  </tr>
  }
  </tbody>

</table>

Step 29: - Right click on Employee folder => Add => Views... => Select Razor View – Empty => Click Add => Type name Create.cshtml => Copy Past following code in Create.cshtml file

@model MVCCoreCRUD.Models.EmployeeViewModel

@{
ViewData["Title"] = "Create";
}

<h1>Create</h1>

<hr />
<div class="row">
  <div class="col-md-4">
  <form asp-action="Create" enctype="multipart/form-data">
  @Html.AntiForgeryToken()
  <div asp-validation-summary="ModelOnly" class="text-danger"></div>
  <input type="hidden" asp-for="Id" />
  <div class="form-group">
  <label asp-for="Name" class="control-label"></label>
  <input asp-for="Name" class="form-control" />
  <span asp-validation-for="Name" class="text-danger"></span>
  </div>
  <div class="form-group">
  <label asp-for="Gender" class="control-label"></label>
  <br />
  @foreach (var gender in Model.Genders)
  {
  <input asp-for="Gender" type="radio" value="@gender.Id" />@gender.Name
  }
  <br />
  <span asp-validation-for="Gender" class="text-danger"></span>
  </div>
  <div class="form-group">
  <label asp-for="DOB" class="control-label"></label>
  <input asp-for="DOB" class="form-control date" value="" />
  <span asp-validation-for="DOB" class="text-danger"></span>
  </div>
  <div class="form-group">
  <label asp-for="EmailId" class="control-label"></label>
  <input asp-for="EmailId" class="form-control" />
  <span asp-validation-for="EmailId" class="text-danger"></span>
  </div>
  <div class="form-group">
  <label asp-for="MobileNo" class="control-label"></label>
  <input asp-for="MobileNo" class="form-control" />
  <span asp-validation-for="MobileNo" class="text-danger"></span>
  </div>
  <div class="form-group">
  <label asp-for="Department" class="control-label"></label>
  <select asp-for="Department" class="form-control"
  asp-items="@(new SelectList(Model.Departments,"Id", "Name"))">
  <option value="">Select</option>
  </select>
  <span asp-validation-for="Department" class="text-danger"></span>
  </div>
  <div class="form-group">
  <label asp-for="City" class="control-label"></label>
  <select asp-for="City" class="form-control"
  asp-items="@(new SelectList(Model.Cities,"Id", "Name"))">
  <option value="">Select</option>
  </select>
  <span asp-validation-for="City" class="text-danger"></span>
  </div>
  <div class="form-group">
  <label asp-for="Photo" class="control-label"></label>
  <div class="custom-file">
  <input asp-for="Photo" class="form-control custom-file-input" />
  <label class="custom-file-label">Choose File...</label>
  </div>
  </div>
  <div class="form-group">
  <input type="submit" value="Save" class="btn btn-primary" />
  </div>
  </form>
  </div>
</div>

<div>
  <a asp-action="Index">Back to List</a>
</div>
@section Scripts{
  <script>
$(document).ready(function () {
$(".custom-file-input").on("change", function () {
  var fileName = $(this).val().split("\\").pop();
$(this).next(".custom-file-label").html(fileName);
  });

$(".date").datepicker({
dateFormat: 'yy/mm/dd',
changeMonth: true,
changeYear: true,
yearRange: "-50:+1",
maxDate: new Date()

});

</script>

}

Step 30: - Right click on Employee folder => Add => Views... => Select Razor View – Empty => Click Add => Type name Edit.cshtml => Copy Past following code in Edit.cshtml file

@model MVCCoreCRUD.Models.EmployeeViewModel

@{
ViewData["Title"] = "Edit";
  var photoPath = "~/images/" + (@Model.PhotoPath ?? "noimage.jpg");
}

<h1>Edit</h1>

<hr />
<div class="row">
  <div class="col-md-4">
  <form asp-action="Edit" enctype="multipart/form-data">
  @Html.AntiForgeryToken()
  <div asp-validation-summary="ModelOnly" class="text-danger"></div>
  <input type="hidden" asp-for="Id" />
  <input type="hidden" asp-for="PhotoPath" />
  <div class="form-group">
  <label asp-for="Name" class="control-label"></label>
  <input asp-for="Name" class="form-control" />
  <span asp-validation-for="Name" class="text-danger"></span>
  </div>
  <div class="form-group">
  <label asp-for="Gender" class="control-label"></label>
  @foreach (var gender in Model.Genders)
  {
  <input asp-for="Gender" type="radio" value="@gender.Id" />@gender.Name
  }
  <span asp-validation-for="Gender" class="text-danger"></span>
  </div>
  <div class="form-group">
  <label asp-for="DOB" class="control-label"></label>
  <input asp-for="DOB" class="form-control date" />
  <span asp-validation-for="DOB" class="text-danger"></span>
  </div>
  <div class="form-group">
  <label asp-for="EmailId" class="control-label"></label>
  <input asp-for="EmailId" class="form-control" />
  <span asp-validation-for="EmailId" class="text-danger"></span>
  </div>
  <div class="form-group">
  <label asp-for="MobileNo" class="control-label"></label>
  <input asp-for="MobileNo" class="form-control" />
  <span asp-validation-for="MobileNo" class="text-danger"></span>
  </div>
  <div class="form-group">
  <label asp-for="Department" class="control-label"></label>
  <select asp-for="Department" class="form-control"
                        asp-items="@(new SelectList(Model.Departments,"Id", "Name"))">
  <option value="">Select</option>
  </select>
  <span asp-validation-for="Department" class="text-danger"></span>
  </div>
  <div class="form-group">
  <label asp-for="City" class="control-label"></label>
  <select asp-for="City" class="form-control"
  asp-items="@(new SelectList(Model.Cities,"Id", "Name"))">
  <option value="">Select</option>
  </select>
  <span asp-validation-for="City" class="text-danger"></span>
  </div>
  <div class="form-group">
  <label asp-for="Photo" class="control-label"></label>
  <img height="50" width="50" src="@photoPath" asp-append-version="true" />

  <div class="custom-file">
  <input asp-for="Photo" class="form-control custom-file-input" />
  <label class="custom-file-label">Choose File...</label>
  </div>
  </div>
  <div class="form-group">
  <input type="submit" value="Save" class="btn btn-primary" />
  </div>
  </form>
  </div>
</div>

<div>
  <a asp-action="Index">Back to List</a>
</div>
@section Scripts{
  <script>
$(document).ready(function () {
$(".custom-file-input").on("change", function () {
  var fileName = $(this).val().split("\\").pop();
$(this).next(".custom-file-label").html(fileName);
  });

$(".date").datepicker({
dateFormat: 'yy/mm/dd',
changeMonth: true,
changeYear: true,
yearRange: "-50:+1",
maxDate: new Date()

});

});
</script>

}

Step 31: - Right click on Employee folder => Add => Views... => Select Razor View – Empty => Click Add => Type name Details.cshtml => Copy Past following code in Details.cshtml file

@model MVCCoreCRUD.Models.EmployeeViewModel

@{
ViewData["Title"] = "Details";
  var photoPath = "~/images/" + (@Model.PhotoPath ?? "noimage.jpg");
}

<h1>Details</h1>

<div>
  <hr />
  <dl class="row">
  <dt class="col-sm-2">
  @Html.DisplayNameFor(model => model.Name)
  </dt>
  <dd class="col-sm-10">
  @Html.DisplayFor(model => model.Name)
  </dd>
  <dt class="col-sm-2">
  @Html.DisplayNameFor(model => model.Gender)
  </dt>
  <dd class="col-sm-10">
  @Html.DisplayFor(model => model.Gender)
  </dd>
  <dt class="col-sm-2">
  @Html.DisplayNameFor(model => model.DOB)
  </dt>
  <dd class="col-sm-10">
  @Html.DisplayFor(model => model.DOB)
  </dd>
  <dt class="col-sm-2">
  @Html.DisplayNameFor(model => model.EmailId)
  </dt>
  <dd class="col-sm-10">
  @Html.DisplayFor(model => model.EmailId)
  </dd>
  <dt class="col-sm-2">
  @Html.DisplayNameFor(model => model.MobileNo)
  </dt>
  <dd class="col-sm-10">
  @Html.DisplayFor(model => model.MobileNo)
  </dd>
  <dt class="col-sm-2">
  @Html.DisplayNameFor(model => model.Department)
  </dt>
  <dd class="col-sm-10">
  @Html.DisplayFor(model => model.Department)
  </dd>
  <dt class="col-sm-2">
  @Html.DisplayNameFor(model => model.City)
  </dt>
  <dd class="col-sm-10">
  @Html.DisplayFor(model => model.City)
  </dd>
  <dd class="col-sm-10">
  <img height="250" width="250" src="@photoPath" asp-append-version="true" />
  </dd>
  </dl>
</div>
<div>
  <a asp-action="Edit" asp-route-id="@Model.Id">Edit</a> |
  <a asp-action="Index">Back to List</a>

</div>

Step 32: - Right click on Employee folder => Add => Views... => Select Razor View – Empty => Click Add => Type name Delete.cshtml => Copy Past following code in Delete.cshtml file

@model MVCCoreCRUD.Models.EmployeeViewModel

@{
ViewData["Title"] = "Delete";
}

<h1>Delete</h1>

<h3>Are you sure you want to delete this?</h3>
<div>
  <hr />
  <dl class="row">
  <dt class="col-sm-2">
  @Html.DisplayNameFor(model => model.Name)
  </dt>
  <dd class="col-sm-10">
  @Html.DisplayFor(model => model.Name)
  </dd>
  <dt class="col-sm-2">
  @Html.DisplayNameFor(model => model.Gender)
  </dt>
  <dd class="col-sm-10">
  @Html.DisplayFor(model => model.Gender)
  </dd>
  <dt class="col-sm-2">
  @Html.DisplayNameFor(model => model.DOB)
  </dt>
    <dd class="col-sm-10">
  @Html.DisplayFor(model => model.DOB)
  </dd>
  <dt class="col-sm-2">
  @Html.DisplayNameFor(model => model.EmailId)
  </dt>
  <dd class="col-sm-10">
  @Html.DisplayFor(model => model.EmailId)
  </dd>
  <dt class="col-sm-2">
  @Html.DisplayNameFor(model => model.MobileNo)
  </dt>
  <dd class="col-sm-10">
  @Html.DisplayFor(model => model.MobileNo)
  </dd>
        <dt class="col-sm-2">
  @Html.DisplayNameFor(model => model.Department)
  </dt>
  <dd class="col-sm-10">
  @Html.DisplayFor(model => model.Department)
  </dd>
  <dt class="col-sm-2">
  @Html.DisplayNameFor(model => model.City)
  </dt>
  <dd class="col-sm-10">
  @Html.DisplayFor(model => model.City)
  </dd>
  </dl>

  <form asp-action="Delete">
  <input type="hidden" asp-for="Id" />
  <input type="submit" value="Delete" class="btn btn-danger" /> |
  <a asp-action="Index">Back to List</a>
  </form>

</div>

Step 33: - Open _Layout.cshtml file => Add following code to enable client-side validation and datepicker

@*Enable client side validation-End*@

Step 34: - Add images folder inside wwwroot => Add noimage.jpg inside images folder

Step 35: - Change default route Home controller to Employee controller in Startup.cs

app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Employee}/{action=Index}/{id?}");
});

ALL Done

Run Project

Output

Red

Sunday, 23 August 2020

CRUD Operation With ASP.NET Core 3.1

No comments:

Post a Comment

split FullName column to FirstName, MiddleName, LastName column in MS SQL