ការសិក្សាពីរបៀប បង្កើត upload file ក្នុង ASP.NET MVC 5

មាតិកា

I.   សេចក្តីផ្តើម

II.  គោលបំណង

III. តម្រូវការ

IV. ជំហានទី១៖ បង្កើត Project

V.  ជំហានទី២៖ បង្កើត Class Model

VI. ជំហានទី៣៖ បង្កើត Table និង Store Procedure

VII.ជំហានទី៤៖ បង្កើត class controller

VIII.ជំហានទី៥៖ បង្កើត strongly typed View

IX. ជំហានទី៦៖ ដំណើរការ Project

I.         សេចក្តីផ្តើម

នៅក្នុង Tutorial នេះ យើងនឹងសិក្សាពីរបៀប បង្កើត upload file ជាមួយភាសា ASP.NET MVC។ File upload ត្រូវបានគេប្រើញឹកញាប់ក្នុងការរក្សាទុក files, images, ក៏ដូចជាឯកសារផ្សេងៗទៅក្នុង Server។ យើងមានវិធីសាស្រ្តជាច្រើនក្នុងការ upload file ដោយឡែកត្រង់ចំនុចនេះ ខ្ញុំសូមលើកយកការ save file ដោយ upload  files ជា binary data។  ខាងក្រោមនេះនឹងបង្ហាញពីជំហាននីមួយៗក្នុងការ implementation កូដ។

II.        គោលបំណង

ក្រោយពីអនុវត្តន៍តាម Tutorial នេះ លោកអ្នកនឹងយល់អំពី

• យល់ដឹងពីរបៀបបង្កើត Model
• យល់ដឹងពីរបៀបបង្កើត Controller
• យល់ដឹងពីរបៀប Store file ជា binary data
• យល់ដឹងពីរបៀប upload និង download file
• យល់ដឹងពីរបៀបប្រើប្រាស់ LINQ

III.       តម្រូវការ

ដើម្បីអាចសិក្សា បានយើងត្រូវមាន

• Microsoft Visual Studio (any version)
• Microsoft SQL Server (any version)

IV.      ជំហានទី១៖ បង្កើត Project

សូមចូលទៅបើកកម្មវិធី Microsoft visual studio

• ចុច “Start”
• បន្ទាប់ “All Programs”
• ជ្រើសរើសយក “Microsoft Visual Studio 2015”.
• ចូលទៅកាន់ File à New à Project
• សូមមើលមេរៀនពីមុនៗអំពីរបៀបបង្កើត Project ជាមួយ MVC

សូមក្រឡេកមើលProject Structure ទាំងមូល

V.         ជំហានទី២៖ បង្កើត Class Model

ទី១៖ សូមធ្វើការបង្កើត Class model “EmpModel.cs”

• right click លើ Model
• Add
• Class
• ចូរសរសេរ Script ដូចខាងក្រោម៖

public class EmpModel

    {

        [Required]

        [DataType(DataType.Upload)]

        [Display(Name = “Select File”)]

        public HttpPostedFileBase files { get; set; }

    }

ទី២៖ សូមធ្វើការបង្កើត Class model “FileDetailsModel.cs”

public class FileDetailsModel

    {

        public int Id { get; set; }

        [Display(Name = “Uploaded File”)]

        public String FileName { get; set; }

        public byte[] FileContent { get; set; }

    }

VI.         ជំហានទី៣៖ បង្កើត Table និង Store Procedure

សូមធ្វើការបង្កើត Table ដើម្បី store នូវ file ដែលបាន upload ក្នុងទម្រង់ជា binary format ហើយបង្ហាញមកវិញតាមរយៈ view។

1. បង្កើត Table តាមរយៈ Script

CREATE TABLE [dbo].[FileDetails]( 

    [Id] [int] IDENTITY(1,1) NOT NULL, 

    [FileName] [varchar](60) NULL, 

    [FileContent] [varbinary](max) NULL 

) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

• ក្នុង table​ យើងមាន column ចំនួន ៣គឺ
  • Id: មានប្រភេទទិន្នន័យជា int ហើយវាជា unique key ដែលមិនអាច null បាន
  • FileName: គឺសម្រាប់ store នូវ upload ឈ្មោះ file
  • FileContent: សម្រាប់ store នូវ content របស់ file ដែលត្រូវបាន upload ក្នុងទម្រង់ជា binary format

2. បន្ទាប់មកទៀត សូមធ្វើការបង្កើត stored procedure សម្រាប់ insertfile ដោយប្រើប្រាស់ script ខាងក្រោម

Create Procedure [dbo].[AddFileDetails] 

( 

@FileName varchar(60), 

@FileContent varBinary(Max) 

) 

as 

begin 

Set NoCount on 

Insert into FileDetails values(@FileName,@FileContent) 

End 

3. បង្កើត script សម្រាប់ retrieve file មកវិញ

CREATE Procedure [dbo].[GetFileDetails] 

( 

@Id int=null 

) 

as 

begin 

