មាតិកា
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។
- បង្កើត 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
