การพัฒนา ASP.NET Web Application – Page 7

Download multiple files as Zip Archive (Compressed) file in ASP.Net MVC

June 19, 2018 15:44

ในบทความนี้จะขอกล่าวถึงการ download file ครั้งละหลายๆไฟล์ โดยมีการระบุว่าต้องการ download file ใดบ้าง โดย ผู้ใช้สามารถกดเลือกได้ทั้งละหลายๆไฟล์ หรือไฟล์เดียว แล้วแต่ความต้องการของผู้ใช้งาน โดยหลังจากที่มีการกดปุ่มแล้วระบบจะทำการ zip ไฟล์รวมเป็น 1 ไฟล์ โดยในบทความนี้จะขอเสนอวิธีการพัฒนาโดยใช้ ASP.NET ในรูปแบบ MVC ค่ะ ในส่วนของ java script function DownloadFiles() { var items = []; $(“input:checkbox[name=chkThis]:checked”).each(function () { items.push($(this).val()); }); if (items.length <= 0) { alert(‘กรุณาเลือกข้อมูลที่ต้องการ Download ด้วยค่ะ/ครับ!!’); } else { $.ajax({ type: ‘POST’, contentType: ‘application/json; charset=utf-8’, url: ‘@Url.Action(“DownloadAndZipFile”, “NoteUpload”)’, data: JSON.stringify({ fileItemsAll: items }), success: function (resultDownload) { //window.location = ‘/NoteUpload/Download?fileGuid=’ + resultDownload.FileGuid // + ‘&filename=’ + resultDownload.FileName; window.location = ‘/NoteUpload/Download?fileGuid=’ + resultDownload.FileGuid; }, error: function (data) { alert(data); } }); } // return items; } ในส่วนของ controller public ActionResult DownloadAndZipFile(IEnumerable<int> fileItemsAll) { if (!(ViewBag.IsAuthorized = (azResult = azService.Authorize(AccountingOperation.NoteUploadReader, this).Result).IsAuthorize)) { Danger(string.Format(“ไม่มีสิทธิ์ใช้งานในส่วนนี้: {0} ({1})”, azResult.Operation.OP_NAME, Convert.ToString(azResult.OperationEnum))); return View(); } string handle = Guid.NewGuid().ToString(); MemoryStream output = new MemoryStream(); var zipMs = new MemoryStream(); string strZipName = “Accounting” + DateTime.Now.ToString(“yyyyMMdd”); TempData[handle] = fileItemsAll; var resultDownload = new { FileGuid = handle, FileName = strZipName + “.zip” }; return this.Json(resultDownload, JsonRequestBehavior.AllowGet); } public FileResult Download(string fileGuid) { if (!(ViewBag.IsAuthorized = (azResult = azService.Authorize(AccountingOperation.NoteUploadReader, this).Result).IsAuthorize)) { Danger(string.Format(“ไม่มีสิทธิ์ใช้งานในส่วนนี้: {0} ({1})”, azResult.Operation.OP_NAME, Convert.ToString(azResult.OperationEnum))); return null; } var zipMs = new MemoryStream(); string zipFisYear, zipPeriod, fileC, FileF, FileFinance,

Uploading Files into Database with ASP.NET MVC

April 24, 2018 14:51

การ upload file มีหลายรูปแบบ ไม่ว่าจะเป็นการ upload file แบบ copy ไว้บน server หรือจะเป็นการบันทึกลงในฐานข้อมูลเลยโดยตรง วันนี้จะขอนำเสนอในส่วนของการ upload file และบันทึกลงฐานข้อมูล โดยใช้ ASP.NET MVC ดังนี้ กำหนดไฟล์ที่ต้องการ upload ให้มีรูปแบบดังนี้ public class UploadModel { [Required] public HttpPostedFileBase File { get; set; } } ในส่วนของ View <form id=”uploader” enctype=”multipart/form-data” method=”POST”> <a type=”submit” href=”#” onclick=”uploadConfirm();” class=”btn btn-info”><span class=”glyphicon glyphicon-save”></span> Upload</a> </form> ในส่วนของ java script (สำหรับเรียก Controller) function uploadConfirm() { $.ajax({ type: ‘POST’, contentType: ‘application/json; charset=utf-8’, url: ‘@Url.Action(“CheckDataBeforeUpload”, “NoteUpload”)’, data: “{ ‘periodID’:’” + $(‘#selectedlistPeriods’).val() + “‘ ,’financeID’:’” + $(‘#selectedlistFinance’).val() + “‘ }”, success: function (resultSave) { }, error: function (data) { alert(data); } }); } ในส่วนของ Controller public async Task<ActionResult> UploadFile(UploadModel model, FormCollection form) { string fileName = Path.GetFileName(model.File.FileName); //แสดงชื่อไฟล์ string strFileName = Path.GetFileNameWithoutExtension(fileName); //แสดงชื่อไฟล์ string contentType = model.File.ContentType; //แสดงนามสกุลไฟล์ string FileExtension = fileName.Substring(fileName.LastIndexOf(‘.’) + 1).ToLower(); using (Stream fs = model.File.InputStream) // { using (BinaryReader br = new BinaryReader(fs)) { byte[] bytes = br.ReadBytes((Int32)fs.Length); //TO DO: Code ในส่วนที่ต้องการ insert ข้อมูลลง Database } } return RedirectToAction(“Index”); } จากตัวอย่างข้างต้น จะเป็นการ upload file ลงฐานข้อมูลโดยตรงในส่วนของรูปแบบการพัฒนาแบบ MVC ผู้เขียนหวังว่าอาจจะเป็นอีกทางเลือกหนึ่งของผู้พัฒนา ในการนำไปพัฒนาโปรแกรมต่อไปนะคะ ^_^ แหล่งอ้างอิง https://stackoverflow.com/questions/15106190/uploading-files-into-database-with-asp-net-mvc https://stackoverflow.com/questions/21677038/mvc-upload-file-with-model-second-parameter-posted-file-is-null/21677156

การเรียกใช้งาน (Register) Bootbox.js ด้วย C#.NET

July 15, 2017 01:36

ในการออกแบบเว็บฟอร์มบันทึกข้อมูลลงฐานข้อมูลนั้น นักพัฒนาเว็บแอ๊พปลิเคชั่นส่วนใหญ่จะออกแบบเป็นลำดับขั้นตอนการทำงานประมาณนี้ ผู้ใช้เปิดเว็บฟอร์มขึ้นมาด้วยเว็บบราวเซอร์ ผู้ใช้กรอกข้อมูลลงในเว็บฟอร์ม ผู้ใช้กดปุ่มบันทึกข้อมูล ระบบตรวจสอบ (Validate) ข้อมูลที่ผู้ใช้กรอกเข้ามา ถ้าผ่านก็บันทึกข้อมูลลงฐานข้อมูล ถ้าไม่ผ่านก็จะแจ้งข้อความแจ้งเตือนผู้ใช้งานให้ตรวจสอบข้อมูลใหม่อีกครั้ง ระบบจะแจ้งผลการบันทึกข้อมูลว่า “บันทึกข้อมูลสำเร็จ” กรณีที่บันทึกสำเร็จ หรือ “เกิดข้อผิดพลาดในการบันทึกข้อมูล” ในกรณีที่มีข้อผิดพลาด การพัฒนาเว็บด้วย ASP.NET นั้นในขั้นตอนที่ 4 จะถูกเขียนด้วยโค้ด C#.NET ซึ่งเป็น Server Side Script ส่วนขั้นตอนที่ 5 นั้นเราสามารถใช้ Dialog ของ Bootbox.js ซึ่งเป็น Client Side Script มาช่วยได้ ซึ่งในบทความนี้จะแสดงวิธีการเขียนโค้ด C#.NET ให้เรียกใช้ Bootbox Dialog ได้เลย (อ่านบทความ การสร้าง JavaScript Dialog ด้วย Bootbox.js ได้ที่นี่) และสร้างเป็นฟังก์ชั่นสำเร็จรูปไว้เรียกใช้งานใหม่ได้ (Reuse) การรันคำสั่ง Bootbox.js ซึ่งเป็น JavaScript ผ่าน C#.NET นั้นจะต้องใช้ ScriptManager ช่วยลงทะเบียนสคริปต์ (Register Script) ดังนี้ เพียงเท่านี้ก็สามารถนำส่วนของโค้ดดังรูปที่ 1 ไปใช้ในการแสดงข้อความแจ้งผู้ใช้หลังการบันทึกข้อมูลลงฐานข้อมูลได้แล้ว โดยมีตัวอย่างดังรูปที่ 2 ผลลัพธ์ที่ได้จากโค้ดข้างต้นจะเป็นดังรูปที่ 3 แน่นอนว่าในการพัฒนาเว็บแอ๊พปลิเคชัน 1 ครั้ง จะประกอบด้วยฟอร์มบันทึกข้อมูลมากมาย ทำให้ต้องเขียนโค้ดซ้ำๆ กันหลายครั้ง จากโค้ดข้างต้นเราสามารถ Optimize โค้ดได้อีกโดยให้สามารถเรียกใช้งานและแก้ไขโค้ดในภายหลังได้ง่ายขึ้น โดยการย้ายส่วนลงทะเบียนสคริปต์ไปไว้ในฟังก์ชั่นกลางสร้างเป็น Library (ในที่นี้จะตั้งชื่อว่า CoreBLL) สำเร็จรูปไว้ใช้ต่อไปดังนี้ หลังจากที่สร้าง CoreBLL เสร็จแล้วให้แก้ไขโค้ดบันทึกข้อมูลดังรูปที่ 5 จะเห็นว่า CoreBLL ทำให้โค้ดในการบันทึกข้อมูลฟอร์มสั้นลง ง่ายขึ้น และช่วยลดความผิดพลาดในการเขียนโค้ดลง ในขณะที่หน้าจอผลลัพธ์ (รูปที่ 3) ยังคงเหมือนเดิม

การสร้าง JavaScript Dialog ด้วย Bootbox.js

July 15, 2017 00:18

เชื่อว่านักพัฒนาเว็บแอปพลิเคชันทุกคนต้องเคยได้ใช้งาน JavaScript กันเพื่อทำให้เว็บแอปพลิเคชันสามารถทำงานได้ตามความต้องการ ตัวอย่างตัวที่ใช้กันบ่อยๆ น่าจะเป็น JavaScript Confirm ใช้ในการยืนยันก่อนการดำเนินการต่าง ๆ เช่นการลบข้อมูล เพื่อป้องกันการคลิกปุ่มลบโดยไม่ได้ตั้งใจ ดังรูป จากรูปจะเห็นว่า JavaScript Confirm บน Google Chrome และ Mozilla Firefox หน้าตาไม่เหมือนกัน ทั้งๆที่ใช้โค้ดเดียวกัน และปัญหาอีกอย่างหนึ่งที่พบคือ หากเราต้องการให้ข้อความ “คุณต้องการลบข้อมูลรายการนี้ใช่หรือไม่?” มีการขึ้นบรรทัดใหม่ ใส่สี เพิ่มขนาดฟอนต์ จัดตัวหนา ตัวเอียงก็ไม่สามารถทำได้เลย แต่ถ้าต้องการให้แก้ปัญหาเหล่านี้ได้ก็ต้องใช้ตัวช่วย นั่นคือ Bootbox.js ซึ่งเป็น JavaScript library ที่ใช้งานร่วมกับ Bootstrap โดยใช้ Bootstrap modal มาทำหน้าที่แทน JavaScript Dialog ต่างๆ ทั้ง Alert, Confirm, Prompt และรวมถึง Custom Dialog ด้วย ทำให้หน้าตาของ Dialog จะเหมือนกันทุก Browser และสามารถจัดรูปแบบการแสดงผลได้ตามต้องการโดยใช้ CSS วิธีการติดตั้ง เข้าไปที่เว็บไซต์ http://bootboxjs.com และเลือกดาวน์โหลดไฟล์ชื่อ bootbox.min.js หรือถ้าไม่ต้องการดาวน์โหลดก็สามารถใช้ CDN (https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js) ได้เช่นกัน ใส่โค้ดอ้างอิงไปยัง bootbox.min.js ใน header tag ดังนี้ <script src=”path/to/script/bootbox.min.js”></script> หรือ <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js“></script> ตัวอย่างการใช้งาน Confirm Dialog กำหนดชื่อ CSS class ให้กับปุ่มลบ ในที่ตั้งชื่อว่า “confirm” แทรกโค้ด JavaScript ใน HTML ดังนี้ ลองเปิดเว็บด้วย Google Chrome และ Mozilla Firefox ก็จะได้ผลลัพธ์เหมือนกันดังรูป นอกจาก Confirm Dialog แล้ว ท่านสามารถดูตัวอย่าง Dialog แบบอื่นๆ ได้จากที่นี่ เพียงเท่านี้ก็จะสามารถสร้าง Dialog สวยๆ และมีความยืดหยุ่นไว้ใช้งานได้แล้ว

การเชื่อมต่อ OAuth2 ด้วย .NET C#

April 25, 2017 06:21

อยาก Login ด้วย OAuth2 กับ .NET C# ต้องทำอย่างไร สำหรับตัวอย่างนี้เอามาจาก GitHub Project : https://github.com/titarenko/OAuth2[1] ซึ่งเป็น Code ตัวอย่างนำมาเพิ่ม ในส่วนของการเชื่อมต่อ PSU Passport ดังนี้ เพิ่ม class file ใน project OAuth2->Client->Impl ชื่อ PassportClient.cs เนื้อหาดังนี้ using Newtonsoft.Json.Linq; using OAuth2.Configuration; using OAuth2.Infrastructure; using OAuth2.Models; namespace OAuth2.Client.Impl { /// <summary> /// Passport authentication client. /// </summary> public class PassportClient : OAuth2Client { /// <summary> /// Initializes a new instance of the <see cref=”PassportClient”/> class. /// </summary> /// <param name=”factory”>The factory.</param> /// <param name=”configuration”>The configuration.</param> public PassportClient(IRequestFactory factory, IClientConfiguration configuration) : base(factory, configuration) { } /// <summary> /// Defines URI of service which issues access code. /// </summary> protected override Endpoint AccessCodeServiceEndpoint { get { return new Endpoint { BaseUri = “https://oauth.psu.ac.th”, Resource = “?oauth=authorize” }; } } /// <summary> /// Defines URI of service which issues access token. /// </summary> protected override Endpoint AccessTokenServiceEndpoint { get { return new Endpoint { BaseUri = “https://oauth.psu.ac.th”, Resource = “?oauth=token” }; } } /// <summary> /// Defines URI of service which allows to obtain information about user which is currently logged in. /// </summary> protected override Endpoint UserInfoServiceEndpoint { get { return new Endpoint { BaseUri = “https://oauth.psu.ac.th”, Resource = “?oauth=me” }; } } /// <summary> ///