Build a CRUD Application with ASP.NET Core 2.1

In The Article previous, we already config Connect Database and create table through model class, use support of EntityFramework Core
You can see it again: Create Database using Code First in ASP.NET CORE 2.1
Today, I will a simple example way (READ, INSERT,UPDATE,DELETE) in ASP.NET CORE 2.1

Go to Models folder, create FormViewModels.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using System.ComponentModel.DataAnnotations;
namespace ShopAspCore.Models
{
    public class CreateProduct
    {
        [Required(ErrorMessage ="Enter title!")]
        public string Title { get; set; }
        [Required(ErrorMessage ="Choose image")]
        public IFormFile UrlImage { get; set; }
        [Required(ErrorMessage ="Enter price")]
        public string Price { get; set; }
        [Required(ErrorMessage ="Enter detail")]
        public string Detail { get; set; }
        [Required(ErrorMessage ="Choose category")]
        public int idCategory { get; set; }
    }
}

In FormViewModels.cs , we have a CreateProduct class set up properties submit Form create product, we can multiple create class in FormViewModels file.
We can set up message error properties in Form, [Required(ErrorMessage ="Enter title!")]
FormFile UrlImage : use set up read file
Okay, go to Controllers folder->add ProductController.cs file

using System;
using System.IO;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.EntityFrameworkCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using ShopAspCore.Models;

namespace ShopAspCore.Controllers
{
    public class ProductController : Controller
    {
        private EFDataContext _db;
        private readonly IHostingEnvironment _appEnvironment;
        public ProductController(EFDataContext db, IHostingEnvironment appEnvironment)
        {
            _db = db;
            _appEnvironment = appEnvironment;
        }
        // GET: Product
        public ActionResult Index()
        {
            var data = _db.Products.Select(s => new Product
            {
                idProduct = s.idProduct,
                Title = s.Title,
                Price = s.Price,
                UrlImage = s.UrlImage,
                Detail = s.Detail,
                idCategory = s.idCategory,
                Category = _db.Categories.Where(a=>a.idCategory==s.idCategory).FirstOrDefault()

            }).ToList();
            return View(data);
        }

        // GET: Product/Create
        public ActionResult Create()
        {
            CategoryDropDownList();
            return View();
        }

        // POST: Product/Create
        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<ActionResult> Create(CreateProduct _product)
        {
            if (ModelState.IsValid)
            {
                string UrlImage = "";
                var files = HttpContext.Request.Form.Files;
                foreach (var Image in files)
                {
                    if (Image != null && Image.Length > 0)
                    {
                        var file = Image;

                        var uploads = Path.Combine(_appEnvironment.WebRootPath, "images");
                        if (file.Length > 0)
                        {
                           // var fileName = Guid.NewGuid().ToString().Replace("-", "") + Path.GetExtension(file.FileName);
                            var fileName = Guid.NewGuid().ToString().Replace("-", "") + file.FileName;
                            using (var fileStream = new FileStream(Path.Combine(uploads, fileName), FileMode.Create))
                            {
                                await file.CopyToAsync(fileStream);
                                UrlImage = fileName;
                            }

                        }
                    }
                }
                var data = new Product()
                {
                    Title = _product.Title,
                    UrlImage = UrlImage,
                    Price = _product.Price,
                    Detail = _product.Detail,
                    idCategory = _product.idCategory
                };
                _db.Products.Add(data);
                await _db.SaveChangesAsync();
                return RedirectToAction(nameof(Index));

            }
            CategoryDropDownList();
            return View();
        }

        // GET: Product/Edit/5
        public ActionResult Edit(int id)
        {
            var product = _db.Products.Find(id);
            CategoryDropDownList();
            return View(product);
        }

        // POST: Product/Edit/5
        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<ActionResult> Edit(int id,Product _product)
        {
            if (ModelState.IsValid)
            {
                string UrlImage = "";
                var files = HttpContext.Request.Form.Files;
                foreach (var Image in files)
                {
                    if (Image != null && Image.Length > 0)
                    {
                        var file = Image;

                        var uploads = Path.Combine(_appEnvironment.WebRootPath, "images");
                        if (file.Length > 0)
                        {
                            // var fileName = Guid.NewGuid().ToString().Replace("-", "") + Path.GetExtension(file.FileName);
                            var fileName = Guid.NewGuid().ToString().Replace("-", "") + file.FileName;
                            using (var fileStream = new FileStream(Path.Combine(uploads, fileName), FileMode.Create))
                            {
                                await file.CopyToAsync(fileStream);
                                UrlImage = fileName;
                            }

                        }
                    }
                }
                var data = _db.Products.Find(id);
                data.Title = _product.Title;
                data.Price = _product.Price;
                data.Detail = _product.Detail;
                data.UrlImage = UrlImage;
                data.idCategory = _product.idCategory;
                await _db.SaveChangesAsync();
                //  return RedirectToAction(nameof(Edit), new { id = data.idProduct });
                return RedirectToAction(nameof(Index));

            }
            CategoryDropDownList();
            return View();
        }

