Build a CRUD Application with ASP.NET Core 2.1
Tags: csharp, webdev
Published: 2020-06-12 04:35:00

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](https://dev.to/skipperhoa/create-database-using-code-first-in-asp-net-core-2-1-1pf)
Today, I will a simple example way **(READ, INSERT,UPDATE,DELETE)** in ASP.NET CORE 2.1
+ Go to Models folder, create **FormViewModels.cs**
```csharp
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
```csharp
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**
```csharp
@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>
```
![Build a CRUD Application with ASP.NET Core 2.1](https://hoanguyenit.com/public/upload/images/Building-a-Simple-CRUD-Application-using-ASP.NET-Core%203.1-v0.jpg)
+ **Views/Product/Create.cshtml**
```csharp
@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>
```
![Build a CRUD Application with ASP.NET Core 2.1](https://hoanguyenit.com/public/upload/images/Building-a-Simple-CRUD-Application-using-ASP.NET-Core%203.1-v1.jpg)
+ **Views/Product/Edit.cshtml**
```csharp
@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>
```
![Build a CRUD Application with ASP.NET Core 2.1](https://hoanguyenit.com/public/upload/images/Building-a-Simple-CRUD-Application-using-ASP.NET-Core%203.1-v2.jpg)
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
```cmd
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](https://hoanguyenit.com/build-a-crud-application-with-aspnet-core-21.html)