Tag: c#

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

    อยาก  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>
          /// Friendly name of provider (OAuth2 service).
          /// </summary>
          public override string Name
          {
              get { return "Passport"; }
          }
      
      
          /// <summary>
          /// Should return parsed <see cref="UserInfo"/> from content received from third-party service.
          /// </summary>
          /// <param name="content">The content which is received from third-party service.</param>
          protected override UserInfo ParseUserInfo(string content)
          {
              var response = JObject.Parse(content);
              return new UserInfo
              {
                   Id = response["user_login"].Value<string>(),
                   FirstName = response["user_login"].Value<string>(),
                   LastName = "",
                   Email = response["user_email"].SafeGet(x => x.Value<string>())
              };
          }
        }
      }
      
    • จากนั้นทำการแก้ไข Web.config ใน Project OAuth2.Example เพิ่มข้อความดังนี้
       <add clientType="PassportClient"
       enabled="true"
       clientId="testclient3"
       clientSecret="testpass3"
       redirectUri="~/auth" />
    • โดยต้องแจ้ง Redirect URI ให้ผู้ดูแลระบบ จากนั้นทางผู้ดูแลระบบจะแจ้ง Client ID และ Client Secret รวมถึงชื่อ Server ในการใช้งานให้ทราบ (ชื่อ server ใส่ในไฟล์ก่อนหน้านี้)
    • เมื่อรันโปรแกรม จะปรากฎหัวข้อ Login มากมายให้เลือก ให้ทดสอบในส่วนของ Login passport
    • หลังจากนั้นจะปรากฎหน้า Login ซึ่งอันนี้หน้าตาแล้วแต่ผู้ดูแลจะสร้างครับ (อันนี้ผมทำแค่เป็นตัวอย่างนะครับ)
    •  หลักจากนั้นจะปรากฎหน้าถามเพื่อขออนุญาตให้สิทธิ์การใช้งาน
    • จากนั้นระบบจะเด้งกลับมายังหน้าแรกแต่จะแสดงข้อความ Profile ดังรูป
    •   ตัวอย่างนี้ในการใช้งานจริงต้องนำไปประยุกต์เองครับ ซึ่งแสดงให้เห็นวิธีการใช้งาน OAuth สำหรับ .NET C# ว่าวิธีไม่ได้ต่างกับการใช้งาน CMS แต่อย่างใดครับ

    ==================================

    Reference :

    [1] OAuth2 client implementation for .NET : https://github.com/titarenko/OAuth2

  • วิธีเขียน web service ตรวจสอบไฟล์ใน url ที่ส่งมาว่ามีไฟล์หรือไม่

    เนื่องจากผู้เขียนได้มีการทำงานที่ต้องตรวจสอบไฟล์ จึงอยากจะแชร์ประสบการณ์การเขียน web service โดยยกตัวอย่างการเขียนดังนี้

    โดยจากตัวอย่างผู้เขียนได้ใช้ฟังก์ชัน client.DownloadData(url) โดยผลลัพธ์ที่ได้ มีดังนี้

    • ถ้าไม่มีไฟล์อยู่ก็จะตอบกลับมาเป็น “File not found.”
    • ถ้ามีไฟล์ระบบจะตอบกลับมาว่ามีจริง

    ซึ่งหวังว่าจะมีประโยชน์ไม่มากก็น้อยค่ะ

     

  • ทำอย่างไรให้เว็บไซต์ที่เราพัฒนาสามารถอัพโหลดไฟล์แบบคราวละหลายไฟล์ได้โดยไม่จำกัดจำนวน ด้วย ASP.NET(C#)

              ในการพัฒนาเว็บไซต์ บางครั้งอาจมีความจำเป็น หรือความต้องการจากผู้ใช้ที่ต้องการให้เว็บไซต์ดังกล่าวมีฟังก์ชั่นการทำงานในส่วนของการอัพโหลดไฟล์เพื่อแนบไฟล์เข้าไปในระบบและบันทึกลงฐานข้อมูล เพื่อให้สามารถเรียกดูข้อมูลการแนบไฟล์ดังกล่าวได้ในภายหลัง การอัพโหลดไฟล์จึงถือเป็นอีกหนึ่งฟังก์ชั่นการทำงานที่นักพัฒนาเว็บไซต์ควรทราบไว้ ซึ่งลักษณะการทำงานโดยทั่วไปส่วนใหญ่เราจะใช้ Control ที่มีเรียกว่า “FileUpload” แบบอัพโหลดครั้งละ 1 ไฟล์ และหากมีมากกว่านั้นก็จะมีการสร้างตัว FileUpload มาวางไว้ในหน้าจอเพิ่มตามจำนวนที่ต้องการแบบตายตัว เช่น หากในหน้าจอดังกล่าวต้องการสามารถให้ทำการอัพโหลดไฟล์ได้ไม่เกิน 5 ไฟล์ต่อการอัพโหลดแต่ละครั้งก็จะมีการลากคอนโทรล FileUpload มาวางไว้ในหน้าจอจำนวน 5 ตัว เพื่อให้สามารถรองรับความต้องการในการอัพโหลดไฟล์ของผู้ใช้ได้ แต่ผู้เขียนพบว่าการทำงานดังกล่าวอาจไม่รองรับความต้องการในการทำงานของผู้ใช้ที่จะเพิ่มไฟล์ได้ครั้งละหลายๆไฟล์โดยไม่จำกัดและผู้พัฒนาไม่จำเป็นต้องระบุหรือสร้างคอนโทรล FileUpload มาวางในหน้าจอในจำนวนที่ตายตัวโดยไม่จำเป็น โดยผู้ใช้สามารถคลิกปุ่มเพื่อเพิ่มจำนวนในการอัพโหลดไฟล์แต่ละครั้งได้เองเพื่อความยืดหยุ่นในการใช้งาน ในบทความนี้ ผู้เขียนจึงขอเสนอแนวทางในการพัฒนาเว็บไซต์โดยใช้ ASP.NET(C#) ในแบบที่มีการอัพโหลดไฟล์ได้คราวละหลายๆไฟล์ในแบบไม่ต้องจำกัดจำนวนคอนโทรล FileUpload ในหน้าจอโดยมีการระบุจำนวนไฟล์ที่สามารถอัพโหลดได้ในแต่ละครั้งโดยผู้พัฒนาแบบตายตัวอย่างเช่นที่กล่าวไว้ข้างต้น

              หลังจากที่ได้มีการศึกษาเพิ่มเติม ผู้เขียนพบว่าใน .NET Framework เวอร์ชั่น 4.5 นั้นจะมีการเพิ่ม Feature การทำงานในส่วนนี้ให้กับคอนโทรล FileUpload ไว้แล้วผ่าน Properties ที่เรียกว่า AllowMultiple ซึ่งจะทำให้สะดวกต่อการพัฒนาและสามารถลดปัญหาดังกล่าวข้างต้นได้ แต่สำหรับเวอร์ชั่นที่ต่ำกว่ายังคงต้องมีการปรับปรุงพัฒนาเพิ่มเติมเอง ในบทความนี้จึงขอยกตัวอย่างการพัฒนาทั้ง 2 แบบในเบื้องต้นโดยจะเน้นไปในแบบเวอร์ชั่นที่ต่ำกว่า 4.5 เพื่อให้ผู้อ่านได้นำไปเป็นแนวทางในการพัฒนาต่อไป ดังนี้
    1. การอัพโหลดไฟล์คราวละหลายๆไฟล์โดยใช้ .Net Framework เวอร์ชั่นที่ต่ำกว่า 4.5

              ในบทความนี้ ผู้เขียนขอเสนอแนวทางแบบที่เป็นการพัฒนาโดยใช้จาวาสคริปต์เข้ามาเป็นตัวช่วยให้สามารถอัพโหลดไฟล์ได้ครั้งละหลายไฟล์ต่อการอัพโหลดแต่ละครั้ง เพื่อลดจำนวนการโหลดของหน้าจอและทำให้ผู้ใช้รู้สึกว่าการทำงานดังกล่าวเป็นไปด้วยความรวดเร็วไม่ต้องใช้เวลานาน โดยจะอธิบายทีละขั้นตอน ดังนี้

    1) ออกแบบหน้าจอการทำงานในฝั่ง Client  ทำการออกแบบหน้าจอการทำงานไว้ในเบื้องต้น โดยมีการสร้างคอนโทรล FileUpload มาตั้งต้นไว้ 1 ตัว และมีปุ่มเพื่อให้ทำการเพิ่มคอนโทรล FileUpload ได้เองอัตโนมัติโดยตัวผู้ใช้เอง และปุ่มที่ใช้ในการอัพโหลดไฟล์จากคอนโทรล FileUpload ทั้งหมด ดังนี้

    <body>
    <form id="form1" runat="server">
    <div>
     <div id="fileUploadarea" class="Divborder">
      <div id='divfirstUpload'><br /><asp:FileUpload ID="fuMultiple" runat="server" CssClass="fileUpload" onchange="javascipt:FileValidate(this,5);" />&nbsp;  <input style="display:inline;" id="BtnRemove" type="button" value="Remove" onclick="DelFileUpload('divfirstUpload');" /> 
    </div> 
    </div>
    <br /> 
    <div>&nbsp; 
    <input style="display:inline; background-color: #A4EDFF; color: #333333; width: 150px; font-weight: bold;" id="btnAddMoreFiles" type="button" value="Add more files" onclick="AddMoreFilesWithMax(6);" />
    &nbsp; <asp:Button ID="BtnUpload" runat="server" onclick="BtnUpload_Click" Text="Upload" OnClientClick="return ValidateFileUpload();" BackColor="#3399FF" Font-Bold="True" ForeColor="White" Width="150px" /> 
    <br> 
    <asp:GridView ID="gvResult" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" Width="410px">
    <RowStyle BackColor="#EFF3FB" /> 
    <Columns> 
    <asp:BoundField DataField="Name" HeaderText="ชื่อไฟล์"> 
    <ItemStyle Width="200px" /> </asp:BoundField> 
    <asp:BoundField DataField="FileSize" HeaderText="ขนาดไฟล์(KB)"> 
    <ItemStyle HorizontalAlign="Right" Width="120px" /> 
    </asp:BoundField> 
    </Columns> 
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> 
    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" /> <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" /> <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> 
    <EditRowStyle BackColor="#2461BF" /> <AlternatingRowStyle BackColor="White" /> 
    </asp:GridView> 
    </div> 
    </div> 
    </form> 
    </body>

    2) ในส่วนของจาวาสคริปต์ที่ใช้เป็นตัวช่วยในการตรวจสอบ โดยจะแยกเป็นแต่ละ function ดังนี้

    2.1) ฟังก์ชั่นที่ใช้ในการเพิ่มไฟล์ได้ไม่จำกัด โดยใช้ชื่อว่า AddMoreFiles()

    <script language="javascript" type="text/javascript">
    
    function AddMoreFiles() {
    
      if (!document.getElementById && !document.createElement)
        return false;
    ////อ้างอิงถึง div ที่มีชื่อว่าfileUploadarea
      var fileUploadarea = document.getElementById("fileUploadarea"); 
      if (!fileUploadarea) return false; 
       var newLine = document.createElement("br"); fileUploadarea.appendChild(newLine); 
       var newFile = document.createElement("input"); 
       newFile.type = "file"; newFile.setAttribute("class", "fileUpload");
    
    /////กำหนดค่าเริ่มต้นให้กับตัวแปร AddMoreFiles.lastAssignedId 
    เพื่อใช้ในการกำหนด ID ให้กับคอนโทรลที่สร้างขึ้น และเป็นตัวนับ
      if (!AddMoreFiles.lastAssignedId) 
        AddMoreFiles.lastAssignedId = 1;
    
     //////กำหนดค่าแอททริบิวต์ต่างๆให้กับ FileUpload ที่ทำการสร้างใหม่ ในทีนี้คือ id และ name
        newFile.setAttribute("id", "FileUpload" + AddMoreFiles.lastAssignedId);  
        newFile.setAttribute("name", "FileUpload" + AddMoreFiles.lastAssignedId); 
    
     //////สร้าง div ขึ้นมาใหม่ และกำหนดค่าแอททริบิวต์ต่างๆให้กับ div ที่ทำการสร้างใหม่ 
    ในทีนี้คือ id และ เพิ่มคอนโทรลที่สร้าง tag ไว้ด้านบนเข้ามาไว้ใน div 
        var div = document.createElement("div"); 
        div.appendChild(newFile); 
        div.setAttribute("id", "div" + AddMoreFiles.lastAssignedId); 
    
    //////เพิ่ม div ที่สร้างใหม่ไปยัง div ที่มีชื่อว่า fileUploadarea และเพิ่มค่าของตัวแปร AddMoreFiles.lastAssignedId   
        fileUploadarea.appendChild(div); 
        AddMoreFiles.lastAssignedId++; 
    }

    2.2) ฟังก์ชั่นที่ใช้ในการเพิ่มไฟล์ได้โดยมีการระบุจำนวนสูงสุดที่ยอมให้อัพโหลดแต่ละครั้ง ในกรณีที่ต้องการระบุค่าจำนวนไฟล์ที่ต้องการให้ผู้ใช้สามารถอัพโหลดได้สูงสุดในแต่ละครั้ง สามารถปรับแก้เพิ่มเติมจากฟังก์ชั่นก่อนหน้านี้ โดยการส่งพารามิเตอร์จำนวนมากสุดที่ยอมให้สร้างตัวอัพโหลดไฟล์ได้ โดยใช้ชื่อฟังก์ชั่นว่า AddMoreFilesWithMax(x) ดังนี้

    function AddMoreFilesWithMax(x) 
    { //////กำหนดค่าให้กับ AddMoreFiles.lastAssignedId 
    เพื่อเป็นค่าตั้งต้นในการไปเซทค่า id และ name ของคอนโทรลที่สร้างใหม่ 
    โดยในที่นี้เริ่มต้นที่ 2 เนื่องจากเดิมมีคอนโทรลอัพโหลดไฟล์อยู่เดิมแล้ว 1 ตัว
      if (!AddMoreFiles.lastAssignedId)
          AddMoreFiles.lastAssignedId = 2;
    
       if (!document.getElementById && !document.createElement)
          return false; 
      var fileUploadarea = document.getElementById("fileUploadarea");
        if (!fileUploadarea) return false;
    
    /////เป็นการตรวจสอบเงื่อนไขว่ายังไม่เกินจำนวนมากสุดที่ระบุไว้ผ่านพารามิเตอร์ x
          if (AddMoreFiles.lastAssignedId <= x) 
          { 
          var newLine = document.createElement("br"); 
    
          //สร้างปุ่ม Remove เพื่อใช้ลบคอนโทรล FileUpload ที่สร้างขึ้นออกโดยผู้ใช้ 
          var newbtnDel = document.createElement("input"); 
          newbtnDel.setAttribute("id", "btnDelUpload" + AddMoreFiles.lastAssignedId);
          newbtnDel.setAttribute("name", "btnDelUpload" + AddMoreFiles.lastAssignedId); 
          newbtnDel.setAttribute("value", "Remove");   
          newbtnDel.type = "button"; 
    
         //////สร้างคอนโทรล FileUpload ขึ้นใหม่และกำหนดแอททริบิวต์ต่างๆให้
          var newFile = document.createElement("input"); 
          newFile.type = "file"; 
          newFile.setAttribute("class", "fileUpload");
          newFile.setAttribute("id", "FileUpload" + AddMoreFiles.lastAssignedId); 
          newFile.setAttribute("name", "FileUpload" + AddMoreFiles.lastAssignedId);
    
    //////เป็นส่วนของการเรียกฟังก์ชั่นในการตรวจสอบไฟล์ที่ทำการอัพโหลดว่าถูกต้องตรงตามเงื่อนไขหรือไม่
         เมื่อมีการเลือกไฟล์ใดๆจากผู้ใช้ ซึ่งจะพูดถึงในส่วนถัดไปในการสร้างฟังก์ชั่น FileValidate(ctrl,maxVal) 
          newFile.setAttribute('onchange', 'javascipt:FileValidate(this,5);');
    
    //////สร้าง div ขึ้นมาใหม่ และกำหนดค่าแอททริบิวต์ต่างๆให้กับ div ที่ทำการสร้างใหม่ 
    ในทีนี้คือ id และ เพิ่มคอนโทรลที่สร้าง tag ไว้ด้านบนเข้ามาไว้ใน div 
          var div = document.createElement("div");
          div.appendChild(newLine);
          div.appendChild(newFile);
    //////เพิ่มช่องว่างระหว่างคอนโทรลอัพโหลดไฟล์และปุ่ม Remove เพื่อความสวยงาม
          div.appendChild(document.createTextNode('\u00A0'));
          div.appendChild( newbtnDel);
          div.setAttribute("id", "div" + AddMoreFiles.lastAssignedId);
    
    //////เพิ่ม event การคลิกปุ่ม Remove เพื่อให้ไปเรียกใช้ฟังก์ชั่น DelFileUpload
    โดยส่งค่า id ของ div ที่ต้องการให้ลบออกซึ่งจะกล่าวถึงในส่วนถัดไปของการสร้างฟังก์ชั่น DelFileUpload(divid);
          newbtnDel.setAttribute('onclick', 'javascipt:DelFileUpload(\'' + "div" + AddMoreFiles.lastAssignedId + '\');');
    
          fileUploadarea.appendChild(div);
          AddMoreFiles.lastAssignedId++; } 
    
    ///////กรณีที่มีจำนวนตัวอัพโฟลดไฟล์ที่ถูกสร้างขึ้นเองเกินกว่าที่กำหนด(ค่าพารามิเตอร์ x) 
    จะแสดงข้อความให้ทราบ
     else { 
           alert("ขออภัย ท่านสามารถอัพโหลดไฟล์ได้สูงสุดครั้งละไม่เกิน " + x + " ไฟล์ต่อการอัพโหลดแต่ละครั้ง กรุณาลองใหม่อีกครั้ง"); 
          return false;
           } 
          }

    2.3) ฟังก์ชั่นที่ใช้ในการตรวจสอบขนาดของไฟล์ โดยมีการระบุขนาดสูงสุดที่ยอมให้อัพโหลดแต่ละครั้ง โดยใช้ชื่อฟังก์ชั่นว่า FileValidate(ctrlFile,MaxSize)

    ////เป็นการประกาศตัวแปรที่ใช้ในการตรวจสอบชนิดของไฟล์ที่ยอมให้อัพโหลดได้
    var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png", ".pdf"];
    function FileValidate(ctrlFile,MaxSize) 
    {//////พารามิเตอร์ที่รับเข้ามาคือตัวคอนโทรลของการอัพโหลดไฟล์ที่ต้องการตรวจสอบ(ctrlFile) 
    และขนาดสูงสุดของไฟล์ที่ยอมให้อัพโหลดในแต่ละคอนโทรล(MaxSize)
    
    ////ดึงค่าชื่อของไฟล์ที่อัพโหลดที่ต้องการตรวจสอบ
      var sFileName = ctrlFile.value;
    
    /////ตรวจสอบเมื่อพบชื่อไฟล์ที่ดึง
       if (sFileName.length > 0) 
       { 
         var blnValid = false; 
    //////////ตรวจสอบนามสกุลของไฟล์ที่ดึงมาจากชื่อไฟล์กับค่าของนามสกุลไฟล์ที่ยอมให้อัพโหลด
    จากตัวแปร _validFileExtensions
         for (var j = 0; j < _validFileExtensions.length; j++) 
          { var sCurExtension = _validFileExtensions[j]; 
           if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) 
           { 
             blnValid = true; 
             break; 
            } 
          }   
    //////กรณีไฟล์ดังกล่าวมีนามสกุลที่แตกต่างจากที่กำหนดจะแสดงข้อความแจ้งเตือน 
    และล้างค่าของชื่อไฟล์ในคอนโทรลอัพโหลดไฟล์ตัวดังกล่าว
         if (!blnValid) 
         { alert("ไม่สามารถอัพโหลดไฟล์ดังกล่าวได้ เนื่องจากรองรับเฉพาะไฟล์ที่มีนามสกุลดังนี้เท่านั้น: " + _validFileExtensions.join(", ")); 
          ctrlFile.value = ""; 
          return false; 
         } 
         else 
         {
    /////หากไฟล์ที่อัพโหลดมีนามสกุลไฟล์ตามที่ระบุ จะทำการตรวจสอบขนาดของไฟล์ว่าไม่เกินจากขนาดสูงสุด
    ที่กำหนดหรือไม่ โดยมีการคำนวณหน่วยเป็น MB
           var fileSize = parseFloat(ctrlFile.files[0].size / 1048576).toFixed(2);
    
    /////หากขนาดของไฟล์เกินกว่าที่กำหนดจะแสดงข้อความแจ้งเตือน และล้างค่าไฟล์ที่ต้องการอัพโหลด
    ในคอนโทรลอัพโหลดไฟล์ดังกล่าว
           if (fileSize > MaxSize) 
            { alert(" ขออภัย ขนาดของไฟล์ที่ต้องการอัพโหลดมีขนาดใหญ่เกินกว่าทีกำหนด(" + MaxSize + " MB)"); 
              ctrlFile.value = ""; 
              return false;   
           } 
         }   
        }   
      return true; 
      }

    2.4) ฟังก์ชั่นที่ใช้ในการตรวจสอบว่ามีการเลือกไฟล์ที่ต้องการอัพโหลดแล้วหรือไม่ เมื่อมีการกดปุ่ม “Upload” โดยใช้ชื่อฟังก์ชั่นว่า ValidateFileUpload() 

    function ValidateFileUpload() { 
    //////เป็นการค้นหาคอนโทรลไฟล์อัพโหลดที่มีในหน้าจอโดยใช้ tag input 
    และตรวจสอบที่มี type เป็น "file" ใส่ไว้ในตัวแปร arrInputs
        var arrInputs = document.getElementsByTagName("input");
        var blnValid; 
        var oInput;
        for (var i = 0; i < arrInputs.length; i++)
         { oInput = arrInputs[i]; 
          if (oInput.type == "file") 
          { 
           var sFileName = oInput.value; 
    
     ///////หากพบตัวอัพโหลดไฟล์ตัวใดที่ยังไม่ได้ทำการเลือกไฟล์ไว้ จะทำการแสดงข้อความแจ้งเตือนให้ทราบ
           if (sFileName.length == 0) 
             { blnValid = false; 
              alert("ขออภัย ไม่สามารถอัพโหลดไฟล์ได้ เนื่องจากพบว่ามีบางไฟล์ไม่ได้ถูกเลือก กรุณาลองใหม่อีกครั้ง"); 
              return false;   
             } 
          }   
         }   
    return true; 
    }

    2.5) ฟังก์ชั่นที่ใช้ในการลบคอนโทรลที่ใช้ในการอัพโหลดไฟล์ โดยใช้ชื่อฟังก์ชั่นว่า DelFileUpload(dv) ซึ่งจะส่งพารามิเตอร์เป็น id ของ div ตัวที่ต้องการให้ลบ และถูกเรียกใช้เมื่อมีการกดปุ่ม “Remove”

    function DelFileUpload(dv) 
    { ////ค้นหา div ตาม id ที่ส่งเข้ามา
       var elem = document.getElementById(dv); 
      ///ทำการลบ div นั้นออกจากหน้าจอและลดค่าของ AddMoreFiles.lastAssignedId ลง 1
    เพื่อใช้ในการคำนวณค่าสูงสุดและกำหนด tag ของ id และ name ของคอนโทรลที่สร้างใหม่ต่อไป
       elem.parentNode.removeChild(elem); 
       AddMoreFiles.lastAssignedId = AddMoreFiles.lastAssignedId - 1; 
    }

    3) ในฝั่งเซฺิร์ฟเวอร์ (C#)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    /////เป็น namespace ที่ต้องอ้างอิงเพิ่มเพื่อใช้ในการจัดการข้อมูลกับ datatable
    using System.Data;
    /////เป็น namespace ที่ต้องอ้างอิงเพิ่มเพื่อใช้ในการจัดการเกี่ยวกับการอัพโหลดไฟล์
    using System.IO;
    public partial class MultipleUpload : System.Web.UI.Page
    {
    protected void BtnUpload_Click(object sender, EventArgs e)
    {
      try
      {
    
     //////สมมุติเพื่อนำไปประยุกต์ใช้กับการบันทึกลงฐานข้อมูลต่อไป 
    โดยสร้างโครงสร้าง datatable ที่ชื่อว่า dtFiles 
         DataTable dtFiles = new DataTable();
         dtFiles.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
         new DataColumn("Name", typeof(string)),
         new DataColumn("FileSize",typeof(string)) });
    
    ////เป็นการดึงคอนโทรลในการอัพโหลดไฟล์ที่ถูกสร้างขึ้นและวนรอบในการบันทึกไฟล์ดังกล่าว
     HttpFileCollection hfc = Request.Files;
     for (int i = 0; i < hfc.Count; i++)
     {
        HttpPostedFile hpf = hfc[i];
       if (hpf.ContentLength > 0)
        {
    //////บันทึกไฟล์ตามที่ระบุไว้
        hpf.SaveAs(Server.MapPath("~/uploads/") + System.IO.Path.GetFileName(hpf.FileName));
    
    ////เพิ่มข้อมูลลงไปใน datatable ที่สร้างไว้ สำหรับการใช้งานจริงอาจเป็นการติดต่อเพื่อบันทึกลงฐานข้อมูล 
        dtFiles.Rows.Add(i,hpf.FileName, hpf.ContentLength / 1024);
         }
       }
     if (dtFiles.Rows.Count > 0) 
     {
    //////ดึงข้อมูลจาก datatable มาแสดงในกริดวิว
        gvResult.DataSource = dtFiles;
        gvResult.DataBind();
     
     }
       }
      }
      catch (Exception)
      {
       throw;
       }
      }
    }
    

    เพิ่มเติม :
    หากต้องการตกแต่งเพื่อความสวยงามสามารถใส่ StyleSheet เพิ่มเติมได้ ดังตัวอย่างต่อไปนี้

    <style type="text/css">
      .fileUpload
      {
       width:255px;
       font-size:11px;
       color:#000000;
       border:solid;
       border-width:1px;
       border-color:#7f9db9;
       height:17px;
      }
     .Divborder
      {
       border: 2px solid;
       border-radius: 5px;
       padding:10px;
       width:390px;
      }
    </style>
    

    ตัวอย่างผลลัพธ์ที่ได้

    1) แสดงหน้าจอ โดยแรกเริ่มมีอัพโหลดไฟล์ตั้งต้น 1 ตัว

    uploadsingle

    2) แสดงหน้าจอเมื่อมีการกดปุ่ม “Add more files” uploadmulti2

    3) แสดงผลลัพธ์หลังจากบันทึกข้อมูลเรียบร้อยแล้วmultipleResult2

    2. การอัพโหลดไฟล์คราวละหลายๆไฟล์โดยใช้ .Net Framework เวอร์ชั่น 4.5  ซึ่งในบทความนี้จะไม่ลงรายละเอียดมากนัก ผู้อ่านสามารถนำไปประยุกต์เพิ่มเติมได้ โดยจะอธิบายทีละขั้นตอนคร่าวๆ ดังนี้

    1) การออกแบบในหน้าจอฝั่ง Client

    <body>
    <form id="form1" runat="server">
    <div>
    <asp:FileUpload ID="file_upload" runat="server" AllowMultiple="true" />
    <asp:Button ID="btnFileUpload" runat="server" Text="Upload" OnClick="btnFileUpload_Click" />
    <asp:Label ID="lblUploadStatus" runat="server"></asp:Label><br />
     <asp:GridView ID="gvResult" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" Width="410px">
     <AlternatingRowStyle BackColor="White" />
     <Columns>
     <asp:BoundField DataField="Name" HeaderText="ชื่อไฟล์">
     <ItemStyle Width="300px" />
     </asp:BoundField>
     <asp:BoundField DataField="filesize" HeaderText="ขนาดไฟล์(KB)">
     <ItemStyle HorizontalAlign="Right" Width="110px" />
     </asp:BoundField>
     </Columns>
     <EditRowStyle BackColor="#2461BF" />
     <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
     <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
     <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
     <RowStyle BackColor="#EFF3FB" />
     <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
     <SortedAscendingCellStyle BackColor="#F5F7FB" />
     <SortedAscendingHeaderStyle BackColor="#6D95E1" />
     <SortedDescendingCellStyle BackColor="#E9EBEF" />
     <SortedDescendingHeaderStyle BackColor="#4870BE" />
     </asp:GridView>
    </div>
    </form>
    </body>

    2) การพัฒนาในฝั่งเซิร์ฟเวอร์(C#)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.IO;
    using System.Data;
    namespace WebAppTest
    {
     public partial class MultipleUpload : System.Web.UI.Page
     {
     protected void btnFileUpload_Click(object sender, EventArgs e)
     {
     try
     {
    ///////การตรวจสอบขนาดไฟล์และไฟล์ต้องเป็นชนิด image/jpeg เท่านั้น
     if (file_upload.HasFile && file_upload.PostedFiles.All(x => x.ContentType == "image/jpeg" && x.ContentLength < 102400))
     {
    ///////ประกาศตัวแปร และกำหนดโครงสร้างของ datatable
     int i = 1;
     DataTable dtFiles = new DataTable();
     dtFiles.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
     new DataColumn("Name", typeof(string)),
     new DataColumn("FileSize",typeof(string)) });
     foreach (var file in file_upload.PostedFiles)
     {
    //////บันทึกไฟล์ที่เลือก
       file_upload.SaveAs(Server.MapPath("~/Fileupload/") + Path.GetFileName(file.FileName));
    ////วนบันทึกข้อมูลไฟล์ที่อัพโหลดลงใน datatable  
        dtFiles.Rows.Add(i, file.FileName, file.ContentLength / 1024);
     }
    
    ////แสดงข้อความเมื่อการอัพโหลดเสร็จสมบูรณ์
       lblUploadStatus.Text = "บันทึกสำเร็จ";
    
    ////แสดงค่าที่ได้ลงในกริดวิว
     if (dtFiles.Rows.Count > 0)
     {
     gvResult.DataSource = dtFiles;
     gvResult.DataBind();
    
     }
     }
     else
     {
    ////แสดงข้อความแจ้งเตือนกรณีเกิดปัญหาไฟล์มีขนาดใหญ๋เกินกว่าที่กำหนดและไม่ใช่ชนิด image/jpeg
       lblUploadStatus.Text = "กรุณาเลือกไฟล์ที่ต้องการอัพโหลดให้เหมาะสม";
     }
     }
     catch (Exception ex)
     {
    ////แสดงข้อความแจ้งเตือนกรณีเกิดปัญหาในการอัพโหลดไฟล์
       lblUploadStatus.Text = "เกิดข้อผิดพลาดในการอัพโหลดไฟล์ :" + ex.Message;
     }
     }
     }
    }

    ตัวอย่างผลลัพธ์ที่ได้

    1) ก่อนทำการอัพโหลดไฟล์

    multiple4_5_0

    2) หลังอัพโหลดไฟล์ทั้งหมดเรียบร้อยแล้ว

    multiple4_5

    หมายเหตุ : หากกำหนดค่าให้กับ Properties ที่ชื่อว่า AllowMultiple=”false ตอนเลือกไฟล์ที่จะอัพโหลดจะสามารถเลือกได้เพียงไฟล์เดียวเท่านั้น

              จากบทความและตัวอย่างข้างต้น จะเห็นว่า ลักษณะผลลัพธ์ที่ได้จะคล้ายคลึงกัน แต่จะแตกต่างกันในส่วนของความซับซ้อนในการตรวจสอบความถูกต้องของข้อมูลไฟล์แนบที่รับเข้ามา ซึ่งผู้พัฒนาเองสามารถเลือกใช้วิธีที่ตนถนัดและขึ้นกับเวอร์ชั่นของ .NET Framework ที่กำลังพัฒนา รวมถึงเงื่อนไขของการตรวจสอบให้ตรงตามความต้องการของผู้ใช้มากที่สุด โดยเนื้อหาในบทความนี้เป็นเพียงแนวทางหนึ่งให้กับท่านในเบื้องต้นเท่านั้น ท่านสามารถนำไปประยุกต์ต่อยอดเพิ่มเติมได้ และผู้เขียนหวังเป็นอย่างยิ่งว่าบทความนี้จะเป็นประโยชน์กับผู้พัฒนาที่กำลังค้นหาวิธีการอัพโหลดไฟล์คราวละหลายไฟล์นี้อยู่เช่นกัน หากมีเนื้อหาส่วนใดผิดพลาด ผู้เขียนขออภัยไว้ ณ ที่นี้ด้วย ขอบคุณค่ะ ^^
    แหล่งข้อมูลอ้างอิง :
    http://www.aspsnippets.com/Articles/Uploading-Multiple-Files-using-JavaScript-Dynamic-FileUpload-Controls-in-ASP.Net.aspx
    http://www.codeproject.com/Articles/667604/Upload-multiple-files-in-asp-net
    http://www.c-sharpcorner.com/UploadFile/99bb20/upload-multiple-files-using-fileupload-control-in-Asp-Net-4/

  • ทำความรู้จักและเรียนรู้การใช้งานเบื้องต้นกับ StringBuilder ใน .NET Framework(C#)

              โดยปกติแล้วนั้น ผู้พัฒนาโปรแกรมโดยใช้ .NET Framework มักจัดการข้อมูลที่เป็นอักษรหรือข้อความ (String) ด้วยคลาสของ String ที่มีใน .NET Framework ซึ่งประกอบไปด้วยฟังก์ชั่นหรือเมธอดที่หลากหลายที่ติดมากับตัวคลาส เพื่อเตรียมมาไว้ให้ใช้งาน และสามารถรองรับความต้องการในการจัดการข้อมูลของผู้ใช้แต่ละคน ซึ่งมีวิธีการใช้งานง่าย ไม่ยุ่งยากซับซ้อน มีมาตรฐานการใช้งานที่รู้จักโดยทั่วถึงกัน สะดวกและรวดเร็วทำให้ผู้พัฒนาสามารถเลือกวิธีจัดการข้อมูลได้อย่างมีประสิทธิภาพ อย่างไรก็ตาม แม้ว่าคลาสของ String จะมีเมธอดให้เราได้เลือกใช้กันอย่างมากมายและมีประสิทธิภาพอยู่แล้ว แต่ปัญหาอย่างหนึ่งที่พบในการใช้งานกับตัวแปรของคลาส String คือ การเชื่อมต่อหรือเปลี่ยนแปลงแก้ไขค่าข้อความของตัวแปรชนิด String ในแต่ละครั้ง จะไม่สามารถเปลี่ยนรูป หรือกลับไปแก้ไขค่าของตัวแปรบนพื้นที่หน่วยความจำเดิมที่ถูกจองไว้ให้กับตัวแปรได้ หรืออาจพูดในทางโปรแกรมแบบง่ายๆได้ว่า หากเราต้องการเปลี่ยนแปลงค่าของตัวแปรชนิด String เราจะไม่สามารถกลับไปแก้ไขค่าใน object ของตัวแปรที่ถูกสร้างขึ้นเดิมในหน่วยความจำ หรือ Memory ที่สร้างไว้ในตอนแรกได้ แต่จะมีการสร้าง object ตัวใหม่ขึ้นมา ทุกครั้งที่มีการแก้ไข/จัดการข้อมูลค่า หรือมีการใช้งานเมธอดในคลาส System.String และใช้วิธีให้ pointer ของตัวแปรชี้ไปยังตำแหน่งของ object ตัวใหม่ที่มีค่าของตัวแปรที่ถูกแก้ไขภายหลังแทน ซึ่งหากมีกรณีที่มีการเปลี่ยนแปลงค่าข้อมูล หรือเชื่อมต่อข้อความในตัวแปรดังกล่าวจำนวนหลายครั้ง หรือมีการวนลูปซ้ำในการเปลี่ยนแปลงค่าเป็นจำนวนมาก จะถือเป็นการใช้งานทรัพยากรหน่วยความจำอย่างสิ้นเปลือง เนื่องจาก object ของตัวแปรจะถูกสร้างขึ้นใหม่เรื่อยๆและมีการจองพื้นที่ให้กับ object ตัวที่ถูกสร้างขึ้นใหม่ตามจำนวนครั้งที่ทำการแก้ไขหรือเชื่อมต่อข้อความนั่นเอง ดังภาพ


    ภาพการจองพื้นที่ในหน่วยความจำของตัวแปรชนิด String
    [ที่มาของภาพ : http://www.tutorialsteacher.com/csharp/csharp-stringbuilder]

                        จากภาพตัวอย่างจะเห็นได้ว่า เดิมทีมีการกำหนดค่าให้กับตัวแปรเป็นข้อความ “Hello World!!” แต่เมื่อมีการปรับแก้ค่าของตัวแปร จะมีการสร้าง object ตัวใหม่ โดยจะเก็บค่าที่มีการเปลี่ยนแปลงของข้อความไปเป็น “Hello World!! From Tutorials Teacher” และเลื่อนตำแหน่งของ pointer ของตัวแปรที่จะชี้ไปเพื่อให้ได้ค่าใหม่นั่นเอง
              จากปัญหาดังกล่าว .NET Framework ก็ได้จัดเตรียมคลาสที่มีชื่อว่า “StringBuilder” ขึ้นมา ซึ่งเป็นคลาสที่ใช้ในการจัดการกับข้อมูลชนิดข้อความเช่นเดียวกับคลาส String โดยยินยอมให้มีการแก้ไขและปรับเปลี่ยนค่าในตัวแปรข้อความ(string) ดังกล่าวได้ใน object ตัวเดิมบนพื้นที่หน่วยความจำเดิม โดยไม่ต้องสร้าง object และทำการจองพื้นที่หน่วยความจำขึ้นใหม่ทุกครั้งที่มีการเปลี่ยนแปลงค่าของข้อความดังเช่นในคลาส String นั่นเอง ซึ่งจะทำให้สามารถประหยัดการใช้ทรัพยากรหน่วยความจำได้ในกรณีที่มีการเชื่อมต่อข้อความหรือเปลี่ยนแปลงค่าของตัวแปรจำนวนหลายครั้งได้

     ภาพการจองพื้นที่ในหน่วยความจำของตัวแปรชนิด StringBuilder

    [ที่มาของภาพ : http://www.tutorialsteacher.com/csharp/csharp-stringbuilder]

              ดังนั้น ในการจัดการข้อมูลที่เป็นตัวอักษร หรือข้อความ ผู้พัฒนาควรเลือกใช้วิธีการให้เหมาะสมกับประเภทและลักษณะการใช้งาน เพื่อให้การใช้งานบนพื้นที่หน่วยความจำ และทรัพยากรเกิดประสิทธิภาพสูงสุด ซึ่งในบทความนี้ ผู้เขียนจะขอพูดถึงวิธีการใช้งานในเบื้องต้นของการจัดการข้อมูลชนิด StringBuilder เพื่อเป็นอีกหนึ่งทางเลือกให้กับผู้พัฒนาต่อไป

     

    หลักการทำงานและการจองพื้นที่ในหน่วยความจำของตัวแปรชนิด StringBuilder

              โดยปกติแล้วนั้น ค่าของ “StringBuilder.Length” จะเป็นค่าของจำนวนตัวอักษรที่มีในตัวแปร object ของ StringBuilder และจะถูกเพิ่มขึ้นเรื่อยๆ เมื่อมีการเพิ่มตัวอักษรหรืออักขระเข้าไปในตัวแปรนั้นโดยไม่มีการจองพื้นที่หน่วยความจำเพิ่ม จนกว่าค่าของ Length เท่ากับจำนวนของความจุที่จองพื้นที่หน่วยความจำไว้ ซึ่งก็หมายถึงค่าของ “Capacity” นั่นเอง และหากการเพิ่มตัวอักษรดังกล่าวทำให้ค่าของ Length มากกว่าค่าของ Capacity ใน object นั้นๆ จะมีการจองพื้นที่หน่วยความจำเพิ่มเป็นเท่าตัว เช่น จากเดิม 16 ตัวอักษรจะถูกเพิ่มเป็น 32 ตัวอักษร โดยจะสามารถเปลี่ยนแปลงได้ไม่เกินค่าความจุสูงสุด หรือที่เรียกว่า “MaxCapacity” ซึ่งถ้าหากมีการเพิ่มตัวอักษรที่เกินค่าของ MaxCapacity แล้วนั้นจะทำให้เกิดข้อผิดพลาดได้ แต่หากไม่มีการกำหนดค่าให้กับ Capacity และ MaxCapacity แล้วนั้น ค่าตั้งต้นของ Capactity เริ่มต้นจะอยู่ที่ 16 ตัวอักษร และค่าของ MaxCapacity จะอยู่ที่ประมาณ 2 พันล้านตัวอักษร หรือเทียบเท่ากับค่าสูงสุดของ Int32.MaxValue นั่นเอง

    การอ้างอิง Namespace
    โดย Namespace ที่ต้องอ้างอิงเพิ่มเติมในการใช้งานคลาส StringBuilder มีดังนี้

    • using System;
    • using System.Text;

    การประกาศตัวแปรของคลาส StringBuilder
    ในการประกาศตัวแปร object ของคลาส StringBuilder จะใช้หลักการเดียวกันกับการประกาศตัวแปร object ของคลาสโดยทั่วไป แต่สามารถประกาศโดยมีการระบุค่าอื่นเพิ่มเติมโดยใช้ Constructor ได้ ซึ่งจะขอยกตัวอย่างในกรณีที่มีการใช้งานกันโดยทั่วไป ดังนี้
    แบบเดียวกับการประกาศ object ของคลาสทั่วไป
    ตัวอย่าง

    StringBuilder sb = new StringBuilder();

    แบบมีการกำหนดค่าตั้งต้น
    ตัวอย่าง

    StringBuilder sb = new StringBuilder("Hello World!!");

    คำอธิบาย : เป็นการสร้างตัวแปร object แบบมีการกำหนดค่าเริ่มต้นให้มีค่าเท่ากับ Hello World!!
    แบบมีการระบุขนาดในการจองพื้นที่ของหน่วยความจำ(Capacity)  แม้ว่าตัวแปรของคลาส StringBuilder สามารถเพิ่มและขยายได้ไม่จำกัดโดยไม่ต้องสร้าง object ตัวใหม่ แต่ผู้พัฒนาสามารถระบุขนาดสูงสุดของจำนวนตัวอักษรที่ตัวแปรจะสามารถรองรับได้ โดยค่าดังกล่าวที่ระบุนี้ เรียกว่า “Capacity” และเรียกค่าของความยาวตัวอักษรที่มีในตัวแปรนั้นๆ โดยใช้ properties ที่มีชื่อว่า “Length” โดยหากมีการกำหนดค่าของ Capacity ให้กับตัวแปรคลาส StringBuilder เมื่อมีการแก้ไขค่าของตัวแปรจะไม่ถูกจองพื้นที่ใหม่จนกว่าความยาวของตัวอักษรจะถึงค่าของ Capacity ที่กำหนด จึงจะมีการจองพื้นที่ใหม่ให้อัตโนมัติในขนาดเดียวกับ Capacity ที่กำหนดไว้เดิมเป็นเท่าตัว แต่หากไม่ได้ทำการกำหนดค่าของ Capacity ไว้ จะมีค่า default เท่ากับ 16 ซึ่งสามารถกำหนดค่าของ Capacity ได้ดังนี้

    StringBuilder sb = new StringBuilder(25);

    คำอธิบาย : เป็นการสร้างตัวแปร object แบบมีการกำหนดขนาดของตัวแปรให้มีขนาดความจุ หรือ Capacity ไว้ที่ 25 ตัวอักษร แต่หากมีการกำหนดค่าของข้อมูลที่มีความยาวตัวอักษรมากกว่าขนาดที่กำหนด จะมีการขยายพื้นที่ความจุให้กับขนาดตัวแปรอัตโนมัติ นอกจากจะสามารถกำหนดขนาดของตัวแปร StringBuilder โดยใช้ Constructor แล้วนั้นยังสามารถระบุผ่าน Properties ที่มีชื่อว่า Capacityได้อีกด้วย ดังนี้

    sb.Capacity = 25;

    แบบกำหนดค่าเริ่มต้นและระบุขนาดความจุของตัวแปร
    ตัวอย่าง

    StringBuilder sb = new StringBuilder("Hello World!", 25);

    คำอธิบาย : เป็นการประกาศตัวแปรขนาด 25 ตัวอักษร และมีค่าเริ่มต้นเป็นคำว่า “Hello World!!”

    แบบกำหนดค่าขนาดความจุและความจุสูงสุดของพื้นที่หน่วยความจำให้กับตัวแปร
    ตัวอย่าง

    StringBuilder sb = new StringBuilder( 25,200);

    คำอธิบาย : เป็นจองพื้นที่ในการประกาศตัวแปร(Capacity)ขนาด 25 ตัวอักษร และมีค่าความจุสูงสุด(MaxCapacity)ได้ไม่เกิน 200 ตัวอักษร

    แบบกำหนดค่าเริ่มต้นที่มีการตัดข้อความ(substring) และระบุขนาดความจุของตัวแปร
    ตัวอย่าง

    StringBuilder sb = new StringBuilder("Hello World!",0,5, 25);

    คำอธิบาย : เป็นจองพื้นที่ในการประกาศตัวแปรขนาด 25 ตัวอักษร และมีค่าเริ่มต้นเป็นคำว่า “Hello”

    เนื่องจากมีการ substring ค่าข้อความ “Hello World!!” ตั้งแต่ตำแหน่งที่ 0 มา 5 ตัวอักษร จึงกลายเป็นคำว่า “Hello” นั่นเอง

    เมธอดที่จำเป็นและควรรู้ในการใช้งานคลาส String builder

    โดยแบ่งตามลักษณะการทำงาน เพื่อง่ายต่อความเข้าใจและการนำไปใช้ ดังนี้

    1.การเชื่อมต่อข้อความ เป็นการเชื่อมต่อข้อความกับค่าตัวแปรที่มีอยู่เดิมที่ตำแหน่งท้ายสุด ซึ่งมีเมธอดที่ใช้งานกันบ่อย ดังนี้
    • Append() เป็นเมธอดที่ใช้ในการเชื่อมข้อความ ซึ่งสามารถใช้แทนการต่อสตริงหรือข้อความแบบทั่วไปในคลาส String โดยจะไปต่อตรงส่วนท้ายสุดของค่าใน object โดยไม่ต้องเปลี่ยนการจองพื้นที่หน่วยความจำ
    ตัวอย่างที่ 1

    StringBuilder sb = new StringBuilder("Hello World!");
    sb.Append(" Nice to meet you!!");
    Console.WriteLine(sb);

    คำอธิบาย : จากตัวอย่างข้างต้น จะเห็นว่าเดิมค่าของตัวแปรมีค่า “Hello World!” แต่เมื่อมีการเรียกใช้เทธอด Append() จะทำการต่อข้อความจากเดิมจนกลายเป็น “Hello World! Nice to meet you!!

    ตัวอย่างที่ 2

    StringBuilder sb = new StringBuilder("Hello World");
    sb.Append(" !?!?",2,2);
    Console.WriteLine(sb);

    คำอธิบาย : จากตัวอย่างข้างต้น จะเห็นว่าเดิมค่าของตัวแปรมีค่า “Hello World” แต่เมื่อมีการเรียกใช้เมธอด Append() แบบมีการ substring ร่วมด้วย โดยจะเริ่มทำการตัดตัวอักษรจากข้อความ “ !?!?” จากตำแหน่งลำดับ index ที่ 2 ไป 2 ตัวอักษร ซึ่งนั่นก็คือ “?!” หลังจากนั้นก็จะเชื่อมต่อด้วยข้อความเดิมจนกลายเป็น “Hello World!?!

    AppendLine() เป็นเมธอดที่ใช้ในการแทรกบรรทัดใหม่เข้าไปให้กับตัวแปร
    ตัวอย่าง

    StringBuilder sb = new StringBuilder("Hello, I am Kate.");
    sb.AppendLine();
    sb.Append("Nice to meet you.");
    Console.WriteLine(sb);
    
    //หรือ
    StringBuilder sb = new StringBuilder("Hello, I am Kate.");
    sb.AppendLine("Nice to meet you.");
    Console.WriteLine(sb);
    
    

    คำอธิบาย : จากตัวอย่างข้างต้น จะเป็นการเพิ่มการขึ้นบรรทัดใหม่ให้กับข้อความของตัวแปร จากค่า “Hello, I am Kate.” ด้วยการขึ้นบรรทัดใหม่ ตามด้วยข้อความ “Nice to meet you.” โดยแสดงทั้งตัวอย่างที่มีการเพิ่มบรรทัดโดยใช้เมธอด AppendLine() ก่อน แล้วจึงเชื่อมข้อความที่เหลือด้วยเมธอด Append() หรืออาจรวบวิธีการขึ้นบรรทัดใหม่ต่อด้วยข้อความด้วยการใช้เมธอด Appendline() แบบมีการส่งค่าพารามิเตอร์ของข้อความที่ต้องการเชื่อมต่อหลังจากขึ้นบรรทัดใหม่ได้เลยดังตัวอย่าง

    AppendFormat() เป็นเมธอดที่ใช้ในการเชื่อมต่อข้อความที่ท้ายสุดของค่าเดิม แบบที่มีการจัดรูปแบบให้กับข้อความที่ต้องการนำมาเชื่อมต่อ โดยรูปแบบที่ใช้ในการกำหนดเป็นรูปแบบมาตรฐานที่ใช้ในการกำหนดรูปแบบของข้อมูลที่เป็นตัวเลข วันที่ และเวลา เป็นต้น
    ตัวอย่าง

    int MyInt = 25;
    StringBuilder sb = new StringBuilder("Your total is ");
    sb.AppendFormat("{0:C} ", MyInt);
    Console.WriteLine(sb);
    

    คำอธิบาย จากตัวอย่าง เป็นการจัดรูปแบบของข้อมูลที่จะนำมาทำการเชื่อมต่อกับตัวแปรเดิม โดยผลลัพธ์ที่ได้ คือ Your total is $25.00 นั่นเอง

    Insert() เป็นเมธอดที่ใช้ในการเพิ่มค่าข้อความแทรกไปยังตัวแปร โดยมีการกำหนดตำแหน่งเริ่มต้นที่ต้องการให้แทรกเพิ่มในค่าข้อมูลดังกล่าวเข้าไปในตัวแปร StringBuilder นั้นด้วย
    ตัวอย่าง

    StringBuilder sb = new StringBuilder("Hello, I am Kate.");
    sb.Insert(5," Mr.Kim");
    Console.WriteLine(MyStringBuilder);

    คำอธิบาย : จากตัวอย่างข้างต้น จะเป็นการแทรกข้อความ “ Mr.Kim” ลงในตัวแปร sb ที่มีค่าเดิมเป็น
    Hello, I am Kate.” จนได้ผลลัพธ์ คือ “Hello Mr.Kim, I am Kate.”

    2.การล้างค่าหรือเอาค่าข้อมูลบางส่วนออก  เป็นการล้างค่าข้อมูลของตัวแปร หรือตัดข้อมูลของตัวแปรบางส่วนออกไป โดยเมธอดที่ใช้งานกันบ่อย มีดังนี้

    Clear() เป็นเมธอดที่ใช้ในการล้างค่าตัวอักษรในข้อความของตัวแปร String builder ดังกล่าว และกำหนดค่าให้กับความยาวตัวอักษรหรือ properties ที่มีชื่อว่า “Length เป็น 0
    ตัวอย่าง

    StringBuilder sb = new StringBuilder("Hello World!");
    sb.Clear();
    Console.WriteLine(sb);

    คำอธิบาย : จากตัวอย่างข้างต้นจะเป็นการล้างค่าข้อมูลให้กับตัวแปร sb จากเดิมที่มีค่าตั้งต้นเป็น “Hello World!” จะเหลือเป็นค่าว่าง หรือ String.Empty และหากต้องการให้แสดงผลจะไม่แสดงข้อความใดๆขึ้นมา แต่ยังคงจองพื้นที่หน่วยความจำไว้ให้กับตัวแปรนี้แม้จะไม่มีค่าข้อมูลใดๆก็ตาม และจะมีค่า Length เป็น 0 นั่นเอง

    Remove() เป็นเมธอดที่ใช้ในการตัดค่าของข้อความในตัวแปรออก โดยมีการกำหนดตำแหน่งเริ่มต้นและความยาวของตัวอักษรในข้อความที่ต้องการตัด โดยนับตำแหน่งจากตัวอักษรตัวแรกเป็นค่าตำแหน่งลำดับที่ 0(ซึ่งเป็นการอ้างอิงตามหลักการนับตำแหน่งของ index โดยเริ่มถือว่าตัวอักษรตัวแรกเป็น index ลำดับที่ 0 นั่นเอง)
    ตัวอย่าง

    StringBuilder sb = new StringBuilder("Hello World!");
    sb.Remove(5,7);
    Console.WriteLine(sb);
    

    คำอธิบาย : จากตัวอย่างข้างต้น เดิมตัวแปรมีค่าข้อความเป็น “Hello World!” แต่เมื่อใช้เมธอด Remove() ในการตัดค่าข้อความตั้งแต่ตำแหน่งของลำดับ index ที่ 5 (หรือตำแหน่งที่ 4 เมื่อเริ่มต้นนับ 1 จากตัวอักษรแรกของข้อความ) ไปจำนวน 7 ตัวอักษร โดยผลลัพธ์ที่ได้ เป็นดังนี้ “Hello

    • การตัดค่าบางส่วนออกโดยกำหนดค่า properties ที่ชื่อว่า Length ให้กับตัวแปร

    ตัวอย่าง

    StringBuilder sb1= new StringBuilder("Hello World!");
    sb1.Length--;
    //หรือ
    sb1.Length = sb1.Length-1;
    //หรือ
    sb1.Remove(sb1.Length-1,1);
    //เป็นการตัดค่าตัวอักษรตัวสุดท้ายออกจากข้อความ จะได้ผลลัพธ์ คือ Hello World 
    
    StringBuilder sb2= new StringBuilder("Hello World!"); 
    sb2.Length=0; 
    //เป็นการล้างค่าข้อมูลในตัวแปร sb2 
    ซึ่งจะมีลักษณะการทำงานเช่นเดียวกับการใช้เมธอด Clear() ที่กล่าวไว้แล้วข้างต้นนั่นเอง

    คำอธิบาย : จากตัวอย่างข้างต้น ในส่วนของ sb1 นั้นจะเป็นการตัดค่าตัวอักษรตัวสุดท้ายออกจากข้อความ “Hello World!” ซึ่งก็คือตัวอักษร “!” โดยจะได้ผลลัพธ์ เป็น “Hello World” และสำหรับกรณีของ sb2 จะเป็นการล้างค่าข้อมูลในตัวแปร sb2 ซึ่งจะมีลักษณะการทำงานเช่นเดียวกับการใช้เมธอด Clear() ที่กล่าวไว้แล้วข้างต้นนั่นเอง

    3. การเปลี่ยนแปลงค่าของตัวแปร  ดังนี้

    • Replace() เป็นเมธอดที่ใช้ในการแทนที่ข้อความ โดยมีลักษณะการทำงานเช่นเดียวกับเมธอด Replace() ที่มีในคลาส String ที่จะต้องมีการกำหนดค่าใหม่ที่ต้องการให้แทนที่ และค่าที่ต้องการแทนที่นั่นเอง
    ตัวอย่าง

    StringBuilder sb= new StringBuilder("Hello World!");
    sb.Replace('World', 'Kate');
    Console.WriteLine(sb);
    

    คำอธิบาย จากตัวอย่างข้างต้น จะเป็นการแทนที่ค่าของข้อความเดิมคือ “World” ในคำว่า “Hello World!” ด้วยค่า “Kate” ซึ่งจะได้ผลลัพธ์ คือ “Hello Kate!

    4. การแปลงค่าจากตัวแปรชนิด StringBuilder เป็น String  ดังนี้

    ToString() เป็นเมธอดที่ใช้ในการแปลงค่าตัวแปรแบบ StringBuilder มาเป็นค่าของตัวแปรแบบคลาส String เพื่อนำไปแสดงผลหรือนำมาประยุกต์ใช้งานกับเมธอดที่มีในคลาส String ต่อไป
    ตัวอย่าง

    StringBuilder sb= new StringBuilder("Hello World!");
    Console.WriteLine(sb.ToString());
    //การนำไปใช้กับเมธอดหรือฟังก์ชั่นที่มีในคลาส String
    int a = sb.ToString().IndexOf("a");
    //เป็นการค้นหาตำแหน่งของอักษร a ในตัวแปร sb ที่ถูกแปลงเป็น String 
    ซึ่งผลลัพธ์ที่ได้จะเท่ากับ -1 เนื่องจากไม่มีตัวอักษร a ในข้อความดังกล่าว

    คำอธิบาย : จากตัวอย่างข้างต้นเป็นการแปลงค่าของตัวแปรในคลาส StringBuilder ให้เป็นคลาส String ซึ่งหลังจากที่ได้ทำการแปลงค่าแล้วนั้น จะสามารถใช้งานเมธอหรือฟังก์ชั่นที่มีในคลาส String ได้ เช่น IndexOf หรือ StartsWith  เป็นต้น

    5. การอ้างอิงและเข้าถึงตัวอักษรที่อยู่ในข้อความ  ดังนี้

    ตัวอย่าง

    StringBuilder sb= new StringBuilder("Hello World!");
    Console.WriteLine(sb[6]);
    //ผลลัพธ์ที่ได้คือ "W"
    sb[2] = 'k';
    //ผลลัพธ์ที่ได้คือ "Heklo World!"

    คำอธิบาย : จากตัวอย่างข้างต้นเป็นการเข้าถึงตำแหน่งของค่าตัวแปรชนิด StringBuilder ผ่านการอ้างลำดับ index ของอักขระในตัวแปรนั้น และตัวอย่างถัดมาจะเป็นการเปลี่ยนแปลงค่าโดยการเข้าถึงอักขระในลำดับ index ที่กำหนด โดยให้ค่าใหม่แทนที่

    6. การค้นหา  ในการค้นข้อมูลของตัวแปรแบบ StringBuilder นั้น โดยทั่วไปแล้วจะไม่มีเมธอดที่ใช้ในการค้นหาข้อมูลโดยตรง ดังเช่นที่มีในคลาส String เช่น IndexOf หรือ StartsWith ดังนั้นเราสามารถประยุกต์วิธีการค้นหาตามลักษณะของข้อมูลและการจัดการได้ ดังนี้

    • การค้นหาค่าที่ได้กลับมาในรูปแบบ Stringจากการเรียกใช้เมธอด ToString() โดยใช้เมธอดที่มีเช่นเดียวกับในคลาส String ซึ่งเป็นวิธีที่ง่าย และสามารถเปลี่ยนแปลงข้อมูลของตัวแปรได้โดยไม่สิ้นเปลืองทรัพยากร
    • แปลงค่าของตัวแปรแบบ StringBuilder ให้เป็นแบบ String และใช้เมธอดในการค้นหาที่มีในคลาส String ซึ่งวิธีการนี้เหมาะกับการทำงานที่ไม่มีการเปลี่ยนแปลงภายหลังจากการแปลงค่ามากนัก เพื่อลดการสิ้นเปลืองทรัพยากรในการแปลงค่าภายหลัง
    • ค้นหาข้อมูลให้เสร็จก่อนทำการนำมาแปลงค่าเป็นแบบ StringBuilder โดยวิธีนี้จะต้องไม่สนใจค่าลำดับของตัวอักษรที่ได้จากการค้นหานั้นๆ
    • ค้นหาโดยใช้ Properties ทีชื่อว่า Chars โดยวิธีนี้เหมาะกับข้อมูลที่มีอักษรจำนวนไม่มาก และเงื่อนไขในการค้นหาไม่ซับซ้อน

    เพิ่มเติม
    • หลักการเบื้องต้นในการพิจารณาการใช้งานกับการจัดการข้อมูลของตัวแปรข้อความ(String)ที่ใช้เมธอดการทำงานในแบบเดียวกัน หากเป็นการใช้งานที่มีการเชื่อมต่อข้อความในตัวแปรเดิมที่มากกว่า 4 ครั้ง ผู้พัฒนาควรหันมาใช้ตัวแปรแบบคลาส StringBuilder เนื่องจากจะทำให้ประหยัดทรัพยากรหน่วยความจำมากกว่า แต่หากจำนวนครั้งในการเชื่อมต่อน้อยกว่านั้นควรใช้คลาสของ String ตามเดิมเพื่อความสะดวกและรวดเร็ว เนื่องจากมีเมธอดรองรับการจัดการข้อความที่หลากหลายและไม่ถือเป็นการสิ้นเปลืองพื้นที่หน่วยความจำมากนัก

    • ในการเรียกใช้งานเมธอดต่างๆ สามารถนำมาเขียนรวมกันใน statement เดียวกันได้ ดังนี้

    ตัวอย่างที่ 1

          StringBuilder sb = new StringBuilder();
          sb.Append("This is the beginning of a sentence, ");
          sb.Replace("the beginning of ", "");
          sb.Insert(sb.ToString().IndexOf("a ") + 2, "complete ");
          sb.Replace(",", ".");
          Console.WriteLine(sb.ToString());
    

    คำอธิบาย : จากตัวอย่างข้างต้นเป็นการเชื่อมต่อข้อความเริ่มต้น คือ “This is the beginning of a sentence, ” และแทนที่คำว่า  “the beginning of” ด้วย “”(ค่าว่าง) และแทรกข้อความคำว่า “complete ” เข้าไปในตำแหน่งซึ่งหามาได้จากการเรียกใช้เมธอด ToString() และตามด้วยเมธอด IndexOf ของตำแหน่งข้อความ “a ” ถัดไปอีก 2 ตำแหน่งด้วยค่า “complete ” และแทนที่เครื่องหมาย “,” ด้วย “.”

    สามารถเขียนรวมเป็น statement เดียวกันได้ดังนี้

    ตัวอย่างที่ 2

          StringBuilder sb = new StringBuilder("This is the beginning of a sentence, ");
          sb.Replace("the beginning of ", "").Insert(sb.ToString().IndexOf("a ") + 2, 
                                                     "complete ").Replace(",", ".");
          Console.WriteLine(sb.ToString());

    ซึ่งจะให้ผลลัพธ์เช่นเดียวกับตัวอย่างที่ 1

              จากบทความข้างต้นที่กล่าวมาทั้งหมด จะเห็นได้ว่าประสิทธิภาพการจัดการข้อมูลจะดีเพียงใดนั้น ย่อมขึ้นอยู่กับการพิจารณาและเลือกใช้วิธีการจัดการข้อมูลที่ถูกต้องและเหมาะสมกับปัจจัยต่างๆ เช่น จำนวนของข้อมูล จำนวนครั้งในการเปลี่ยนแปลงข้อมูล และจำนวนทรัพยากรที่ใช้ในการพัฒนา เป็นต้น ซึ่งข้อมูลในบทความนี้เป็นเพียงข้อมูลในเบื้องต้นเกี่ยวกับ StringBuilder เท่านั้น ยังคงมีข้อมูลรอให้พวกเรานักพัฒนาทั้งหลายได้เข้าไปทำการศึกษาและเรียนรู้กันอีกมากมาย หากผู้ใดมีความสนใจสามารถค้นหาเพิ่มเติมและมาร่วมกันแบ่งปันประสบการณ์ร่วมกันได้ และผู้เขียนหวังเป็นอย่างยิ่งว่าข้อมูลดังกล่าวจะช่วยให้การตัดสินใจเลือกใช้วิธีการจัดการข้อมูลเป็นไปได้ง่ายขึ้น และโปรแกรมที่พัฒนาทำงานได้มีประสิทธิภาพรวดเร็วขึ้นไม่มากก็น้อย หากผิดพลาดประการใด ผู้เขียนขออภัยมา ณ ที่นี้ด้วยค่ะ

    แหล่งข้อมูลอ้างอิง :
    http://www.dotnetperls.com/stringbuilder
    https://msdn.microsoft.com/en-us/library/2839d5h5(v=vs.110).aspx
    http://www.tutorialsteacher.com/csharp/csharp-stringbuilder
    https://blog.udemy.com/stringbuilder-c-sharp/

  • ASP.NET MVC Part 4: ทำความรู้จักกับ ViewData, ViewBag และ TempData

    การส่งผ่านข้อมูลระหว่างกันใน ASP.NET MVC จะมีการส่งผ่านกันด้วย objects ซึ่งใน ASP.NET MVC จะมี object ที่ชื่อ ViewData, ViewBag และ TempData เป็น object ที่่ใช้ในการส่งผ่านข้อมูลในลักษณะที่แตกต่างกันออกไป โดยในการส่งผ่านข้อมูลจะแบ่งได้เป็น 3 กรณี คือ

    • การส่งผ่านค่าจาก Controller ไปยัง View
    • การส่งผ่านค่าจาก Controller หนึ่ง ไปยัง Controller อื่น
    • การส่งค่าระหว่าง Action หนึ่ง ไปยัง Action อื่น

    โดยทั้ง 3 objects จะมีคุณสมบัติที่แตกต่างกัน ดังนี้

    1. ViewBag เป็น dynamic object ในการส่งค่าจาก controller ไปยัง view
    2. ViewData เป็น dictionary object ในการส่งค่าจาก controller ไปยัง view
    3. TempData เป็น dictionary object ในการส่งค่าข้ามกันระหว่าง controller และ action

     

    การส่งผ่านข้อมูลจาก controller ไปยัง View

    การส่งผ่านข้อมูลจาก Controller ไปยัง View สามารถทำได้ 3 รูปแบบ ขึ้นอยู่กับลักษณะของข้อมูลที่ต้องการส่งว่าเป็นข้อมูลลักษณะไหน มีความซับซ้อนเพียงใด แต่ละรูปแบบสามารถเขียนได้ดังนี้

    controllertoview

     

    ส่งผ่าน Model

    การส่งผ่านข้อมูลผ่านตัว model เป็นการส่งผ่านข้อมูลผ่านตัว model ตรงๆ โดยที่ข้อมูลจะมี property ตามที่มีอยู่ใน model ที่สร้างไว้ ดังตัวอย่าง สร้าง model ของ Book และ set ค่าให้กับ property ต่างๆ และ return model Book ไปยังหน้า View

    ฝั่ง Controller

    public ActionResult Index()
            {
                List<ฺBook> b = new List<Book>() {
     
                   new Book{ Id = 1, Title = "Harry Potter", Author= "JK. Rolling"},
                   new Book{ Id = 2, Title = "Inferno", Author= "Dan Brown"}
                };
     
                return View(b);
            }
    

    ฝั่งแสดงผล View

    ประกาศ type ของ model เป็น Book หลังจากนั้นใช้ตัวแปร model ในการเข้าถึง property ต่างๆของ Model

    @model MvcBook.Models.Book
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Title)
            th>
            <th>
                @Html.DisplayNameFor(model => model.Author)
            th>
            <th>th>
        tr>
     
    @foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            td>
            <td>
                @Html.DisplayFor(modelItem => item.Author)
            td>
        tr>
    }
     
    table>
    

     

    ส่งผ่าน ViewBag

    การส่งผ่านข้อมูลด้วย ViewBag จะเป็นการส่งข้อมูลที่เป็น dynamic object เช่น string, int, float เป็นต้น ดังตัวอย่าง

    ฝั่ง Controller

    public ActionResult Index()
            {
                ViewBag.title = "THE DAVINCI CODE";
                return View();
            }
    

    ฝั่งแสดงผล View

    <h2>@ViewBag.Title</h2>
    

     

    ส่งผ่าน ViewData

    การส่งผ่านข้อมูลด้วย ViewData จะเป็นการส่งข้อมูลที่เป็น dictionary object เช่น List, Enumerable, array เป็นต้น ดังตัวอย่าง

    ฝั่ง Controller

    public ActionResult Index()
            {
                List<string> listBook = new  List<string>();
                listBook.Add("Davinci code");
                listBook.Add("The lost symbol");
                listBook.Add("Inferno");
                ViewData["ListBook"] = listBook;
                return View();
            }
    

    ฝั่งแสดงผล View

    ในการแสดงผลข้อมูลที่เป็น dictionary object นั้นให้ทำการ cast ให้เป็น type ที่ตรงกับ type ที่ส่งมาจาก controller

    <table class="table"> 
    @foreach (var item in (List<string>)ViewData["ListBook"]) {
        <tr>
            <td>
                @item
            td>
        tr>
    }
    <table>
    

     

    การส่งผ่านข้อมูลจาก controller/Action หนึ่ง ไปยัง controller/Action อื่น

    ในการส่งผ่านข้อมูลจาก controller หนึ่ง ไปยังอีก controller หรือจาก action ไปยังอีก action จะใช้ object ที่ชื่อ TempData ในการส่งค่าระหว่างกัน ซึ่ง TempData จะเก็บข้อมูลใน session โดยเป็นการส่งค่าจาก HTTP request หนึ่งไปยัง HTTP request อื่นๆ ดังตัวอย่าง

    tempdata

    controller ฝั่งส่งค่า

    public ActionResult Index()
            {
              TempData["data1"] = "I am from action 1";
              return RedirectToAction("Read");
             
            }
    

    controller ฝั่งรับค่า

    public string Read()
            {
                string str;
                str = TempData["data1"].ToString();
                return str;
            }
    

     

    สรุป

    ในการส่งข้อมูลระหว่าง controller กับ view และ controller/action กับ controller/action ของ ASP.NET MVC นั้น ในเบื้องต้นสามารถส่งผ่าน object ทั้ง 3 ตัว ได้แก่ ViewBag, ViewData และ TempData โดยในการเลือกใช้ให้พิจารณาลักษณะของข้อมูลที่ต้องการส่งเป็นหลัก

    บทความก่อนหน้า : ASP.NET MVC Part3: สร้าง Model ด้วย Entity Framework

    แหล่งอ้างอิง : 

    [1] http://www.codeproject.com/Articles/476967/What-is-ViewData-ViewBag-and-TempData-MVC-Option?msg=4858421

    [2] http://rachelappel.com/when-to-use-viewbag-viewdata-or-tempdata-in-asp-net-mvc-3-applications/

  • สร้างเอกสาร PDF ด้วย iTextSharp

    ที่มา

    บ่อยครั้งที่ในชีวิตของโปรแกรมเมอร์จะต้องพบกับความต้องการของลูกค้าที่อยากได้รายงานหรือเอกสารที่สามารถสร้างได้จากระบบ แน่นอนว่าประเภทเอกสารที่ต้องการย่อมมี PDF บรรจุไว้แน่นอนเพราะเป็นเอกสารที่นิยมใช้กันอย่างแพร่หลาย ทั้งนี้ เครื่องมือสำหรับการสร้างเอกสารประเภทดังกล่าวมีอยู่มากมาย แต่จุดสำคัญนั้นอยู่ที่การเลือกใช้งานซึ่งย่อมแตกต่างกันไปตามปัจจัยต่าง ๆ เช่นในบทความนี้ ลูกค้าต้องการเอกสารเพื่อพิมพ์เป็น hard copy ไว้ที่หน่วยงาน ยังไม่ถึงขั้นรายงานนะครับ แค่เอกสารบันทึกข้อความ ดังนั้นผู้เขียนจึงไม่เลือกใช้เครื่องมือที่เก่งกาจเช่น Crystal report หรือ Reporting service และทำการค้นหาเครื่องมือที่มีน้ำหนักเบา (เวลาใช้ไม่กินทรัพยากรเยอะ) แต่ตอบสนองความต้องการได้ในขณะนั้น รวมไปถึงการมี documentation ที่ดี เข้าใจง่าย ปฏิบัติตามได้ไม่ยาก ซึ่งสุดท้ายก็มาเจอกับเครื่องมือที่ชื่อ iTextSharp

    คุณสมบัติของเครื่องมือ

    iTextSharp เป็นผลงานของ iText ซึ่งทำมาเพื่อการสร้างเอกสาร PDF บน C# platform โดยเฉพาะ ในขณะเดียวกันก็มีเครื่องมือแบบเดียวกันสำหรับ platform อื่น ๆ ด้วย เราจึงจะได้เห็นตัวอย่างใน documentation ของเขาเป็นภาษา Java

    ความสามารถของ iTextSharp คือการสร้างเอกสาร PDF รวมไปถึงการตัดต่อเอกสารด้วย เช่น การนำเอกสารมารวมกัน การแยกเอกสารออกจากกัน นับว่าเป็นเครื่องมือที่ครบเครื่องทีเดียวสำหรับจุดประสงค์หลัก ๆ ของเรา แต่ความสามารถอื่น ๆ ก็ยังมีครับแต่ผู้เขียนยังไม่ได้ต้องการใช้งานความสามารถนั้นจริง ๆ จึงยังไม่ได้นำเสนอในบทความนี้

    การใช้งานเครื่องมือนี้จะต้องใช้การเขียนโปรแกรม 100% ครับหรือเรียกเป็นภาษาอังกฤษว่า Programmatically ซึ่งยุ่งยากพอควรทีเดียวโดยเฉพาะการจัดวางตำแหน่งของแต่ละส่วน พูดได้ว่าจะต้องจินตนาการหรือร่างแบบลงบนกระดาษเลยทีเดียว ทั้งนี้ทั้งนั้นนี่ก็เป็นข้อดีข้อหนึ่งสำหรับคนชอบเขียนโปรแกรมเพราะเห็นกระบวนการชัดเจน (ไม่ค่อยสะดวกแต่สนุกดี)

    ทดลองใช้

    ติดตั้งโปรแกรม

    ก่อนอื่นเลยก็ต้อง download library มาก่อนครับ (Link)การติดตั้งนั้นไม่ยาก แค่ reference ไปหา dll ที่เค้าให้มาก็พอ ไฟล์ที่ได้มามีทั้งหมด 3 ชุดครับคือ

    1. itextsharp-dll-core
    2. itextsharp-dll-pdfa
    3. itextsharp-dll-xtra

    ทั้งหมดนี้ทำหน้าที่แตกต่างกันครับ สำหรับการสร้าง PDF เราใช้แค่ตัว itextsharp-dll-core ก็พอ

    องค์ประกอบพื้นฐาน

    องค์ประกอบพื้นฐานของ itextsharp นั้นมีหลายตัว แต่ตัวที่เพียงพอสำหรับความต้องการของผู้เขียนในตอนนี้มีดังนี้ครับ

    1. Chunk เป็นองค์ประกอบสำหรับ “คำ”
    2. Phrase คือ “ประโยค” ซึ่งประกอบด้วยหลาย Chunk
    3. Paragraph คือ “ย่อหน้า” ซึ่งประกอบด้วยหลาย phrase และ chunk
    4. PdfPCell คือ cell ในตาราง
    5. PdfPTable คือ ตารางประกอบด้วยหลาย PdfPCell
    6. iTextSharp.text.Image คือรูปภาพ

    การกำหนด font และการเพิ่ม font

    iTextSharp นั้นสามารถเพิ่ม font ได้ครับ โดยการทำตามขั้นตอนดังนี้:

    BaseFont bf_bold = BaseFont.CreateFont(HttpContext.Current.Server.MapPath(“~/Regist/Theme/fonts/THSarabunNewBold.ttf”), BaseFont.IDENTITY_H, BaseFont.EMBEDDED);

    เท่านี้เราก็จะมี font แบบที่เราอยากได้ไว้ใช้งานในเอกสารครับ หลังจากนั้น เราก็สร้างตัวอักษรเพื่อใช้งาน ตามตัวอย่างนี้ครับ

    // Bold
    BaseFont bf_bold = BaseFont.CreateFont(HttpContext.Current.Server.MapPath(“~/Regist/Theme/fonts/THSarabunNewBold.ttf”), BaseFont.IDENTITY_H, BaseFont.EMBEDDED);
    h1 = new Font(bf_bold, 18);
    bold = new Font(bf_bold, 16);
    smallBold = new Font(bf_bold, 14);

    // Normal
    BaseFont bf_normal = BaseFont.CreateFont(HttpContext.Current.Server.MapPath(“~/Regist/Theme/fonts/THSarabunNew.ttf”), BaseFont.IDENTITY_H, BaseFont.EMBEDDED);
    normal = new Font(bf_normal, 16);
    smallNormal = new Font(bf_normal, 14);

    เริ่มต้นสร้างเอกสาร PDF

    เมื่อเรากำหนด font ไว้ใช้งานเสร็จแล้ว เราก็สามารถสร้างเอกสารได้เลยครับ  การสร้างเอกสารจะเริ่มจากการกำหนดขนาดเอกสารครับ ตามตัวอย่างนี้

     

    Document pdfDoc = new Document(PageSize.A4, 30, 30, 20, 20);
    PdfWriter pdfWriter = PdfWriter.GetInstance(pdfDoc, Response.OutputStream);
    pdfDoc.Open();

     

    โดยตัวเลข 4 ตัวหลัง layout ของกระดาษคือระยะขอบครับ

    เริ่มใส่องค์ประกอบลงในเอกสาร

    ตัวเอกสารของผมจะเริ่มจากส่วนที่เป็นหัวของเอกสารก่อน ซึ่งจะประกอบด้วยรูปภาพ 1 รูปและข้อความ 1 ข้อความ แต่ปัญหาอยู่การจัดการ layout เพราะเมื่อเราใส่องค์ประกอบเข้าไปมันจะชิดทางด้านซ้ายให้โดยอัตโนมัติ ในกรณีนี้จึงต้องใช้ PdfPTable มาช่วยจัดส่วนหัวเอกสารก่อนครับ ทำการกำหนดขนาดของตารางแล้วจัดองค์ประกอบเข้าไปอยู่ในแต่ละ cell

    private PdfPTable GetHeader() {

    PdfPTable headerTable = new PdfPTable(2);
    headerTable.TotalWidth = 530f;
    headerTable.HorizontalAlignment = 0;
    headerTable.SpacingAfter = 20;
    //headerTable.DefaultCell.Border = Rectangle.NO_BORDER;

    float[] headerTableColWidth = new float[2];
    headerTableColWidth[0] = 220f;
    headerTableColWidth[1] = 310f;

    headerTable.SetWidths(headerTableColWidth);
    headerTable.LockedWidth = true;

    iTextSharp.text.Image png = iTextSharp.text.Image.GetInstance(imagePath + “/thai_gov.png”);
    png.ScaleAbsolute(40, 40);

    PdfPCell headerTableCell_0 = new PdfPCell(png);
    headerTableCell_0.HorizontalAlignment = Element.ALIGN_LEFT;
    headerTableCell_0.Border = Rectangle.NO_BORDER;
    headerTable.AddCell(headerTableCell_0);

    PdfPCell headerTableCell_1 = new PdfPCell(new Phrase(“บันทึกข้อความ”, h1));
    headerTableCell_1.HorizontalAlignment = Element.ALIGN_LEFT;
    headerTableCell_1.VerticalAlignment = Element.ALIGN_BOTTOM;
    headerTableCell_1.Border = Rectangle.NO_BORDER;
    headerTable.AddCell(headerTableCell_1);

    return headerTable;
    }

    เมื่อทำการเพิ่มเข้าไปเอกสารแล้วจะได้ลักษณะตามภาพ

    pdf_header

    หลังจากนั้นผมก็เริ่มใส่องค์ประกอบที่เป็นรายละเอียดของส่วนหัวของเอกสารดังนี้

    private PdfPTable GetHeaderDetail() {
    PdfPTable table = new PdfPTable(2);
    table.TotalWidth = 530f;
    table.HorizontalAlignment = 0;
    table.SpacingAfter = 10;

    float[] tableWidths = new float[2];
    tableWidths[0] = 400f;
    tableWidths[1] = 130f;

    table.SetWidths(tableWidths);
    table.LockedWidth = true;

    Chunk blank = new Chunk(” “, normal);

    Phrase p = new Phrase();

    p.Add(new Chunk(“ส่วนราชการ”, bold));
    p.Add(new Chunk(blank));
    p.Add(new Chunk(“วิเทศสัมพันธ์”, normal));

    PdfPCell cell0 = new PdfPCell(p);
    cell0.Border = Rectangle.NO_BORDER;

    table.AddCell(cell0);

    p = new Phrase();
    p.Add(new Chunk(“โทร”, bold));
    p.Add(new Chunk(blank));
    p.Add(new Chunk(“2012”, normal));

    PdfPCell cell1 = new PdfPCell(p);
    cell1.Border = Rectangle.NO_BORDER;

    table.AddCell(cell1);

    p = new Phrase();
    p.Add(new Chunk(“ที่ มอ”, bold));
    p.Add(new Chunk(blank));
    p.Add(new Chunk(master.ApplicationNo, normal));

    cell0 = new PdfPCell(p);
    cell0.Border = Rectangle.NO_BORDER;

    table.AddCell(cell0);

    p = new Phrase();
    p.Add(new Chunk(“วันที่”, bold));
    p.Add(new Chunk(blank));
    p.Add(new Chunk(master.CreatedDate, normal));

    cell1 = new PdfPCell(p);
    cell1.Border = Rectangle.NO_BORDER;

    table.AddCell(cell1);

    p = new Phrase();
    p.Add(new Chunk(“เรื่อง”, bold));
    p.Add(new Chunk(blank));
    p.Add(new Chunk(“ขออนุมัติเดินทางไปต่างประเทศ”, normal));

    cell0 = new PdfPCell(p);
    cell0.Border = Rectangle.NO_BORDER;
    cell0.Colspan = 2;

    table.AddCell(cell0);

    return table;
    }

    เช่นเคยครับ เราจะต้องใช้ Table มากำหนด layout ของเอกสาร เมื่อทำการเพิ่มแล้วก็จะได้เอกสารหน้าตาดังนี้

    pdf_header_detail

    หลังจากนั้นก็ใส่องค์ประกอบต่าง ๆ เพิ่มเข้าไปทีละชิ้น ๆ ตาม source code ด้านล่าง

     

    private Paragraph GetBodyHeader()
    {
    Phrase p = new Phrase();

    p.Add(new Chunk(“เรียน “, normal));
    p.Add(new Chunk(“รองอธิการบดีฝ่ายองค์กรสัมพันธ์และสารสนเทศ”, normal));

    Paragraph para = new Paragraph(p);
    para.SpacingBefore = 20;
    para.SpacingAfter = 20;

    return para;
    }

    private Paragraph GetBody() {
    Paragraph para = new Paragraph();

    para.FirstLineIndent = 38.1f;

    para.Add(new Phrase(“ด้วย”, normal));
    para.Add(new Phrase(“งานวิเทศสัมพันธ์”, normal));
    para.Add(new Phrase(“ขออนุมัติให้นักศึกษาจำนวน ” + master.StudentCount + ” คน เดินทางไปราชการต่างประเทศระหว่างวันที่ ” + master.StartDate + ” ถึงวันที่ ” + master.EndDate + ” รวม ” + master.PeriodDay + ” วัน เพื่อดำเนินกิจกรรมดังต่อไปนี้”, normal));

    return para;
    }

    private PdfPTable GetActivities()
    {
    PdfPTable table = new PdfPTable(3);

    table.TotalWidth = 530f;
    table.HorizontalAlignment = 0;
    table.SpacingBefore = 20;
    table.SpacingAfter = 20;

    // ชื่อกิจกรรม
    // สถาบัน
    // ประเทศ

    float[] columnWidths = new float[3];
    columnWidths[0] = 200f;
    columnWidths[1] = 200f;
    columnWidths[2] = 130f;

    table.SetWidths(columnWidths);
    table.LockedWidth = true;

    PdfPCell cell0 = new PdfPCell(new Phrase(“กิจกรรม”, bold));
    cell0.HorizontalAlignment = Element.ALIGN_LEFT;
    cell0.Border = Rectangle.NO_BORDER;
    table.AddCell(cell0);

    PdfPCell cell1 = new PdfPCell(new Phrase(“สภานที่”, bold));
    cell1.HorizontalAlignment = Element.ALIGN_LEFT;
    cell1.Border = Rectangle.NO_BORDER;
    table.AddCell(cell1);

    PdfPCell cell2 = new PdfPCell(new Phrase(“ประเทศ”, bold));
    cell2.HorizontalAlignment = Element.ALIGN_LEFT;
    cell2.Border = Rectangle.NO_BORDER;
    table.AddCell(cell2);

    List<MasterActivity> activity = master.GetActivities();

    foreach (MasterActivity a in activity)
    {
    cell0 = new PdfPCell(new Phrase(a.ActivityNameThai, normal));
    cell0.HorizontalAlignment = Element.ALIGN_LEFT;
    cell0.Border = Rectangle.NO_BORDER;
    table.AddCell(cell0);

    cell1 = new PdfPCell(new Phrase(a.HostName, normal));
    cell1.HorizontalAlignment = Element.ALIGN_LEFT;
    cell1.Border = Rectangle.NO_BORDER;
    table.AddCell(cell1);

    Institution host = Institution.GetById(a.HostId);

    cell2 = new PdfPCell(new Phrase(host.CountryName, normal));
    cell2.HorizontalAlignment = Element.ALIGN_LEFT;
    cell2.Border = Rectangle.NO_BORDER;
    table.AddCell(cell2);
    }

    return table;
    }

    private Paragraph GetBodyFooter()
    {
    Paragraph para = new Paragraph(new Phrase(“จึงเรียนมาเพื่อโปรดพิจารณาอนุมัติด้วย จักเป็นพระคุณยิ่ง”, normal));
    para.FirstLineIndent = 38.1f;
    para.SpacingAfter = 25;
    return para;
    }

    private void GetSignature(Document pdfDoc) {

    Paragraph para;
    Phrase p;
    Chunk dotLine = new Chunk(“……………………………………………”, normal);

    //if (master.LevelId.Equals(“D”))
    //{
    // p = new Phrase(dotLine);
    // p.Add(new Chunk(“หัวหน้าภาควิชา”, normal));
    // para = new Paragraph(p);
    // pdfDoc.Add(para);
    //}

    p = new Phrase(dotLine);
    p.Add(new Chunk(“หัวหน้าภาควิชา”, normal));
    para = new Paragraph(p);
    para.SpacingAfter = 15;
    pdfDoc.Add(para);

    p = new Phrase(dotLine);
    p.Add(new Chunk(“คณบดี”, normal));
    para = new Paragraph(p);
    para.SpacingAfter = 15;
    pdfDoc.Add(para);
    }

     

    private PdfPTable GetStudentList() {

    Phrase p;

    PdfPTable table = new PdfPTable(8);
    table.TotalWidth = 530f;
    table.HorizontalAlignment = 0;
    //table.SpacingAfter = 20;
    //headerTable.DefaultCell.Border = Rectangle.NO_BORDER;

    float[] colWidths = new float[8];
    colWidths[0] = 30f;
    colWidths[1] = 70f;
    colWidths[2] = 70f;
    colWidths[3] = 70f;
    colWidths[4] = 70f;
    colWidths[5] = 70f;
    colWidths[6] = 70f;
    colWidths[7] = 70f;

    table.SetWidths(colWidths);
    table.LockedWidth = true;

    PdfPCell cell;

    p = new Phrase(“รายชื่อผู้เดินทางจาก ” + master.StartDate + ” ถึง ” + master.EndDate, normal);

    cell = new PdfPCell(p);
    cell.Colspan = 8;
    cell.HorizontalAlignment = Element.ALIGN_CENTER;
    cell.Border = Rectangle.NO_BORDER;
    cell.PaddingBottom = 10;
    table.AddCell(cell);

    #region Header

    cell = new PdfPCell(new Phrase(“ที่”, smallBold));
    cell.HorizontalAlignment = Element.ALIGN_CENTER;
    table.AddCell(cell);

    cell = new PdfPCell(new Phrase(“รหัสนักศึกษา”, smallBold));
    cell.HorizontalAlignment = Element.ALIGN_CENTER;
    table.AddCell(cell);

    cell = new PdfPCell(new Phrase(“คำนำหน้า”, smallBold));
    cell.HorizontalAlignment = Element.ALIGN_CENTER;
    table.AddCell(cell);

    cell = new PdfPCell(new Phrase(“ชื่อ”, smallBold));
    cell.HorizontalAlignment = Element.ALIGN_CENTER;
    table.AddCell(cell);

    cell = new PdfPCell(new Phrase(“สกุล”, smallBold));
    cell.HorizontalAlignment = Element.ALIGN_CENTER;
    table.AddCell(cell);

    cell = new PdfPCell(new Phrase(“คณะ”, smallBold));
    cell.HorizontalAlignment = Element.ALIGN_CENTER;
    table.AddCell(cell);

    cell = new PdfPCell(new Phrase(“วันที่เริ่ม”, smallBold));
    cell.HorizontalAlignment = Element.ALIGN_CENTER;
    table.AddCell(cell);

    cell = new PdfPCell(new Phrase(“วันที่สิ้นสุด”, smallBold));
    cell.HorizontalAlignment = Element.ALIGN_CENTER;
    table.AddCell(cell);

    #endregion

    #region Data

    List<OutboundApplication> apps = master.GetApplications();

    int i = 0;

    foreach (OutboundApplication app in apps)
    {
    cell = new PdfPCell(new Phrase((i + 1).ToString(), smallNormal));
    cell.HorizontalAlignment = Element.ALIGN_RIGHT;
    table.AddCell(cell);

    cell = new PdfPCell(new Phrase(app.StudentId, smallNormal));
    cell.HorizontalAlignment = Element.ALIGN_CENTER;
    table.AddCell(cell);

    cell = new PdfPCell(new Phrase(app.TitleName, smallNormal));
    cell.HorizontalAlignment = Element.ALIGN_LEFT;
    table.AddCell(cell);

    cell = new PdfPCell(new Phrase(app.Firstname, smallNormal));
    cell.HorizontalAlignment = Element.ALIGN_LEFT;
    table.AddCell(cell);

    cell = new PdfPCell(new Phrase(app.Lastname, smallNormal));
    cell.HorizontalAlignment = Element.ALIGN_LEFT;
    table.AddCell(cell);

    cell = new PdfPCell(new Phrase(app.FacultyNameThai, smallNormal));
    cell.HorizontalAlignment = Element.ALIGN_LEFT;
    table.AddCell(cell);

    cell = new PdfPCell(new Phrase(app.StartDate, smallNormal));
    cell.HorizontalAlignment = Element.ALIGN_CENTER;
    table.AddCell(cell);

    cell = new PdfPCell(new Phrase(app.EndDate, smallNormal));
    cell.HorizontalAlignment = Element.ALIGN_CENTER;
    table.AddCell(cell);

    i += 1;
    }

    #endregion

    return table;
    }

    และส่วนของ Main program ก็จะเป็นแบบนี้ครับ

    protected void Page_Load(object sender, EventArgs e)
    {
    InitElements();

    try
    {
    // Create PDF document
    Document pdfDoc = new Document(PageSize.A4, 30, 30, 20, 20);
    PdfWriter pdfWriter = PdfWriter.GetInstance(pdfDoc, Response.OutputStream);
    pdfDoc.Open();

    pdfDoc.Add(GetHeader());
    pdfDoc.Add(GetHeaderDetail());

    LineSeparator line = new LineSeparator();

    pdfDoc.Add(line);

    pdfDoc.Add(GetBodyHeader());
    pdfDoc.Add(GetBody());
    pdfDoc.Add(GetActivities());
    pdfDoc.Add(GetBodyFooter());
    GetSignature(pdfDoc);
    pdfDoc.NewPage();
    pdfDoc.Add(GetStudentList());

    pdfWriter.CloseStream = false;
    pdfDoc.Close();
    Response.Buffer = true;
    Response.ContentType = “application/pdf”;
    Response.AddHeader(“content-disposition”, “attachment;filename=Example.pdf”);
    Response.Cache.SetCacheability(HttpCacheability.NoCache);
    Response.Write(pdfDoc);
    Response.End();
    }
    catch (Exception ex)
    {
    Response.Write(ex.Message);
    }
    }

    สุดท้ายแล้วเราก็จะได้เอกสาร PDF หน้าตาแบบนี้ครับ Example

    บทสรุป

    จะเห็นได้ว่าการสร้างเอกสาร PDF ด้วยเครื่องมือนี้จะกินแรงพอควรนะครับ แต่ข้อดีของ iTextSharp คือน้ำหนักเบาและด้วยการเขียนโค้ดของเรา เราสามารถจะนำอะไรก็ได้ (ตามที่มันมีให้) ไปใส่ในเอกสารได้อย่างอิสระ สำหรับตอนนี้ iTextSharp ยังคงตอบสนองได้ตามความต้องการ แต่เมื่อความต้องการของลูกค้าเปลี่ยนแปลง เราจะได้เห็นกันว่าเครื่องมือตัวนี้จะทรงพลังพอหรือไม่

  • ทำอย่างไรให้สามารถกำหนดจุดพิกัดบนแผนที่ Google map แบบจุดเดียวและหลายจุดจากฐานข้อมูลได้ด้วย ASP.NET C# (ภาคต่อ)

                 จากบทความที่แล้ว ผู้เขียนได้เขียนไว้เกี่ยวกับเรื่องวิธีการกำหนดจุดพิกัดบนแผนที่กันไปบ้างแล้ว ในหัวข้อ “ทำอย่างไรให้สามารถกำหนดจุดพิกัดบนแผนที่ Google map แบบจุดเดียวและหลายจุดจากฐานข้อมูลได้ด้วย ASP.NET C#” สำหรับในบทความนี้ผู้เขียนจึงขอพูดถึงในส่วนของการดึงค่าละติจูด ลองจิจูดของสถานที่ ซึ่งนับว่าเป็นส่วนประกอบสำคัญในการแสดงผลพิกัดบนแผนที่ ซึ่งเดิมทีแล้วนั้น ผู้ใช้อาจต้องค้นหาข้อมูลพิกัดดังกล่าวจาก Google map เองและนำพิกัดดังกล่าวมากรอกลงฐานข้อมูลหรือมาระบุเพื่อการแสดงพิกัดนั้นๆในการเขียนโปรแกรม คงเป็นการดี หากการแสดงผลพิกัดจากฐานข้อมูลนั้น จะมีตัวช่วยอำนวยความสะดวกให้กับผู้ใช้ในการดึงค่าละติจูด และลองจิจูดโดยการกรอกข้อมูลชื่อสถานที่ลงไปเพื่อใช้ในการค้นหา ซึ่งน่าจะเป็นประโยชน์และทำให้ผู้ใช้สามารถใช้งานได้ง่ายขึ้นในการนำพิกัดเหล่านั้นไประบุบนแผนที่นั่นเอง

                 โดยการดึงค่าพิกัดละติจูด-ลองจิจูดของสถานที่ สามารถทำได้หลายวิธี ขึ้นอยู่กับการนำไปประยุกต์ใช้ ซึ่งในบทความนี้ผู้เขียนขอแนะนำ 2 วิธี ดังนี้

    • การเรียกใช้เซอร์วิสของ Google Geocoding API  โดยการส่งพารามิเตอร์เป็นที่อยู่ของสถานที่ดังกล่าว

    ฝั่ง C#

        private void getLatAndLong()
        {
            try
            {
             ////เป็นการกำหนด url ที่จะใช้ในการเรียกเซอร์วิสของ Google Geocoding API 
    โดยมีการส่งค่าพารามิเตอร์เป็นข้อมูลที่อยู่
                string url = "http://maps.google.com/maps/api/geocode/xml?address=" + txtLocation.Text + "&sensor=false";
                WebRequest request = WebRequest.Create(url);
                using (WebResponse response = (HttpWebResponse)request.GetResponse())
                {
            ////ผลลัพธ์จะอยู่ในรูปแบบของ XML หรือ JSON และจะถูกอ่านให้อยู่ในรูปแบบ Dataset 
    โดยใช้ StreamReader
                     using (StreamReader reader = new StreamReader(response.GetResponseStream(), Encoding.UTF8))
                    {
                        DataSet dsResult = new DataSet();
                        dsResult.ReadXml(reader);
           ////จัดทำโครงสร้างตาราง(datatable) ที่จะใช้ในการแสดงผลใน Gridview
                        DataTable dtCoordinates = new DataTable();
                        dtCoordinates.Columns.AddRange(new DataColumn[4] { new DataColumn("Id", typeof(int)),
                            new DataColumn("Address", typeof(string)),
                            new DataColumn("Latitude",typeof(string)),
                            new DataColumn("Longitude",typeof(string)) });
    
           ////ดึงค่าผลลัพธ์จากตารางต่างๆ เพื่อนำค่าที่จำเป็นมาแสดงผลตามต้องการ
                        foreach (DataRow row in dsResult.Tables["result"].Rows)
                        {
                            string geometry_id = dsResult.Tables["geometry"].Select("result_id = " + row["result_id"].ToString())[0]["geometry_id"].ToString();
                            DataRow location = dsResult.Tables["location"].Select("geometry_id = " + geometry_id)[0];
                             dtCoordinates.Rows.Add(row["result_id"],  row["formatted_address"], location["lat"], location["lng"]);
                        }
           ////แสดงผลข้อมูลของค่าที่ดึงมาได้ใน Gridview (ถ้ามี)
                        if (dtCoordinates.Rows.Count > 0)
                        {
                            gvLatLong.DataSource = dtCoordinates;
                            gvLatLong.DataBind();
                        }
                        else
                        {
                            gvLatLong.DataSource = null;
                            gvLatLong.DataBind();
                            ScriptManager.RegisterStartupScript(Page, Page.GetType(), "alert", "alert('Can not find Latitude and Longitude!'); ", true);
    
                        }
                    }
                }
            }
            catch (Exception ex) {
                ScriptManager.RegisterStartupScript(Page, Page.GetType(), "alert", "alert('Can not find Latitude and Longitude!'); ", true);
                gvLatLong.DataSource = null;
                gvLatLong.DataBind();
            }
        
        }
     protected void btnSearch_Click(object sender, EventArgs e)
     {
        getLatAndLong();
     }
    

                 จากโค้ดข้างต้น เป็นการค้นหาละติจูด-ลองจิจูดจากที่อยู่ของสถานที่นั้นๆ โดยใช้ Google Maps Geocoding API ซึ่งเซอร์วิสของ Google Geocoding API มีการส่งค่าโดยใช้ WebRequest โดยจะรับค่าที่อยู่ของสถานที่เป็นพารามิเตอร์และส่งกลับเป็นพิกัดและข้อมูลอื่นๆมาในรูปแบบของ XML หรือ JSON นั่นเอง และค่าที่ส่งกลับมาในรูปแบบ XML นั้นจะถูกอ่านให้อยู่ในรูปแบบ Dataset โดยใช้ StreamReader ซึ่งค่าที่ส่งกลับมานั้นจะมีด้วยกันหลายตาราง และมีการดึงค่าข้อมูลที่เกี่ยวข้องที่จะนำมาใช้เพิ่มลงในตารางที่ถูกสร้างขึ้นใหม่ และนำไปแสดงในกริดวิวนั่นเอง

    ฝั่ง .aspx (Client side)

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
     <title>GetLatitude-Longitude</title>
    <!-- การอ้างอิงเพื่อให้สามารถเรียกใช้งาน Autocomplete ได้-->
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    </head>
    <body>
     <form id="form1" runat="server">
     <div>
     <asp:TextBox ID="txtLocation" runat="server" Width="450px"></asp:TextBox><asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" />
     </div>
     <br />
     <div>
     <asp:GridView ID="gvLatLong" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">
     <AlternatingRowStyle BackColor="White" />
     <EditRowStyle BackColor="#2461BF" />
     <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
     <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
     <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
     <RowStyle BackColor="#EFF3FB" />
     <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
     <SortedAscendingCellStyle BackColor="#F5F7FB" />
     <SortedAscendingHeaderStyle BackColor="#6D95E1" />
     <SortedDescendingCellStyle BackColor="#E9EBEF" />
     <SortedDescendingHeaderStyle BackColor="#4870BE" />
     </asp:GridView>
     </div>
     </form>
     <script type="text/javascript">
     google.maps.event.addDomListener(window, 'load', function () {
    ////การกำหนดคอนโทรล textbox ที่จะเพิ่มความสามารถ place auto-complete 
    เพื่อให้สามารถค้นหาสถานที่ตั้งได้ง่ายขึ้นเมื่อผู้ใช้พิมพ์ข้อมูลชื่อสถานที่ในกล่อง textbox
     var txtplaces = document.getElementById('<%= txtLocation.ClientID %>');
     var places = new google.maps.places.Autocomplete(document.getElementById('<%= txtLocation.ClientID %>'));
     });
     </script>
    </body>
    </html>
    

                 จากโค้ดข้างต้น นอกจากจะเป็นการเรียกใช้เซอร์วิสโดยการคลิกปุ่ม “btnSearch” และรับค่าข้อมูลที่อยู่จากกล่อง textbox แล้ว ยังมีการเพิ่มส่วนของการเพิ่มความสามารถในการค้นหาข้อมูล “ที่อยู่” โดยการกรอกข้อมูล “ชื่อสถานที่” โดยใช้ feature ที่มีของ Google Places API (หรืออาจเรียกว่า place Autocomplete ) เนื่องจากหากมีการเรียกใช้เซอร์วิสดังกล่าวโดยตรง ผู้ใช้จำเป็นที่จะต้องกรอกข้อมูล “ที่อยู่” เพื่อเป็นพารามิเตอร์ให้กับเซอร์วิสที่เรียกใช้ให้ส่งค่าผลลัพธ์กลับมา ซึ่งความน่าจะเป็นที่ผู้ใช้จะสามารถทราบข้อมูลชื่อสถานที่นั้นย่อมเป็นไปได้มากกว่าการทราบข้อมูลที่อยู่ของสถานที่นั้นๆ ผู้เขียนจึงนำมาประยุกต์ใช้งานเข้าด้วยกันกับการเรียกเซอร์วิสที่กล่าวไว้แล้วก่อนหน้านั่นเอง โดยจะแนะนำวิธีการใช้งานเพิ่มเติมในหัวข้อต่อจากนี้

     เพิ่มเติม :
      Place Autocomplete: เป็นfeature ที่มีของ Google Places API เปรียบเสมือนตัวช่วยคำค้นเมื่อมีการป้อนข้อมูลชื่อสถานที่ลงไป โดย feature ดังกล่าวจะแสดงข้อมูลสถานที่ที่ใกล้เคียงกับคำค้นขึ้นมาให้กับผู้ใช้ได้เลือกนั่นเอง

    โดยมีวิธีการเรียกใช้ place autocomplete  ดังนี้
    1. อ้างอิงการเพื่อเรียกใช้งาน Google Places API

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

    2. กำหนดคอนโทรล textbox ที่ต้องการเพิ่มความสามารถ place autocomplete

     var input = document.getElementById('<%= txtSearch.ClientID %>');
     var div = document.getElementById('result');
     var autocomplete = new google.maps.places.Autocomplete(input);

    ตัวอย่างหน้าจอที่ได้เมื่อมีการพิมพ์คำค้น

    place_service1

    ผลลัพธ์

    place_service2

    เพิ่มเติม : Namespace ที่ต้องอ้างอิงเพิ่มเติมในการใช้งานโค้ดที่กล่าวไว้ข้างต้น มีดังนี้
                –  System.IO
                –  System.Net
                –  System.Data
                –  System.Text
    • แบบใช้ place Autocomplete ซึ่งเป็น feature ของ Google Places API ที่จะช่วยในการค้นหาที่อยู่จากชื่อสถานที่ได้และประยุกต์เพิ่มเติมเพื่อดึงค่ามาแสดงเมื่อมีการเลือกรายการสถานที่นั้นๆ
    <!DOCTYPE html>
    <html>
     <head>
    <!-- การอ้างอิงเพื่อให้สามารถเรียกใช้งาน Autocomplete ได้-->
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
     <title>Place Autocomplete</title>
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
     <meta charset="utf-8">
     </head>
     <body>
     <form runat="server">
     <asp:TextBox ID="txtSearch" runat="server" placeholder="Enter a location" Width="350px"></asp:TextBox> 
     <div id="result"></div>
     
     <script>
     function initialize() {
    ////การกำหนดคอนโทรล textbox ที่จะเพิ่มความสามารถ place auto-complete 
    เพื่อให้สามารถค้นหาสถานที่ตั้งได้ง่ายขึ้นเมื่อผู้ใช้พิมพ์ข้อมูลชื่อสถานที่ในกล่อง textbox
     var input = document.getElementById('<%= txtSearch.ClientID %>');
     var div = document.getElementById('result');
     var autocomplete = new google.maps.places.Autocomplete(input);
     google.maps.event.addListener(autocomplete, 'place_changed', function () {
    
    ////ดึงค่าที่ได้เมื่อมีการเลือกรายการจากสถานที่ที่อยู่ที่ขึ้นมา และนำไปใช้ในการแสดงผล
     var place = autocomplete.getPlace();
     if (!place.geometry) {
     return;
     }
     else {
    ////นำค่าที่ดึงได้มาแสดงผลในพื้นที่ที่ต้องการ (result)
     div.innerHTML = '<br><div><strong>' + place.name + '</strong><br>' +
     '<strong>Address :</strong> ' + place.formatted_address + '<br><strong>Latitude :</strong> ' + place.geometry.location.lat() + ' <strong>Longitude:</strong>' + place.geometry.location.lng() + '</div>';
     }
     });
     }
     ////สั่งรันฟังก์ชั่น initialize() ตอนมีการโหลดหน้าจอ
     google.maps.event.addDomListener(window, 'load', initialize); 
     </script>
     </form>
     </body>
    </html>
    

                 จากโค้ดข้างต้น เป็นการดึงค่าละติจูดและลองจิจูดโดยใช้ feature ที่มีของ Google Places API (place Autocomplete) เพื่ออำนวยความสะดวกให้กับผู้ใช้ในการพิมพ์ชื่อสถานที่ลงใน textbox โดย feature นี้จะมีความสามารถในการดึงข้อมูลสถานที่และชื่อที่ใกล้เคียงขึ้นมาแสดงให้ผู้ใช้เลือก(ตามที่ได้กล่าวมาแล้วข้างต้น) และได้มีการสร้าง event เพิ่มเติมเมื่อผู้ใช้เลือกรายการใดขึ้นมา ก็จะมีการเรียกใช้เมธอด getPlace() เพื่อดึงค่าข้อมูลต่างๆมาใช้งานต่อไปรวมถึงค่าละติจูดและลองจิจูดที่เราต้องการใช้ในการกำหนดพิกัดด้วย

    ตัวอย่างหน้าจอการค้นหาข้อมูลที่อยู่ เมื่อมีการพิมพ์คำค้น

    place_auto1

    ผลลัพธ์ที่ได้จากการค้นหา

    place_auto2

                 วิธีการที่ได้กล่าวไว้ในบทความนี้เป็นเพียงแนวทางให้กับผู้พัฒนาสามารถนำไปประยุกต์ใช้ตามความต้องการเท่านั้น ซึ่งผลลัพธ์ที่ได้อาจมีความคลาดเคลื่อนเกี่ยวกับค่าของละติจูด และลองจิจูดเล็กน้อยในบางสถานที่ แต่ยังคงถือว่าอยู่ในเกณฑ์ที่รับได้ เมื่อนำไปลงพิกัดจุดไม่คลาดเคลื่อนหรือแตกต่างกันมากนัก อีกทั้งยังช่วยอำนวยความสะดวกให้กับผู้ใช้ได้ระดับหนึ่งที่จะไม่ต้องไปค้นหาพิกัดจากแหล่งข้อมูลอื่นอีก และผู้เขียนหวังเป็นอย่างยิ่งว่า บทความนี้จะเป็นประโยชน์และช่วยอำนวยความสะดวกให้กับการพัฒนาโปรแกรมที่เกี่ยวกับการกำหนดพิกัดจุดบนแผนที่โดยมีการดึงมาจากฐานข้อมูล หรือการพัฒนาโปรแกรมอื่นๆ ที่จำเป็นต้องมีค่าข้อมูลละติจูดลองจิจูดร่วมด้วยไม่มากก็น้อย หากมีส่วนใดของเนื้อหาบทความที่มีความผิดพลาด ผู้เขียนขออภัยไว้ ณ ที่นี้ และหากท่านใดมีข้อมูลเพิ่มเติม หรือพบวิธีการอื่นๆที่สามารถดึงค่าละติจูด-ลองจิจูดนอกเหนือจากวิธีที่กล่าวมาข้างต้นสามารถชี้แนะและแลกเปลี่ยนประสบการณ์ร่วมกันได้นะคะ ขอบคุณค่ะ ^^

    แหล่งข้อมูลอ้างอิง :
    http://www.aspsnippets.com/Articles/Find-Co-ordinates-Latitude-and-Longitude-of-an-Address-Location-using-Google-Geocoding-API-in-ASPNet-using-C-and-VBNet.aspx
    https://developers.google.com/places/javascript/

  • ASP.NET MVC Part2: เริ่มต้นสร้างเว็บด้วย MVC with Bootstrap

    สวัสดีค่ะ จากบทความที่แล้ว ASP.NET MVC Part 1 : ทำความรู้จักกับ ASP.NET MVC ได้กล่าวถึง ASP.NET MVC ไปบ้างแล้วว่าคืออะไร ในส่วนของบทความนี้จะแนะนำการเริ่มต้นสร้าง Project เพื่อพัฒนา Web Application ด้วย Microsoft Visual Studio 2013 โดยใน MVC5 ซึ่งเป็นเวอร์ชันล่าสุด ได้มีการติดตั้ง Bootstrap มาให้ในตัว ช่วยให้การพัฒนาในส่วนของ View สามารถเรียกใช้งาน Bootstrap class ร่วมกับ Razor syntax(จะกล่าวถึงในบทความถัดไป) ในการแสดงผลหน้า View ได้ง่ายขึ้นและทำให้สามารถรองรับหลากหลายอุปกรณ์ที่มีหน้าจอที่มีขนาดแตกต่างกันออกไป โดยที่เราไม่ต้องเสียเวลาติดตั้งเพิ่มเอง

    Tools & Environment 

    • Microsoft Visual Studio 2013
    • Microsoft .Net Framework 4.5
    • ภาษาที่ใช้ในการพัฒนา Visual C#

    Step 1: เปิด Visual Studio ขึ้นมา และคลืกที่ New Project

    รูปที่ 1


    Step 2: ที่เมนูด้านซ้ายให้เลือก Visual C# > Web >ASP.NET Web Application และตั้งชื่อ Project ดังรูปที่ 2 หลังจากนั้นให้กดปุ่ม OK

    รูปที่ 2
    Step 3: เลือก Template Web โดยเลือกเป็น MVC หลังจากนั้นกด OK
    รูปที่ 3
    Step 4: Check และ Update เวอร์ชัน Bootstrap
    สังเกตที่ solution explorer ฝั่งด้านขวา ที่โฟลเดอร์ Content และโฟลเดอร์ Scripts จะพบไฟล์ Css และ JavaScript ของ Bootstrap ติดตั้งมาให้เรียบร้อยแล้ว
    รูปที่ 4
    ตรวจสอบเวอร์ชันของ Bootstrap ว่าเป็นเวอร์ชันล่าสุดแล้วหรือยัง โดย คลิกขวา ที่ Project แล้วเลือก Manage Nuget Packages ดังรูปที่ 5
    รูปที่ 5
    จะปรากฎหน้าต่าง Manage Nuget Package ซึ่งจะแสดง Package หรือ Library  ทั้งหมดที่ตอนนี้ Project เราติดตั้งอยู่ ให้เลือกดูที่ Boostrap และสังเกตคำอธิบายที่ช่องด้านขวา จะแสดงเวอร์ชั่นอยู่ ซึ่งจากรูปที่ 6 เป็น Bootstrap 3.0 ซึ่งเป็นเวอร์ชันปัจจุบันแล้ว หากยังไม่เป็นปัจจุบันจะขึ้นปุ่มให้สามารถ Update เวอร์ชันได้
    รูปที่ 6
     หลังจากนั้นให้ไปดูที่โฟลเดอร์ App_Start > BudleConfig.cs  ดังรูปที่ 7 โดยไฟล์ ฺBundleConfig.cs จะทำหน้าที่ลงทะเบียนเก็บ Path ของไฟล์ Java script และ CSS ต่างๆที่มีการเรียกใช้ในระบบไว้ที่นี่ เพื่อไว้เวลาเราอ้าง Path เราสามารถอ้าง Path ตามชื่อ Bundle ที่เราสร้างโดยไม่ต้องเรียกไปยัง Path File ตรงๆได้
    รูปที่ 7
    Step 5: ทดลอง Run preview ดูหน้าเว็บ
    ก่อนจะรัน ให้ไปที่ โฟลเดอร์ View > Shared >_layout.cshtml ซึ่งเป็น Layout ของระบบ(เทียบกับ Web Form ก็คือ Master Page) จากรูปที่ 8 จะเห็นว่า มีการเรียกใช้ Bootstrap Class ในการจัดวาง Component และ Layout ต่างๆไว้ให้
    รูปที่ 8

    กดปุ่ม Run  เพื่อดูผลลัพธ์ ออกมาดังรูป 9

    รูปที่ 9
    เมื่อทำการย่อปรับเป็นขนาด Mobile หน้าเว็บก็จะปรับตามขนาดของหน้าจอของอุปกรณ์ที่แสดงผลดังรูป  เป็นอันเสร็จเรียบร้อย ^^
    ——–End——-
    บทความถัดไป : เป็นการแนะนำการเริ่มต้นสร้างส่วนของ Model ในการติดต่อกับฐานข้อมูล  >> ASP.NET MVC Part3: สร้าง Model ด้วย Entity Framework
  • Export ข้อมูลไฟล์ Excel ในแบบ Single และ Multiple sheet ด้วย ASP.NET(C#)

                ความเดิมตอนที่แล้ว ผู้เขียนได้พูดถึงความสำคัญของข้อมูล และวิธีการ Import ข้อมูลจากไฟล์ Excel กันไปพอสมควร สำหรับในบทความนี้ ผู้เขียนจะขอพูดถึงวิธีการส่งออกข้อมูล หรือที่เรามักเรียกกันติดปากว่า “Export ข้อมูล” กันบ้าง เพื่อให้ผู้พัฒนาที่มีความสนใจสามารถพัฒนาโปรแกรมได้ครบวงจรทั้งแบบนำเข้าและส่งออกข้อมูล โดยผู้เขียนจะไม่ขอพูดถึงในรายละเอียดที่ได้กล่าวไว้แล้วก่อนหน้า ผู้อ่านสามารถอ่านรายละเอียดเพิ่มเติมได้ในบทความ “เรียนรู้วิธีการ Import ข้อมูลในรูปแบบไฟล์ Excel ด้วย ASP.NET (C#)” สำหรับในบทความนี้ผู้เขียนจะเน้นในส่วนของการ Export ข้อมูลเท่านั้น ซึ่งจะมีการอธิบายใน 2 ลักษณะเช่นกัน คือ แบบ Single sheet และแบบ Multiple sheet เพื่อให้เห็นเป็นแนวทางและสามารถนำไปต่อยอดการพัฒนาเพิ่มเติมสำหรับแต่ละท่านได้

    กรณีส่งออกข้อมูล(Export) ซึ่งในบทความนี้จะแบ่งเป็น 2 ลักษณะ ดังนี้

    • การส่งออกข้อมูลแบบ Single-sheet ซึ่งมีขั้นตอนการทำงานไม่ซับซ้อนมากนัก ดังนี้
    protected void btnExport_Click(object sender, EventArgs e)
    
    {
    //// ตารางสมมติ สร้างขึ้นเพื่อให้ผู้พัฒนาเห็นภาพ หากเป็นกรณีใช้งานจริงจะเป็นข้อมูลที่ดึงจากฐานข้อมูลเพื่อ Export ในรูปแบบไฟล์ Excel
    DataTable table = new DataTable();
    table.Columns.Add("Name", typeof(string));
    table.Columns.Add("Latitude", typeof(decimal));
    table.Columns.Add("Longitude", typeof(decimal));
    table.Columns.Add("Description", typeof(string));
    table.Rows.Add("University1", 7.006923, 100.500238, "Desc1");
    table.Rows.Add("University2", 7.172661, 100.613726, "Desc2");
    
    
    
    StringBuilder sb = new StringBuilder();
    if (table.Rows.Count > 0)
    {
    string fileName = Path.Combine(Server.MapPath("~/ImportDocument"), DateTime.Now.ToString("ddMMyyyyhhmmss") + ".xls");
    
    //// ลักษณะการตั้งค่าเพื่อเชื่อมต่อด้วย OleDb ซึ่งในกรณีนี้ไฟล์ Excel จะต้องมีนามสกุลเป็น .xls แต่หากเป็นนามสกุลแบบ .xlsx ต้องเปลี่ยนการกำหนดค่าให้เป็น
    conString = @"Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + 
    fileName + ";Extended Properties='Excel 12.0;HDR=YES;IMEX=1;';";  แทน
    
    string conString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + fileName + ";Extended Properties=\"Excel 8.0;HDR=Yes;IMEX=2\"";
    
    
     using (OleDbConnection con = new OleDbConnection(conString))
    {
    ////เขียนคำสั่งในการสร้างตาราง ซึ่งในที่นี้คือ WorkSheet ที่ต้องการ พร้อมทั้งกำหนดชื่อและชนิดของข้อมูลในแต่ละคอลัมน์
    string strCreateTab = "Create table University (" +
    " [Name] varchar(50), " +
    " [Latitude] double, " +
    " [Longitude] double, " +
    " [Description] varchar(200)) ";
    
    
    
    if (con.State == ConnectionState.Closed)
    {
    con.Open();
    }
    ////รันคำสั่งที่เขียนในการสร้างตาราง
    OleDbCommand cmd = new OleDbCommand(strCreateTab, con);
    cmd.ExecuteNonQuery();
    
    ////เขียนคำสั่งในการเพิ่มข้อมูล(insert) ข้อมูลในแต่ละฟิลด์ รวมทั้งประกาศพารามิเตอร์ที่ใช้ในการรับค่าข้อมูลที่อ่านได้
    string strInsert = "Insert into University([Name],[Latitude]," +
    " [Longitude], [Description]" +
    ") values(?,?,?,?)";
    
    OleDbCommand cmdIns = new OleDbCommand(strInsert, con);
    cmdIns.Parameters.Add("?", OleDbType.VarChar, 50);
    cmdIns.Parameters.Add("?", OleDbType.Double);
    cmdIns.Parameters.Add("?", OleDbType.Double);
    cmdIns.Parameters.Add("?", OleDbType.VarChar, 200);
    
    ////วนค่าที่ได้จากฐานข้อมูลและกำหนดค่าให้กับพารามิเตอร์และรันคำสั่งในการเพิ่มข้อมูลทีละรายการ
    foreach (DataRow  i in table.Rows)
    {
    cmdIns.Parameters[0].Value = i["Name"];
    cmdIns.Parameters[1].Value = i["Latitude"];
    cmdIns.Parameters[2].Value = i["Longitude"];
    cmdIns.Parameters[3].Value = i["Description"];
    cmdIns.ExecuteNonQuery();
    
    }
    }
    
    ////สร้างไฟล์ที่ต้องการดาวน์โหลดจากการอ่านที่ได้ทั้งหมด เพื่อบันทึกเป็นไฟล์ Excel ที่มีชื่อว่า University.xls
    
    byte[] content = File.ReadAllBytes(fileName);
    HttpContext context = HttpContext.Current;
    context.Response.BinaryWrite(content);
    context.Response.ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
    context.Response.AppendHeader("Content-Disposition", "attachment; filename=University.xls");
    Context.Response.End();
    }
    }
    • การส่งออกข้อมูลแบบ Multiple sheet ใช้ในกรณีที่มีข้อมูลที่ Export จำนวนมากและต้องการแบ่งข้อมูลที่มีอยู่ออกเป็น WorkSheet ย่อย ซึ่งหลักการทำงานจะคล้ายกับการส่งออกข้อมูลแบบ Single-sheet แต่จะซับซ้อนกว่าในส่วนของการวนค่าจากในฐานข้อมูลมาใส่ใน  WorkSheet โดยมีการกำหนดจำนวนแถวที่จะให้บันทึกในแต่ละ WorkSheet หากเกินค่าที่กำหนดจะสร้าง WorkSheet ใหม่และบันทึกข้อมูลลงไปใน WorkSheet นั้น
    static StringBuilder sqlInsert = new StringBuilder();
    static StringBuilder strScript = new StringBuilder();
    
    public static void ExportToMultipleXLSheets( System.String OutputFileName)
    {
    string connstr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" +
    mOutputFileName + ";Extended Properties='Excel 8.0'";
    OleDbConnection xlConn = new OleDbConnection(connstr);
    
    try
    {
    xlConn.Open();
    ////ตารางสมมติเช่นเดียวกับที่ได้กล่าวไว้ในแบบการส่งออกข้อมูลแบบ Single sheet
    DataTable table = new DataTable();
    table.Columns.Add("EmployeeID", typeof(string));
    table.Columns.Add("Name", typeof(string));
    table.Columns.Add("LastName", typeof(string));
    table.Columns.Add("Position", typeof(string));
    
    table.Rows.Add("0001", "Jack", "Rayman", "Programmer");
    table.Rows.Add("0002", "John", "Wicky", "Programmer");
    table.Rows.Add("0003", "Jenifer", "Wincy", "Programmer");
    table.Rows.Add("0004", "Kate", "Wrapper", "Manager");
    table.Rows.Add("0005", "Bella", "Cole", "Programmer");
    table.Rows.Add("0006", "Sandy", "Stick", "Programmer");
    table.Rows.Add("0007", "Tom", "Runner", "Programmer");
    
    ////เป็นการเรียกใช้เมธอดที่ใช้ในการเตรียมคำสั่งที่จะใช้วนสร้างตาราง/Worksheet
    PrepareScript(table);
    
    ////เป็นเมธอดที่ใช้ในการเริ่มต้นทำงานคำสั่งในการ Export โดยจะมีการคำนวณจำนวนแถวของข้อมูลว่าเกินที่ระบุไว้หรือไม่ หากเกินกำหนดจะสร้าง WorkSheet ใหม่นั่นเอง
    StartExport(table, xlConn);
    
    if (xlConn != null)
    {
    if (xlConn.State == ConnectionState.Open) xlConn.Close();
    xlConn.Dispose();
    }
    
    ////อ่านค่าและ Export ไปยังไฟล์ที่มีชื่อว่า ExportMultiSheetData.xls
    byte[] content = File.ReadAllBytes(mOutputFileName);
    HttpContext context = HttpContext.Current;
    context.Response.BinaryWrite(content);
    context.Response.ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
    context.Response.AppendHeader("Content-Disposition", "attachment; filename=ExportMultiSheetData.xls"  );
    context.Response.End();
    
    }
    catch (Exception exp)
    {
    throw new Exception("ImportToMultipleXLSheets", exp.InnerException);
    }
    finally
    {
    if (xlConn != null)
    {
    if (xlConn.State == ConnectionState.Open) xlConn.Close();
    xlConn.Dispose();
    }
    }
    }
    o เมธอดในการเตรียมคำสั่งที่ใช้ในการสร้างตารางและเพิ่มข้อมูล
    private static string PrepareScript(DataTable DTable)
    {
    // เตรียมคำสั่งในการสร้าง WorkSheet
    sqlInsert.Length = 0;
    strScript.Length = 0;
    
    ////วนค่าเพื่ออ่านค่าคอลัมน์ที่มีในแต่ละตาราง
    for (int i = 0; i < DTable.Columns.Count; i++)
    {
    sqlInsert.Append( "[" + DTable.Columns[i].ColumnName + "],");
    strScript.Append("[" + DTable.Columns[i].ColumnName.Replace("'", "''") + "]");
    
    ////กำหนดชนิดของข้อมูลแต่ละคอลัมน์
    if (DTable.Columns[i].DataType.ToString().ToLower().Contains("int") || DTable.Columns[i].DataType.ToString().ToLower().Contains("decimal"))
    strScript.Append(" double");
    else
    strScript.Append(" text");
    strScript.Append(", ");
    }
    
    sqlInsert.Remove(sqlInsert.Length - 1, 1);
    strScript.Remove(strScript.Length - 2, 1);
    strScript.Append(") ");
    ////ผลที่ได้ : 
    sqlInsert >> [EmployeeID],[Name],[LastName],[Position]
    strScript >> [EmployeeID] text, [Name] text, [LastName] text, [Position] text ) 
    เพื่อนำไปใช้ในการ run คำสั่งการทำงานสร้าง (create table) และเพิ่มข้อมูล (insert)
    
    return strScript.ToString();
    }
    o เมธอดในการสร้างตาราง/WorkSheet ตามคำสั่งที่เตรียมไว้
    private static void CreateXLSheets(DataTable DTable,
    OleDbConnection xlConn, System.String XLSheetName)
    {
    // สร้าง WorkSheet ใหม่
    System.Text.StringBuilder SqlFinalScript = new System.Text.StringBuilder();
    
    OleDbCommand cmdXl = new OleDbCommand();
    try
    {
    SqlFinalScript.Length = 0;
    cmdXl.Connection = xlConn;
    
    ///สร้างคำสั่งในการสร้างตาราง/WorkSheet ขึ้นใหม่ โดยตั้งชื่อตามพารามิเตอร์ที่ได้รับมา
    SqlFinalScript.Append("CREATE TABLE " + XLSheetName + " (");
    SqlFinalScript.Append(strScript.ToString());
    cmdXl.CommandText = SqlFinalScript.ToString();
    cmdXl.ExecuteNonQuery();
    }
    catch (Exception xlSheetExp)
    {
    throw (new Exception("CreateXLSheetException", xlSheetExp.InnerException));
    }
    finally
    {
    cmdXl.Dispose();
    }
    }
    
    private static void StartExport(DataTable DTable, OleDbConnection xlConn)
    {
    Int64 rowNo = 0, xlSheetIndex = 1, TotalNoOfRecords = 0;
    System.String NewXLSheetName = "Sheet";
    System.Text.StringBuilder strInsert = new System.Text.StringBuilder();
    TotalNoOfRecords = DTable.Rows.Count;
    OleDbCommand cmdXl = new OleDbCommand();
    cmdXl.Connection = xlConn;
    for (int count = 0; count < DTable.Rows.Count; count++)
    {
    strInsert.Length = 0;
    ////กรณีที่เป็นแถวแรกจะทำการสร้าง WorkSheet ขึ้นใหม่ โดยเรียกใช้เมธอด CreateXLSheets
    if (rowNo == 0 )
    { CreateXLSheets(DTable, xlConn, NewXLSheetName + xlSheetIndex);
    }
    rowNo += 1;
    
    ////กรณีที่จำนวนแถวใน 1 WorkSheet เกินที่กำหนดไว้จะสร้างชีทใหม่ ในกรณีนี้คือจะสร้าง WorkSheet ใหม่ทุกๆ 3 แถว และเพิ่มลำดับของ index ของ WorkSheet คราวละ 1
    if (TotalNoOfRecords > 3 && rowNo > 3
    {
    xlSheetIndex += 1;
    CreateXLSheets(DTable, xlConn, NewXLSheetName + xlSheetIndex);
    rowNo = 1;
    }
    
    ////เขียนคำสั่งในการเพิ่มข้อมูลไปยัง WorkSheet ที่กำหนด โดยมีการแทนที่ค่าของคำสั่งที่เตรียมไว้แล้วก่อนหน้านี้ในตอนเรียกใช้เมธอด PrepareScript
    strInsert.Append("Insert Into [" + NewXLSheetName + xlSheetIndex.ToString() +  "$](" + sqlInsert.ToString() + ") Values (");
    
    
    foreach (DataColumn dCol in DTable.Columns)
    {
    if (dCol.DataType.ToString().ToLower().Contains("int"))
    {
    if (DTable.Rows[count][dCol.Ordinal].ToString() == "")
    strInsert.Append("NULL");
    else
    strInsert.Append(DTable.Rows[count][dCol.Ordinal]);
    }
    else if (dCol.DataType.ToString().ToLower().ToLower().Contains("decimal"))
    {
    if (DTable.Rows[count][dCol.Ordinal].ToString() == "")
    strInsert.Append("NULL");
    else
    strInsert.Append(DTable.Rows[count][dCol.Ordinal]);
    }
    else
    strInsert.Append("\"" +
    DTable.Rows[count][dCol.Ordinal].ToString().Replace("'",
    "''") + "\"");
    strInsert.Append(",");
    }
    strInsert.Remove(strInsert.Length - 1, 1);
    strInsert.Append(");");
    
    ////run คำสั่งที่สร้างขึ้นในการเพิ่มข้อมูลทีละรายการ
    cmdXl.CommandText = strInsert.ToString();
    cmdXl.ExecuteNonQuery();
    
    }
    }
    
    o เขียนการทำงานเมื่อกดปุ่ม “Export”
    protected void btnExport_Click(object sender, EventArgs e)
    { 
     string fileName = Path.Combine(Server.MapPath("~/ImportDocument"), Guid.NewGuid().ToString() + ".xls");
    //เรียกใช้เมธอดในการ Export ข้อมูลแบบ Multiple sheet
    ExportToMultipleXLSheets(fileName);
    
    }

    หลักการทำงานคร่าวๆในการ Export ข้อมูลใน 2 ลักษณะจะมีหลักการพื้นฐานคล้ายกัน ซึ่งจะสรุปได้ดังนี้

    • ดึงข้อมูลจากฐานข้อมูลมาเก็บไว้ใน Datadatable หรือ Dataset
    • กำหนดชื่อไฟล์ที่จะใช้ในการเชื่อมต่อกับ OleDb
    • เชื่อมต่อกับ OleDb โดยการกำหนดค่าต่างๆ เพื่อใช้ในการทำงานกับไฟล์ Excel นั้นๆ
    • เตรียมกำหนดคำสั่ง sql command ในการสร้างโครงสร้างตาราง(create table) และ เพิ่มข้อมูล (insert) ในตารางที่สร้างไว้ หากเป็นกรณีที่ต้องการสร้างแบบ Multiple sheet
      ก็จะทำการเตรียมชุดคำสั่งไว้ และนำไปวน run คำสั่งนั้นๆตามจำนวนรอบที่มีการสร้าง WorkSheet ใหม่นั่นเอง
    • สั่ง run คำสั่งดังกล่าว หากจำนวนแถวของข้อมูลเกินกว่าที่กำหนดต่อ 1 WorkSheet (ซึ่งในกรณีสมมติให้เป็น 3 แถว) จะทำการสร้าง WorkSheet ใหม่
    • อ่านค่าที่ได้จากไฟล์ที่เชื่อมต่อกับ OleDb และผ่านกระบวนการ Export ข้อมูล  มาเขียนเป็นไฟล์ Excel เพื่อให้ผู้ใช้สามารถบันทึกข้อมูลในรูปแบบไฟล์ที่ Export ได้
    • หากเป็นการ Export ข้อมูลแบบ Multiple sheet จำนวนของ WorkSheet จะขึ้นอยู่กับข้อมูลที่ดึงมาและจำนวนที่กำหนดไว้ต่อ 1 WorkSheet นั่นเอง
    หมายเหตุ : Namespace ที่ต้องอ้างอิงเพิ่มเติมในการใช้งานโค้ดที่กล่าวไว้ข้างต้น มีดังนี้
                –  System.IO
                –  System.Data.OleDb
                –  System.Data
                –  System.Text

                บทความนี้ถือเป็นเพียงการแนะนำวิธีเบื้องต้นในการ Export ข้อมูลไฟล์ในรูปแบบ Excel เท่านั้น ซึ่งผู้พัฒนาสามารถนำความรู้หรือข้อมูลที่ได้จากบทความนี้ไปประยุกต์ ดัดแปลงหรือเพิ่มลูกเล่นให้กับงานที่ท่านกำลังพัฒนาอยู่ได้ เพื่อเพิ่มความสามารถในกระบวนการนำ-เข้าส่งออกดังกล่าว นอกจากนี้ผู้เขียนหวังเป็นอย่างยิ่งว่าบทความนี้อาจเป็นอีกหนึ่งทางเลือกสำหรับผู้พัฒนามือใหม่หรือผู้ที่กำลังค้นหาวิธีการนี้อยู่ สามารถนำไปพัฒนาต่อได้โดยง่าย หากผิดพลาดประการใด ผู้เขียนขออภัยไว้ ณ ที่นี้ค่ะ

    แหล่งข้อมูลอ้างอิง :
    http://www.codeproject.com/Articles/33271/Import-and-Export-to-Multiple-Worksheets
    http://dotnetawesome.blogspot.com/2013/11/how-to-import-export-database-data-from_18.html