CRUD Operations And Upload /Download Files In ASP.NET Core 2.0

Description

This blog post describes how to implement CRUD operations i.e Create (Insert data into Database), Read (Get data form Database), Update (Update data in Database), Delete (Delete data in Database) and how to upload and download file using Entity Framework Core and ASP.NET Core. It also describes how to create directory, how to map path to directory and where file (in wwwroot folder) saves. 

 

Introduction

We are going to implement a small and simple asp.net core 2.0 web application, we add a user and edit by uploading his image file. We add his image in wwwroot folder in sub folder “UserFiles”. We check if this folder is already created if not then we create it first and after that we will add another folder named as this user id is, and add its subfolder named “images” where we will upload our image files. We will first check if all the above folders already exist if not

we will create them first and then upload file. If a user deletes it, then its folder, sub folders and files will also be deleted.

 

Body

For this we follow these steps in visual studio 2017,

1. File --> New --> Project 
2. Select ASP.Net Core Web Application
3. Set name and location
4. In next screen select Web Application (Model – View – Controller) Template and select No Authentication and Click OK.
5. Now add some necessary NuGet packages,
1. Tools --> NuGet Package Manager --> Package Manager Console
2. Run Install-Package Microsoft.EntityFrameworkCore.SqlServer
3. For Entity Framework Core Tools to create a database from your EF Core model
4. Run Install-Package Microsoft.EntityFrameworkCore.Tools
5. And for ASP.NET Core Scaffolding tools to create controllers and views.
6. Run Install-Package Microsoft.VisualStudio.Web.CodeGeneration.Design

Add class “User.cs” as shown below:

public class User
   {
       public int UserId { get; set; }
       public string Name { get; set; }
       public string Email { get; set; }
       public string Company { get; set; }
       public string Introduction { get; set; }

   }

Add class “DataAccess.cs” as shown below,

public class DataAccess : DbContext
    {
        public DataAccess(DbContextOptions<DataAccess> options)
            : base(options)
        { }

        public DbSet<User> User { get; set; }
    }

In order for our MVC controllers to make use of DataAccess we will register it as a service.

Add fallowing code to Startup.cs file

public void ConfigureServices(IServiceCollection services)
      {
          services.AddMvc();

          // Custom code for Data Access
          var connection = @"Data Source=ATIQ;Initial Catalog=UserDB;Integrated Security=False;  Persist Security Info=False;User ID=sa;Password=*****";
          services.AddDbContext<DataAccess>(options => options.UseSqlServer(connection));
      }

 Add two using statements in Startup.cs file

using UserDemo.Models;
using Microsoft.EntityFrameworkCore;

 In Tools --> NuGet Package Manager --> Package Manager Console, run two commands;

Add-Migration InitialCreate

Update-Database

This will create our Database using Entity Framework Core.

Right click on Controllers, Add Controller and Select “MVC Controller with Views using Entity Framework” and name the controller.

This will add controller with its all CRUD views in views folder as controller name in our case "Users".

We will make little changes into these views as in attached source files. Add some code into Views/Users/Edit.cshtml

<form asp-action="UploadImage" method="post" enctype="multipart/form-data">
           <div class="form-group">
               <input type="hidden" asp-for="UserId" />
               <label class="control-label">User Image</label><br />
               <img src="@ViewBag.ImgPath" alt="@Model.Name" height="100" width="100" /><br />
               @if (!string.IsNullOrEmpty(ViewBag.FileName))
               {
                   <a href="~/Users/[email protected]&[email protected]">Download</a><br />
               }
               <input type="file" name="user_image" id="user_image" />

           </div>
           <div class="form-group">
               <input type="submit" value="Upload" class="btn btn-default" />
           </div>
       </form>

 And in UsersController.cs file add custom code;

public async Task<IActionResult> Edit(int? id)
       {
           if (id == null)
           {
               return NotFound();
           }

           var user = await _context.User.SingleOrDefaultAsync(m => m.UserId == id);
           if (user == null)
           {
               return NotFound();
           }

           string webRoot = _env.WebRootPath;
           string img_p = "";
           string fileName = "";
           if (System.IO.Directory.Exists(webRoot + "/UserFiles/" + user.UserId.ToString() + "/Image/"))
           {
               string[] strfiles = Directory.GetFiles(webRoot + "/UserFiles/" + user.UserId.ToString() + "/Image/", "*.*");

               if (strfiles.Length > 0)
               {

                   for (int i = 0; i < strfiles.Length; i++)
                   {
                       fileName = Path.GetFileName(strfiles[i]);

                       string _CurrentFile = strfiles[i].ToString();
                       if (System.IO.File.Exists(_CurrentFile))
                       {
                           string tempFileURL = "/UserFiles/" + user.UserId.ToString() + "/Image/" + Path.GetFileName(_CurrentFile);
                           img_p = tempFileURL;
                       }

                   }

               }
           }

           if (!string.IsNullOrEmpty(img_p))
           {
               ViewBag.ImgPath = Convert.ToString(img_p);
               ViewBag.FileName = Convert.ToString(fileName);
           }
           else
               ViewBag.ImgPath = "/Images/default.jpg";

           return View(user);
       }

[HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Edit(int id, [Bind("UserId,Name,Email,Password,Introduction")] User user)
        {
            if (id != user.UserId)
            {
                return NotFound();
            }

            if (ModelState.IsValid)
            {
                try
                {
                    _context.Update(user);
                    await _context.SaveChangesAsync();
                }
                catch (DbUpdateConcurrencyException)
                {
                    if (!UserExists(user.UserId))
                    {
                        return NotFound();
                    }
                    else
                    {
                        throw;
                    }
                }
                return RedirectToAction(nameof(Index));
            }
            return View(user);
        }

 Add code for Uploaded file;

[HttpPost]
       public async Task<IActionResult> UploadImage(IFormCollection form)
       {
           if (form.Files == null || form.Files[0].Length == 0)
               return RedirectToAction("Edit", new { id = Convert.ToString(form["UserId"]) });

           var webRoot = _env.WebRootPath;
           string userId = Convert.ToString(form["UserId"]);

           if (!System.IO.Directory.Exists(webRoot + "/UserFiles/"))
           {
               System.IO.Directory.CreateDirectory(webRoot + "/UserFiles/");
           }
           if (!System.IO.Directory.Exists(webRoot + "/UserFiles/" + userId + "/Image/"))
           {
               System.IO.Directory.CreateDirectory(webRoot + "/UserFiles/" + userId + "/Image/");
           }

           //Delete existing files first and then add new file
           DeleteFiles(userId);

           var path = Path.Combine(
                       Directory.GetCurrentDirectory(), "wwwroot" + "/UserFiles/" + userId + "/Image/",
                       form.Files[0].FileName);

           using (var stream = new FileStream(path, FileMode.Create))
           {
               await form.Files[0].CopyToAsync(stream);
           }

           return RedirectToAction("Edit", new { id = Convert.ToString(form["UserId"]) });
       }

And also for Downloading code;

public async Task<IActionResult> Download(string img, string userId)
        {
            string filename = img;
            if (filename == null)
                return Content("filename not present");

            var path = Path.Combine(
                           Directory.GetCurrentDirectory(),
                           "wwwroot" + "/UserFiles/" + userId + "/Image/", filename);

            var memory = new MemoryStream();
            using (var stream = new FileStream(path, FileMode.Open))
            {
                await stream.CopyToAsync(memory);
            }
            memory.Position = 0;
            return File(memory, GetContentType(path), Path.GetFileName(path));
        }

        private string GetContentType(string path)
        {
            var types = GetMimeTypes();
            var ext = Path.GetExtension(path).ToLowerInvariant();
            return types[ext];
        }

        private Dictionary<string, string> GetMimeTypes()
        {
            return new Dictionary<string, string>
            {
                {".png", "image/png"},
                {".jpg", "image/jpeg"},
                {".jpeg", "image/jpeg"},
                {".gif", "image/gif"}
            };
        }

Here lets discuss new things with image map paths and root directories.

All static files (.css, .js and images) are stored in wwwroot folder by default.

We use "Request.Files" befour Asp.Net Core, now we are using "Request.Form.Files" for getting files from form in Controller. "Server.MapPath("~/UserImages/")" aslo be changed to "var webRoot = _env.WebRootPath;" where

we add _env as;

private readonly DataAccess _context;
       private readonly IHostingEnvironment _env;

       public UsersController(DataAccess context, IHostingEnvironment env)
       {
           _context = context;
           _env = env;
       }

Another change you will notic is "HttpFileCollectionBase" keyword is not using in CORE, instead we are using "IFormFileCollection" for file collection receiving parameter.

"HttpPostedFileBase" keyword also be changed as "IFormFile" used for single file object.

 

When user deletes all folders and sub folders, image file is also deleted as in code below;

[HttpPost, ActionName("Delete")]
       [ValidateAntiForgeryToken]
       public async Task<IActionResult> DeleteConfirmed(int id)
       {
           var user = await _context.User.SingleOrDefaultAsync(m => m.UserId == id);
           _context.User.Remove(user);
           await _context.SaveChangesAsync();

           //Delete User Files as well
           var dirPath = Path.Combine(
                          Directory.GetCurrentDirectory(),
                          "wwwroot" + "/UserFiles/" + Convert.ToString(id) + "/");
           Directory.Delete(dirPath,true);
           return RedirectToAction(nameof(Index));
       }

That's it, may be not the full explanation but you can understand the code with little effort.

 

Last Words

This is not the professional application but just learning and introductory application of Asp.Net Core 2.0. All necessary code related files are attached with this blog post, just copy and paste into your project at root. Please change connection string as for your sql server in Startup.cs file. Also modify namespaces as your project name.