select Id,FileName,FileContent from FileDetails 

where Id=isnull(@Id,Id) 

End 

VII.         ជំហានទី៤៖ បង្កើត class controller

សូមធ្វើការបង្កើត controller មួយដែលមានឈ្មោះថា “HomeController.cs”

using upload.Models;

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Dapper;

using System.Configuration;

using System.Data.SqlClient;

using System.Data;

namespace upload.Controllers

{

    public class HomeController : Controller

    {

        #region Upload Download file 

        public ActionResult FileUpload()

        {

            return View();

        }

        [HttpPost]

        public ActionResult FileUpload(HttpPostedFileBase files)

        {

            String FileExt = Path.GetExtension(files.FileName).ToUpper();

            if (FileExt == “.PDF”)

            {

                Stream str = files.InputStream;

                BinaryReader Br = new BinaryReader(str);

                Byte[] FileDet = Br.ReadBytes((Int32)str.Length);

                FileDetailsModel Fd = new Models.FileDetailsModel();

                Fd.FileName = files.FileName;

                Fd.FileContent = FileDet;

                SaveFileDetails(Fd);

                return RedirectToAction(“FileUpload”);

            }

            else

            {

                ViewBag.FileStatus = “Invalid file format.”;

                return View();

            }

        }

        [HttpGet]

        public FileResult DownLoadFile(int id)

        {

            List<FileDetailsModel> ObjFiles = GetFileList();

            var FileById = (from FC in ObjFiles

                            where FC.Id.Equals(id)

                            select new { FC.FileName, FC.FileContent }).ToList().FirstOrDefault();

            return File(FileById.FileContent, “application/pdf”, FileById.FileName);

        }

        #endregion

        #region View Uploaded files 

        [HttpGet]

        public PartialViewResult FileDetails()

        {

            List<FileDetailsModel> DetList = GetFileList();

            return PartialView(“FileDetails”, DetList);

        }

        private List<FileDetailsModel> GetFileList()

        {

            List<FileDetailsModel> DetList = new List<FileDetailsModel>();

            DbConnection();

            con.Open();

            DetList = SqlMapper.Query<FileDetailsModel>(con, “GetFileDetails”, commandType: CommandType.StoredProcedure).ToList();

            con.Close();

            return DetList;

        }

        #endregion

#region Database related operations 

        private void SaveFileDetails(FileDetailsModel objDet)

        {

            DynamicParameters Parm = new DynamicParameters();

            Parm.Add(“@FileName”, objDet.FileName);

            Parm.Add(“@FileContent”, objDet.FileContent);

            DbConnection();

            con.Open();

            con.Execute(“AddFileDetails”, Parm, commandType: System.Data.CommandType.StoredProcedure);

            con.Close();

        }

        #endregion

        #region Database connection

        private SqlConnection con;

        private string constr;

        private void DbConnection()

        {

            constr = ConfigurationManager.ConnectionStrings[“dbcon”].ToString();

            con = new SqlConnection(constr);

        }

        #endregion

    }

}

VIII.         ជំហានទី៥៖ បង្កើត strongly typed View

right click ទៅលើ folder view រួចធ្វើការបង្កើត​ strongly typed view ចំនួន២។ មួយសម្រាប់ upload file ដោយប្រើប្រាស់នូវ class “EmpModel.cs” ហើយមួយទៀតសម្រាប់បង្កើតនូវ Partial View ដោយប្រើប្រាស់នូវ class “FileDetailsModel.cs” ដើម្បីបង្ហាញ file ដែលបាន upload។

• FileUpload.cshtml

• FileDetails.cshtml

@model IEnumerable<upload.Models.FileDetailsModel>

<table class=”table table-bordered”>

    <tr>

        <th class=”col-md-4″>

            @Html.DisplayNameFor(model => model.FileName)

        </th>

        <th class=”col-md-2″></th>

    </tr>

    @foreach (var item in Model)

    {

        <tr>

            <td>

                @Html.DisplayFor(modelItem => item.FileName)

            </td>

            <td>

                @Html.ActionLink(“Downlaod”, “DownLoadFile”, new { id = item.Id })

            </td>

        </tr>

    }

</table>

ដូច្នេះការបង្កើតរបស់យើងត្រូវបានធ្វើរួចរាល់ជាស្ថាពរ។

IX.         ជំហានទី៦៖ ដំណើរការ Project

• យើងនឹងទទួលបាន template ដូចរូប

• សូម add file ចូល

• សូមមើលទៅ table យើងនឹងឃើញថា file ដែលបានupload ត្រូវបាន convert to ជា binary format

• ដើម្បី download file ដែលបាន upload យើងគ្រាន់តែចុចលើ link download ជាការស្រេច

***កំណត់ចំណាំៈ

• ដើម្បីអាចធ្វើការ upload បានលុះត្រាតែយើងត្រូវកំណត់ enctype =”multipart/form-data” នៅក្នុង Formaction ជាមុនសិន
• ត្រូវធ្វើការ configure connection នៅក្នុង web.config file