        // GET: Product/Delete/5
        public async Task<ActionResult> Delete(int id)
        {
            var data = _db.Products.Find(id);
            _db.Products.Remove(data);
            await _db.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        private void CategoryDropDownList(object categorySelect = null)
        {
            var rolesQuery = _db.Categories.ToList();
            ViewBag.Categories = new SelectList(rolesQuery, "idCategory", "Name", categorySelect);
        }
    }
}

The First, we need call EFDataContext.cs file in ProductController.cs, after then we can connect Database and execute query LinQ
CategoryDropDownList(): use read all data category , after then show to element select option in Form submit
System.IO: we need using to ProductController.cs file, after then you can read file
_appEnvironment.WebRootPath: Get the default path to the wwwroot directory, open Startup.cs insert line app.UserStaticFiles()

Views/Product/Index.cshtml

@model IEnumerable<Product>
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row">
    <div class="col-md-8">
        <h2>List Product</h2>
        <a asp-controller="Product" asp-action="Create" class="btn btn-primary">Add Product</a>
        <table class="table">
            <thead>
                <tr>
                    <th>STT</th>
                    <th>Title</th>
                    <th>UrlImage</th>
                    <th>Price</th>
                    <th>Detail</th>
                    <th>Category</th>
                    <th>Edit</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                @{
                    int stt = 0;
                    foreach(var item in Model)
                    {
                        stt++;
                                <tr>
                                    <td>@stt</td>
                                    <td>@item.Title</td>
                                    <td><img src="~/images/@item.UrlImage" width="80" height="80" /></td>
                                    <td>@item.Price</td>
                                    <td>@item.Detail</td>
                                    <td>@item.Category.Name</td>
                                    <td><a asp-controller="Product" asp-action="Edit"  asp-route-id="@item.idProduct" class="badge bg-warning">Edit</a></td>
                                    <td><a asp-controller="Product" asp-action="Delete" asp-route-id="@item.idProduct" class="badge bg-danger">Delete</a></td>
                                </tr>
                    }
                }
            </tbody>
        </table>
    </div>
</div>

Views/Product/Create.cshtml

@model ShopAspCore.Models.CreateProduct
@{
    ViewData["Title"] = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

    <div class="row">
        <div class="col-md-8">
            <h2>CREATE PRODUCT</h2>
            <form asp-controller="Product" asp-action="Create" method="post" enctype="multipart/form-data">
                @Html.AntiForgeryToken()
                <div class="form-group">
                    <label>Title</label>
                    <input asp-for="Title" class="form-control" />
                    <span asp-validation-for="Title" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label>UrlImage</label>
                    <input type="file" asp-for="UrlImage" class="form-control" />
                    <span asp-validation-for="UrlImage" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label>Price</label>
                    <input asp-for="Price" class="form-control" />
                    <span asp-validation-for="Price" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label>Detail</label>
                    <input asp-for="Detail" class="form-control" />
                    <span asp-validation-for="Detail" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label>Category</label>
                    <select asp-for="idCategory" asp-items="@ViewBag.Categories" class="form-control">
                        <option value="">Select Category</option>
                    </select>
                    <span asp-validation-for="idCategory" class="text-danger"></span>
                </div>
                <div class="form-group">
                   <input type="submit" name="submit" value="Add Product" class="btn btn-primary"/>
                </div>
            </form>
        </div>
    </div>

Views/Product/Edit.cshtml

@model Product
@{
    ViewData["Title"] = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row">
    <div class="col-md-8">
        <h2>EDIT PRODUCT</h2>
        <form asp-controller="Product" asp-action="Edit" method="post" enctype="multipart/form-data">
            @Html.AntiForgeryToken()
            <div class="form-group">
                <label>Title</label>
                <input asp-for="Title" class="form-control" />
                <span asp-validation-for="Title" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>UrlImage</label>
                <img src="~/images/@Model.UrlImage" width="80" height="80" class="change_edit"/>
                <input type="file" asp-for="UrlImage" class="form-control changeImage" />
                <span asp-validation-for="UrlImage" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>Price</label>
                <input asp-for="Price" class="form-control" />
                <span asp-validation-for="Price" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>Detail</label>
                <input asp-for="Detail" class="form-control" />
                <span asp-validation-for="Detail" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label>Category</label>
                <select asp-for="idCategory" asp-items="@ViewBag.Categories" class="form-control">
                    <option value="">Select Category</option>
                </select>
                <span asp-validation-for="idCategory" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" name="submit" value="Add Product" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>
<script src="~/js/jquery.min.js"></script>
<script type="text/javascript">

        $(function(){
          $('.changeImage').change(function(){
            var input = this;
            var url = $(this).val();
            var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
            if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg"))
             {
                var reader = new FileReader();

                reader.onload = function (e) {
                   $('.change_edit').attr('src', e.target.result);
                }
               reader.readAsDataURL(input.files[0]);
            }
            else
            {
              $('.change_edit').attr('src', '/images/@Model.UrlImage');
            }
          });

        });
</script>

In the code Edit.cshtml file above, we write a script select import image, when change image
Ok, Set up complete, now we can run project, open cmd in project

dotnet build
dotnet run

After then, you can open brower go to URL: https://localhost:5001, test it
The Article : Build a CRUD Application with ASP.NET Core 2.1

Blog

Build a CRUD Application with ASP.NET Core 2.1

Hòa Nguyễn Coder

Join Our Newsletter. No Spam, Only the good stuff.

Related