Tag: c#

  • เขียนเว็บแอพแบบ SPA ด้วย Blazor (C#)

    หากคุณเป็นนักพัฒนาเว็บแอพที่ชอบฟังเพลงยุค 90 คุณก็คงจะคุ้นเคยกับ Multiple Page Applications (MPA) เป็นอย่างดี  MPA หรือเว็บแบบดั้งเดิมนั้นสามารถสังเกตุได้จากการที่เราคลิกดูข้อมูล หรือเปลี่ยน URL หน้าเว็บจะโหลดใหม่ทั้งหน้า เพื่อดึงข้อมูลมาแสดงผลใหม่ใน Browser ดังรูป

    ที่มา : https://subscription.packtpub.com/book/web_development/9781787284746/7/ch07lvl1sec38/application-routing

    ทุกวันนี้ก็ได้มีอีก Trend หนึ่งที่น่าสนใจ และมีการนำมาใช้สร้างเว็บแอพกันอย่างแพร่หลาย นั่นก็คือ Single Page Application หรือ SPA  โดยเว็บแบบนี้จะทำการโหลดหน้าเว็บจาก Request ครั้งแรกเท่านั้น หลังจากนั้นจะเป็นการรับส่งข้อมูลกันโดยใช้ JavaScript เข้ามาช่วย ทำให้ลดการ Reload หน้าเว็บโดยไม่จำเป็นลงไปได้ ข้อดีของเว็บแบบนี้คือ มี User Experience ที่ดีกว่า ตอบสนองได้อย่างรวดเร็ว และลดการทำงานของฝั่ง Server  ตัวอย่างเว็บไซต์แบบ SPA ที่เราใช้งานกันอยู่บ่อยๆ ได้แก่ Facebook, Instagram, Twitter, Google Mail เป็นต้น

    ที่มา : https://subscription.packtpub.com/book/web_development/9781787284746/7/ch07lvl1sec38/application-routing

    ตัวอย่างของ SPA Framework

    • Vue.js
    • React.js
    • AngularJS
    • Ember.js
    • Knockout.js
    • Meteor.js
    • Blazor

    จาก Framework ตัวอย่างทั้งหมดจะเป็น JavaScript ยกเว้น Blazor ที่ใช้ C# แทน และในฐานะที่คุ้นเคยกับการเขียนโค้ด C# อยู่แล้ว Blazor จึงเป็นตัวเลือกที่น่าสนใจ

    การสร้างแอพด้วย Blazor

    เปิด Visual Studio 2019 คลิก Create a new project ก็จะเจอหน้าจอดังรูป จากนั้นให้เลือก Project templates เป็น Blazor Server App

    หน้าจอ Configure your new project ให้ตั้งชื่อ Project name ว่า FirstApp.Web
    ระบุ Location เป็น C:\Source\

    หน้าจอ Additional information ให้เลือก Target Framework เป็น .NET 5.0

    ถึงขั้นตอนนี้แล้วทำให้ได้ Project ใหม่ที่มีไฟล์ตั้งต้นไว้ให้แล้ว  โดยการเขียนเว็บด้วย Blazor นั้นจะใช้ไฟล์ชนิด Razor ซึ่งเป็นเทคโนโลยีการสร้าง View ของ ASP.NET MVC

    กด F5 หรือคลิกปุ่มรัน เพื่อดูผลลัพธ์กันก่อน จะเห็นว่ามีตัวอย่างไว้ให้ศึกษา 2 เมนู คือ Counter และ Fetch data

    เมนู Counter เป็นตัวอย่างของการสร้าง Blazor Component เมื่อคลิกปุ่ม Click me ก็จะทำให้ Current count มีค่าเพิ่มขึ้นทีละ 1 โดยสังเกตได้ว่า ในการคลิกปุ่มทุกครั้งจะไม่มีการ Reload หน้าเว็บใหม่ทั้งหน้า แต่มีการเปลี่ยนแปลงเฉพาะส่วนของตัวเลข Current count เท่านั้น

    โค้ดตัวอย่าง Counter จะอยู่ในโฟลเดอร์ Pages ชื่อไฟล์ Counter.razor เมื่อเปิดดูจะพบว่าโค้ดมีส่วนสำคัญ 3 ส่วน คือ

    a. Route หรือ URL ที่ใช้ในการเข้าถึงหน้าเว็บ ในที่นี้คือ /counter เวลาเข้าใช้งานก็จะเป็น https://localhost:44381/counter

    b. View หรือส่วนของ HTML ใช้ในการจัดรูปแบบการแสดงผล

    c. C# Code เป็นส่วนที่ใช้เขียนโค้ดควบคุมการแสดงผลของ View

    มาถึงจุดนี้แล้ว ก็สามารถทดลองเขียนโปรแกรมเล่นๆ ได้ เช่น ถ้าต้องการให้คลิกปุ่ม Click me แล้ว ให้ตัวเลขเพิ่มครั้งละ 5 ก็สามารถทำได้ง่าย ๆ ดังรูป

    Component สามารถนำมา Reuse ได้ เช่น ถ้าต้องการนำ Counter ไปใช้งานในหน้า Home ก็ทำได้โดยการเพิ่ม Markup up เข้าไปใน View ดังรูป หากต้องการ Counter หลายตัว ก็สามารถใส่ tag เพิ่มเข้าไปได้อีกตามต้องการ

    จากตัวอย่างนี้จะเห็นได้ว่าหากผู้พัฒนามีความคุ้นเคยกับภาษา C# อยู่แล้ว ก็สามารถเขียนเว็บแอพแบบ SPA ด้วย Blazor ได้โดยใช้เวลาในการศึกษาเพิ่มเติมเพียงเล็กน้อยเท่านั้น ดังนั้น Blazor จึงเป็นตัวเลือกที่น่าสนใจ

  • การย่อ-ยุบแถวข้อมูลบน GridView โดยประยุกต์ใช้ร่วมกับ jQuery และ Collapse ใน Bootstrap (C#)

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

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

    • data-toggle=”collapse
    • data-target=”.multi-collapse” เพื่อกำหนด target ที่เราต้องการให้ย่อยุบได้ โดยใช้สไตล์ชีทเป็นตัวช่วยเพื่อแยกแต่ละกลุ่มออกจากกัน ซึ่งในที่นี้จะตั้งชื่อสไตล์ชีท multi-collapse ตามด้วยรหัสของประเภทกลุ่มนั้น โดยต้องระบุสไตล์ชีทนี้ให้กับแถวย่อย(child)ด้วย
    • aria-controls=”demo1 demo2 demo3 demo4 demo5” เพื่อกำหนดพื้นที่ที่จะย่อยุบ โดยสามารถกำหนดได้มากกว่า 1 พื้นที่ ซึ่งจะแยกด้วยการเว้นวรรคชื่อ id ของแถวย่อย(child) ในตัวอย่างนี้ คือ แถวย่อยของแถวหลักนี้ ประกอบด้วย 5 แถว คือ แถวที่มี id ชื่อ demo1,demo2,demo3,demo4, demo5 นั่นเอง
    • class = “collapseToggle” เป็นการระบุสไตล์ชีทเพื่อใช้ในการระบุตำแหน่งในการเปลี่ยนไอคอนเวลากดย่อ-ยุบ โดยเรียกใช้งานผ่าน jQuery(ซึ่งจะกล่าวถึงในส่วนถัดไป)

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

    1. ปรับแก้ในส่วนของ GroupGv_DataBound เพิ่มเติม เพื่อกำหนดค่าที่ระบุไว้ข้างต้นในแถวของหมวดหมู่ที่แทรกเข้ามา

    string lastCatName = "";
    string AllName = "";
    
     
    protected void GroupGv_DataBound(object sender, EventArgs e)
            {
                lastCatName = "";
                Table table = (Table)GroupGv.Controls[0];
    
                foreach (GridViewRow row in GroupGv.Rows)
                {
                  
                    HiddenField HidCatName = (HiddenField)row.FindControl("HidCatName");
                    HiddenField HidCatID = (HiddenField)row.FindControl("hdCatID");
                    HiddenField HidID = (HiddenField)row.FindControl("hdID");
    
                    ////ตั้งชื่อ id ให้กับแถวย่อย(child) แต่ละแถว
                    row.Attributes.Add("id", "Name" + HidID.Value);
    
                   ////กำนดสไตล์ชีทของตัวแถวย่อยและระบุเพื่อให้ย่อยุบได้ ด้วย accordian-body collapse และระบุพื้นที่เพื่อให้อ้างถึงจากแถวหลัก(parent)ได้ 
                  /////ซึ่งเป็นในส่วนของ multi-collapse จะเป็น multi-collapse ตามด้วยชื่อรหัสประเภทนั่นเอง 
                  /////โดยแถวย่อย(child) ที่มีแถวหลัก(parent)เดียวกัน ค่าของ multi-collapse จะตรงกันและตรงกับค่า target ที่ระบุไว้ในแถวหลัก(parent)ด้วย
    
                    if (row.RowState == DataControlRowState.Alternate)  ////กรณีที่ต้องการให้แต่ละแถวสลับสีกันเพื่อให้ง่ายต่อการดูข้อมูล 
                       row.CssClass = "Blue accordian-body collapse multi-collapse" + HidCatID.Value;
                    else               
                      row.CssClass = "accordian-body collapse multi-collapse" + HidCatID.Value;
    
                    if (HidCatName.Value != lastCatName)
                    {
    
                       ////////วนเพื่อหาจำนวน child ในแต่ละประเภทเพื่อใช้ในการกำหนด aria-controls
    
                        var strList = GroupData.Select("CategoryID='" + HidCatID.Value + "'");
                        foreach (DataRow dr in strList)
                        {
                            AllName += " Name" + dr["ID"];
                        }
    
                       //// เป็นการหาผลรวมค่าของฟิลด์ Amt ซึ่งหมายถึงจำนวน โดยเป็นการรวมค่าฟิลด์แยกตามแต่ละ CategoryID นั่นเอง
    
                        var sumOfValuesInCategory = GroupData.AsEnumerable().Where(x => x.Field<string>("CategoryID") == HidCatID.Value).Sum(x => x.Field<int>("Amt")).ToString();
                       
                        int realIndex = table.Rows.GetRowIndex(row);
                        string text = HidCatName.Value;
                        GridViewRow newHeaderRow = new GridViewRow(realIndex, 0, DataControlRowType.Header, DataControlRowState.Normal);
    
                        /////กำหนดค่าต่างๆ (data-toggle  data-target  aria-controls )ให้กับแถว เพื่อให้สามารถย่อ-ยุบได้ 
    
                        newHeaderRow.Attributes.Add("data-toggle", "collapse");
                        newHeaderRow.Attributes.Add("data-target", ".multi-collapse" + HidCatID.Value);
                        newHeaderRow.Attributes.Add("aria-expanded", "true");
                        newHeaderRow.Attributes.Add("aria-controls", AllName);
    
                        TableCell newCell = new TableCell();
                        newHeaderRow.Cells.AddAt(0, newCell);
    
                       /////ปรับแก้การระบุค่า ColumnSpan จากเดิมที่รวมกันทุกคอลัมน์(GroupGv.Columns.Count) 
                       //// แต่กรณีนี้ต้องเว้นคอลัมน์ไว้แสดงผลจำนวนรวมแต่ละประเภทด้วย
    
                        newCell.ColumnSpan =1;
                        newCell.BackColor = System.Drawing.Color.FromName("#399ea9"); ;
                        newCell.ForeColor = System.Drawing.Color.White;
                        newCell.Font.Bold = true;
                        newCell.Attributes.Add("class", "collapseToggle");
    
                        /////ใส่ไอคอน + หน้าข้อความชื่อประเภท เพื่อบอกให้ทราบว่าสามารถกดย่อ-ยุบได้
                        newCell.Text = "<i class='fas fa-plus mr-2'></i>" + string.Format(HidCatName.Value, "&nbsp;{0}", text);
    
                        ///สร้าง TableCell หรือคอลัมน์ใหม่ เพื่อแสดงผลข้อมูลจำนวนรวมของแต่ละประเภท 
    
                        TableCell newCellTotal = new TableCell();
    
                        /////เพิ่ม TableCell ในแถวที่กำลังสร้างและระบุค่าต่างๆ
                        newHeaderRow.Cells.AddAt(1, newCellTotal);
                        newCellTotal.ColumnSpan = 1;
                        newCellTotal.BackColor = System.Drawing.Color.FromName("#399ea9"); ;
                        newCellTotal.ForeColor = System.Drawing.Color.White;
                        newCellTotal.Font.Bold = true;
                        newCellTotal.HorizontalAlign = HorizontalAlign.Right;
    
                        ////นำค่าผลรวมในตัวแปร sumOfValuesInCategory ที่คำนวณได้ข้างต้นมาจัดรูปแบบก่อนแสดงผลใน TableCell สร้าง
    
                        newCellTotal.Text = string.Format("{0:#,##0}",int.Parse(sumOfValuesInCategory));
                        newCellTotal.Attributes.Add("class", "collapseToggle");
                        table.Controls.AddAt(realIndex, newHeaderRow);
                    
                          AllName = "";
    
                    }
                    lastCatName = HidCatName.Value;
                }
            }

    2.จัดทำให้ไอคอนสามารถเปลี่ยนเป็น + หรือ – ได้ เมื่อกดย่อ-ยุบ ด้วย jQuery

     <script>
         $(document).ready(function () {
    
    ///เมื่อมีการคลิก element ที่มีสไตล์ชีท collapseToggle จะทำการเปลี่ยนค่าไอคอน หากเป็นภาพบวกจะเปลี่ยนเป็นลบ หากเป็นเครื่องหมายลบจะเปลี่ยนเป็นเครื่องหมายบวก
                $('.collapseToggle').click(function () {
                    $(this).find('i').toggleClass('fa-plus fa-minus');
                });
            });
    </script>

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

        <style>
            .collapseToggle {
                cursor: pointer;
            }
        </style>

    ผลลัพธ์

    เกร็ดความรู้เพิ่มเติม : จากตัวอย่างข้างต้น ตอนเปิดหน้าจอครั้งแรก ทุกหมวดหมู่จะถูกยุบอยู่ หากต้องการให้การแสดงผลครั้งแรก ทุกหมวดหมู่ถูกขยายอยู่ สามารถปรับแก้โค้ดอีกเพียงเล็กน้อย ดังนี้ค่ะ

    1. เพิ่มคำว่า “show” เข้าไปในสไตล์ชีทตอนกำหนดให้แถวย่อย ดังนี้ค่ะ

    แบบเดิม

                    if (row.RowState == DataControlRowState.Alternate)  ////กรณีที่ต้องการให้แต่ละแถวสลับสีกันเพื่อให้ง่ายต่อการดูข้อมูล 
                       row.CssClass = "Blue accordian-body collapse multi-collapse" + HidCatID.Value;
                    else               
                      row.CssClass = "accordian-body collapse multi-collapse" + HidCatID.Value;

    แบบใหม่

                      if (row.RowState == DataControlRowState.Alternate)  ////กรณีที่ต้องการให้แต่ละแถวสลับสีกันเพื่อให้ง่ายต่อการดูข้อมูล 
    
                        row.CssClass = "Blue accordian-body collapse show multi-collapse" + HidCatID.Value;
                    else
                        row.CssClass = "accordian-body collapse show multi-collapse" + HidCatID.Value;

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

    แบบเดิม

                       /////ใส่ไอคอน + หน้าข้อความชื่อประเภท เพื่อบอกให้ทราบว่าสามารถกดย่อ-ยุบได้
                        newCell.Text = "<i class='fas fa-plus mr-2'></i>" + string.Format(HidCatName.Value, "&nbsp;{0}", text);

    แบบใหม่

                        /////ใส่ไอคอน + หน้าข้อความชื่อประเภท เพื่อบอกให้ทราบว่าสามารถกดย่อ-ยุบได้
                        newCell.Text = "<i class='fas fa-minus mr-2'></i>" + string.Format(HidCatName.Value, "&nbsp;{0}", text);

    ผลลัพธ์

              จากตัวอย่าง การแสดงผลครั้งแรกก็จะเปลี่ยนเป็นขยายทั้งหมด และแสดงไอคอนเป็นเครื่องหมายลบ(-)ตั้งต้นไว้ให้ และสามารถย่อ-ยุบตามปกติได้แล้วค่ะ

    เพิ่มเติม

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

    1. สร้างปุ่ม 2 ปุ่ม เพื่อกดขยายทั้งหมด และย่อทั้งหมด

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div class="col pull-right">
                    <asp:LinkButton ID="lnkShowAll" runat="server" CssClass="btn btn-sm btn-info mb-1" OnClientClick="javascript:ShowHideAll('1');return false;"><i class="fas fa-eye"></i>แสดงทั้งหมด</asp:LinkButton>
                    <asp:LinkButton ID="lnkHideAll" CssClass="btn btn-sm btn-info mb-1" OnClientClick="ShowHideAll('0');return false;" runat="server"><i class="fas fa-eye-slash"></i>ซ่อนทั้งหมด</asp:LinkButton>
                </div>
    
    
            </ContentTemplate>
        </asp:UpdatePanel>

    2. เขียนฟังก์ชั่นในการซ่อน/แสดงทั้งหมด

    <script>
        
     function ShowHideAll(flag) {
    
              /////ล้างค่าการระบุการแสดงผลและการแสดงไอคอนทั้งหมด ทำให้ทุกแถวยุบอยู่ จนกว่าจะมีการสั่งให้ show
                $(".accordian-body").removeClass("show");
                $(".collapseToggle").find('i').removeClass("fa-plus").removeClass("fa-minus");
    
             /////กรณีต้องการให้แสดงจะเพิ่มสไตล์ชีท show ให้กับทุกแถว และแสดงไอคอนเป็น - ทั้งหมด เพื่อให้กดย่อได้
    
                if (flag == '1') {
                    $(".accordian-body").addClass("show");
                    $(".collapseToggle").find('i').addClass("fa-minus");
                }
            /////กรณีต้องการให้แสดงจะแสดงไอคอนเป็น + ทั้งหมด เพื่อให้กดขยายได้
                else
                    $(".collapseToggle").find('i').addClass("fa-plus");
                }
    
    </script>

    ผลลัพธ์

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

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

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

    https://getbootstrap.com/docs/4.0/components/collapse/
    https://www.geeksforgeeks.org/how-to-change-symbol-with-a-button-in-bootstrap-accordion/

  • การจัดหมวดหมู่แถวของข้อมูลบน GridView ด้วย C#

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

    ขั้นตอนในการพัฒนา

    1. เตรียมข้อมูลในการแสดงผล โดยจากตัวอย่างนี้ จะทำการสมมุติข้อมูลของดอกไม้ ผลไม้ และต้นไม้ และมีข้อมูลเพื่อใช้ในการแยกประเภทไว้ด้วย เพื่อให้เห็นภาพมากขึ้นค่ะ
    //// ประกาศตัวแปร GroupData
     เป็น ViewState เพื่อใช้ในงานข้อมูลในส่วนการแทรกแถวประเภทกลุ่มใน Event อื่นด้วย 
    
    public DataTable  GroupData
    
            {
                get
                {
                    if (ViewState["GroupData"] == null)
                    {
                        ViewState["GroupData"] = new DataTable();
                    }
                    return (DataTable)ViewState["GroupData"];
                }
                set { ViewState["GroupData"] = value; }
            }
    
    //// ผู้อ่านสามารถเรียกใช้ฟังก์ชั่น Getdata() การดึงข้อมูลนี้ในตอน Page_Load เพื่อดูเป็นตัวอย่างได้ค่ะ
    protected void Getdata() 
            {
                
                GroupData.Columns.AddRange(new DataColumn[5] {
                             new DataColumn("CategoryName", typeof(string)),
                             new DataColumn("Name", typeof(string)),
                             new DataColumn("ID", typeof(string)),
                              new DataColumn("Amt", typeof(int)),
                            new DataColumn("CategoryID",typeof(string))});
    
                GroupData.Rows.Add("Flower", "Rose", "1",2500, "01");
                GroupData.Rows.Add("Flower", "Lotus", "3",150, "01");
                GroupData.Rows.Add("Fruit", "Grape", "2",350, "02");
                GroupData.Rows.Add("Fruit", "Mango", "4",1750, "02");
                GroupData.Rows.Add("Fruit", "Orange", "5",2240, "02");
                GroupData.Rows.Add("Tree", "Cactus", "6",370, "03");
                GroupData.Rows.Add("Tree", "Hazelnut Tree", "6",2250, "03");
                ////นำข้อมูลใน Datatable ชื่อ GroupData แสดงผลใน GridView
                GroupGv.DataSource = GroupData;
                GroupGv.DataBind();
            }
    

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

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

        <asp:GridView ID="GroupGv" runat="server" AutoGenerateColumns="False"
            DataKeyNames="ID"  CssClass="table table-sm table-hover Blue" Width="100%">
            <AlternatingRowStyle CssClass="Blue" />
            <EmptyDataRowStyle CssClass="Blue" />
            <EmptyDataTemplate>
                <br />
                <div style="text-align: center">
                    <i class="fas fa-exclamation-circle"></i>&nbsp;&nbsp; ไม่พบข้อมูล<br />
                    &nbsp;
                </div>
    
            </EmptyDataTemplate>
            <EmptyDataRowStyle HorizontalAlign="Center" />
            <HeaderStyle CssClass="Blue" />
    
            <Columns>
                <asp:TemplateField HeaderText="Name">
                    <ItemTemplate>
                        <asp:HiddenField ID="hdCatID" runat="server" Value='<%# Eval("CategoryID") %>' />
                        <asp:HiddenField ID="hdID" runat="server" Value='<%# Eval("ID") %>' />
                        <asp:HiddenField ID="HidCatName" runat="server" Value='<%# Eval("CategoryName") %>' />
                        <asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                    </ItemTemplate>
                     <ItemStyle  Width="50%"  />
                </asp:TemplateField> <asp:BoundField HeaderText="Category Name" DataField="CategoryName">
                <ItemStyle  Width="30%"/>
                 </asp:BoundField>
                  <asp:BoundField HeaderText="Amount" DataField="Amt"  DataFormatString="{0:#,##0}" >
                <ItemStyle HorizontalAlign="Right"  Width="20%"/>
                 </asp:BoundField>
               
            </Columns>
        </asp:GridView>
    

    เพิ่มเติม : ข้อมูลจำนวนเป็นข้อมูลที่เป็นตัวเลข จึงได้ทำการจัด Format รูปแบบของข้อมูลให้แสดงผลแบบตัวเลข ด้วยการระบุ DataFormatString=”{0:#,##0}” เช่น หากข้อมูล 2500 จะแสดง 2,500 ให้อัตโนมัติ

    ผลลัพธ์(ก่อนทำการจัดกลุ่ม)

    3. เพิ่ม Event ที่ชื่อว่า OnDataBound=”GroupGv_DataBound” ให้กับ GridView เพื่อแสดงผลข้อมูลแบบกลุ่ม และตัดคอลัมน์ประเภท(Category Name)ออกไป เนื่องจากเราจะนำไปใช้แสดงผลในการจัดกลุ่ม

        <asp:GridView ID="GroupGv" runat="server" AutoGenerateColumns="False"
            DataKeyNames="ID"  CssClass="table table-sm table-hover Blue" Width="100%" OnDataBound="GroupGv_DataBound">
            <AlternatingRowStyle CssClass="Blue"  />
            <EmptyDataRowStyle CssClass="Blue" />
            <EmptyDataTemplate>
                <br />
                <div style="text-align: center">
                    <i class="fas fa-exclamation-circle"></i>&nbsp;&nbsp; ไม่พบข้อมูล<br />
                    &nbsp;
                </div>
    
            </EmptyDataTemplate>
            <EmptyDataRowStyle HorizontalAlign="Center" />
            <HeaderStyle CssClass="Blue" />
    
            <Columns>
                <asp:TemplateField HeaderText="Name">
                    <ItemTemplate>
                         <%--นำค่าไปใช้ตอนแทรกแถวหมวดหมู่ที่ต้องการจัดกลุ่ม--%>
                        <asp:HiddenField ID="hdCatID" runat="server" Value='<%# Eval("CategoryID") %>' />
                        <asp:HiddenField ID="hdID" runat="server" Value='<%# Eval("ID") %>' />
                        <asp:HiddenField ID="HidCatName" runat="server" Value='<%# Eval("CategoryName") %>' />
                        <asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                    </ItemTemplate>
                     <ItemStyle  Width="70%"  />
                </asp:TemplateField> 
                  <asp:BoundField HeaderText="Amount" DataField="Amt"  DataFormatString="{0:#,##0}">
                <ItemStyle HorizontalAlign="Right"  Width="30%"/>
                 </asp:BoundField>
               
            </Columns>
        </asp:GridView>
    

    4. เพิ่มโค้ดในส่วนของฝั่งเซิร์ฟเวอร์(C#) ให้กับ Event ของ GridView ที่เราเพิ่มในข้อ 3. เพื่อจัดกลุ่ม ดังนี้ค่ะ

            string lastCatName = "";
            string AllName = "";
    
            protected void GroupGv_DataBound(object sender, EventArgs e)
            {
                lastCatName = "";
                Table table = (Table)GroupGv.Controls[0];
    
               ////////วนเพื่อแทรกแถวชื่อแต่ละประเภทของข้อมูล เช่น ดอกไม้ ต้นไม้ หรือผลไม้ 
                foreach (GridViewRow row in GroupGv.Rows)
                {
                  
                  
                    HiddenField HidCatName = (HiddenField)row.FindControl("HidCatName");
                    HiddenField HidCatID = (HiddenField)row.FindControl("hdCatID");
                    HiddenField HidID = (HiddenField)row.FindControl("hdID");
                    
            
               ////////หากพบว่าเป็นประเภทใหม่จะทำการสร้างแถวและเพิ่มแทรกเข้าไป โดยมีการกำหนดค่าต่างๆ เช่น ข้อความที่จะแสดง สีพื้นหลัง สีตัวอักษร และค่า ColumnSpan เป็นต้น
    
     
                    if (HidCatName.Value != lastCatName)
                    {
                       
                        int realIndex = table.Rows.GetRowIndex(row);
                        string text = HidCatName.Value;
                        GridViewRow newHeaderRow = new GridViewRow(realIndex, 0, DataControlRowType.Header, DataControlRowState.Normal);
    
    
                        /////สร้าง TableCell และระบุค่าต่างๆ ก่อนนำไปเพิ่มในแถว newHeaderRow ที่เพิ่งสร้าง
                       TableCell newCell = new TableCell();
                        newHeaderRow.Cells.AddAt(0, newCell);
    
                        ///กำหนด ColumnSpan เท่ากับจำนวนคอลัมน์ทั้งหมดใน GridView (GroupGv.Columns.Count)เพื่อให้คอลัมน์ที่ต้องการเพิ่มยาวครอบคลุมทั้งแถว
                        newCell.ColumnSpan = GroupGv.Columns.Count;
                        newCell.BackColor = System.Drawing.Color.FromName("#399ea9"); ;
                        newCell.ForeColor = System.Drawing.Color.White;
                        newCell.Font.Bold = true;
                        newCell.Text = string.Format(HidCatName.Value, "&nbsp;{0}", text);
    
                        ////เพิ่มแถวที่ต้องการแทรกเข้าไปในตารางหรือ GridView ที่เรากำลังจัดการอยู่นั่นเอง
                        table.Controls.AddAt(realIndex, newHeaderRow);
                       
                    }
                    lastCatName = HidCatName.Value;
                }
            }         
    

    ผลลัพธ์ (หลังมีการจัดกลุ่ม)

    เพิ่มเติม : จากตัวอย่างข้างต้น เนื่องด้วยข้อมูลเป็นการจัดกลุ่มและมีข้อมูลเชิงตัวเลข ผู้เขียนจึงขอแนะนำเพิ่มเติมในส่วนของการแสดงจำนวนรวมแยกในแต่ละกลุ่มไว้ด้วย โดยเพิ่มเติมโค้ดในส่วนของ GroupGv_DataBound ดังนี้ค่ะ

     protected void GroupGv_DataBound(object sender, EventArgs e)
            {
                lastCatName = "";
                Table table = (Table)GroupGv.Controls[0];
    
                foreach (GridViewRow row in GroupGv.Rows)
                {
                  
                    HiddenField HidCatName = (HiddenField)row.FindControl("HidCatName");
                    HiddenField HidCatID = (HiddenField)row.FindControl("hdCatID");
                    HiddenField HidID = (HiddenField)row.FindControl("hdID");
    
    
                    if (HidCatName.Value != lastCatName)
                    {
    
                       //// เป็นการหาผลรวมค่าของฟิลด์ Amt ซึ่งหมายถึงจำนวน โดยเป็นการรวมค่าฟิลด์แยกตามแต่ละ CategoryID นั่นเอง
    
                        var sumOfValuesInCategory = GroupData.AsEnumerable().Where(x => x.Field<string>("CategoryID") == HidCatID.Value).Sum(x => x.Field<int>("Amt")).ToString();
                       
    
                        int realIndex = table.Rows.GetRowIndex(row);
                        string text = HidCatName.Value;
                        GridViewRow newHeaderRow = new GridViewRow(realIndex, 0, DataControlRowType.Header, DataControlRowState.Normal);
                        TableCell newCell = new TableCell();
                        newHeaderRow.Cells.AddAt(0, newCell);
    
                       /////ปรับแก้การระบุค่า ColumnSpan จากเดิมที่รวมกันทุกคอลัมน์(GroupGv.Columns.Count) 
                       //// แต่กรณีนี้ต้องเว้นคอลัมน์ไว้แสดงผลจำนวนรวมแต่ละประเภทด้วย
    
                        newCell.ColumnSpan =1;
                        newCell.BackColor = System.Drawing.Color.FromName("#399ea9"); ;
                        newCell.ForeColor = System.Drawing.Color.White;
                        newCell.Font.Bold = true;
                        newCell.Text = string.Format(HidCatName.Value, "&nbsp;{0}", text);
    
                        ///สร้าง TableCell หรือคอลัมน์ใหม่ เพื่อแสดงผลข้อมูลจำนวนรวมของแต่ละประเภท 
    
                        TableCell newCellTotal = new TableCell();
    
    
                        /////เพิ่ม TableCell ในแถวที่กำลังสร้างและระบุค่าต่างๆ
                        newHeaderRow.Cells.AddAt(1, newCellTotal);
                        newCellTotal.ColumnSpan = 1;
                        newCellTotal.BackColor = System.Drawing.Color.FromName("#399ea9"); ;
                        newCellTotal.ForeColor = System.Drawing.Color.White;
                        newCellTotal.Font.Bold = true;
                        newCellTotal.HorizontalAlign = HorizontalAlign.Right;
    
    
                        ////นำค่าผลรวมในตัวแปร sumOfValuesInCategory ที่คำนวณได้ข้างต้นมาจัดรูปแบบก่อนแสดงผลใน TableCell สร้าง
    
                        newCellTotal.Text = string.Format("{0:#,##0}",int.Parse(sumOfValuesInCategory));
                       
                        table.Controls.AddAt(realIndex, newHeaderRow);
                    
                    }
                    lastCatName = HidCatName.Value;
                }
            }

    ผลลัพธ์

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

    แหล่งอ้างอิง
    https://stackoverflow.com/questions/61773421/sum-column-where-condition-with-datatable

  • สร้างไฟล์ PDF จาก HTML + CSS ด้วย iText7.pdfhtml (C#)

    การพัฒนา Web Application หลายครั้งที่จะมีความต้องการจาก User ให้พัฒนาระบบที่สามารถนำข้อมูลจากฐานข้อมูลมาออกรายงาน หรือบันทึกในรูปแบบ PDF ได้ ระบบที่กำลังพัฒนาอยู่ขณะนี้ก็เช่นเดียวกัน มีความต้องการให้สร้าง E-Form บันทึกข้อมูลในฐานข้อมูล และสร้างไฟล์ PDF ที่มีการจัดรูปแบบเป็นหนังสือราชการ ได้แก่ บันทึกข้อความ ประกาศ ระเบียบ คำสั่ง เป็นต้น จากนั้นจึงนำไฟล์ PDF ที่ได้ไปใช้ลงนามด้วย Digital Signature และดำเนินการอื่นๆ ต่อได้

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

    จากการศึกษาและลองผิดลองถูกก็ได้แนวทางในการพัฒนาดังนี้

    1. สร้างไฟล์ HTML และจัดรูปแบบแสดงผลข้อมูลด้วย CSS ให้เหมือนกระดาษ
    2. ใช้ Add-on ของ iText7 ชื่อ iText7.pdfhtml ช่วยแปลงจาก HTML เป็น PDF
    3. บันทึกไฟล์ PDF บนเซิร์ฟเวอร์ หรือแสดงผลผ่าน Browser

    ตัวอย่างการพัฒนาด้วย Blazor Server Application

    1. เปิด Visual Studio 2019 และสร้าง Project ใหม่ เลือก Blazor Server App คลิก Next ระบุโฟลเดอร์บันทึก Project จากนั้น ระบุ Target Framework เป็น .NET 5.0 คลิก Create
    1. ติดตั้ง Add-on ชื่อ itext7.pdfhtml จาก NuGet โดยไปที่เมนู Project -> Manage NuGet Packages
    2. คลิก Browse และค้นหา itext7.pdfhtml เลือกเวอร์ชั่นล่าสุด (3.0.4) และคลิก Install
    1. สร้างไฟล์ HTML จัดรูปแบบข้อมูลด้วย CSS เก็บไว้ในโฟลเดอร์ wwwroot ในที่นี้สร้างไฟล์ชื่อ doc1.html และระบุ style sheet ไว้ในโฟลเดอร์ css
    1. เปิดไฟล์ Pages/Index.razor เขียนโค้ดดังนี้
      5.1 @using iText.Html2pdf
      เพื่อให้สามารถเรียกใช้งาน Ad-on ได้
      5.2 @using System.IO
      เพื่อให้สามารถเขียนไฟล์ได้
      5.3 กำหนด onclick event ของปุ่ม ให้ทำฟังก์ชั่น CreatePDF
      5.4 public static string SRC = $”{BASEURI}doc1.html”;
      ระบุไฟล์ HTML ต้นทางที่ต้องการแปลงเป็น PDF
      5.5 public static string DEST = $”{TARGET}doc1.pdf”;
      ระบุไฟล์ pdf บันทึกผลลัพธ์ของการแปลงไฟล์
      5.6 HtmlConverter.ConvertToPdf(new FileInfo(SRC), new FileInfo(DEST), properties);
      แปลงไฟล์ HTML เป็น PDF
    1. คลิก รัน หรือกด F5 จะได้หน้าจอดังรูป
    1. คลิก Create PDF ระบบจะสร้างไฟล์ชื่อ doc1.pdf ดังรูป

    เพียงเท่านี้ก็จะได้ผลลัพธ์ไฟล์ PDF แล้ว แต่จากการใช้งานพบว่า ยังมีข้อจำกัดในส่วนของการจัดรูปแบบข้อความภาษาไทยแบบ Justify ยังไม่สวยงามเท่าที่ควร

  • วิธีการรวมไฟล์ pdf หลายไฟล์และรูปภาพมาแสดงในครั้งเดียวด้วย iTextSharp (#C)

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

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

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

    1.ดึงข้อมูลไฟล์แนบเอกสารทั้งหมดของผู้ใช้

      DataTable dtFile = new DataTable();
    
        //เป็นส่วนของการสมมุติการดึงข้อมูลการแนบไฟล์ของผู้ใช้ออกมาในรูปแบบ Datatable
            dtFile.Columns.AddRange(new DataColumn[2] { 
                             new DataColumn("CITIZEN_ID", typeof(string)),
                            new DataColumn("FILE_PATH",typeof(string))});
            dtFile.Rows.Add("xxxxxxxxxxxx", "resumeFiles/Document1.pdf");
            dtFile.Rows.Add("xxxxxxxxxxxx", "resumeFiles/Document2.pdf");
            dtFile.Rows.Add("xxxxxxxxxxxx", "resumeFiles/Document3.pdf");
            dtFile.Rows.Add("xxxxxxxxxxxx", "resumeFiles/Image.png");
             
    
    //สร้างตัวแปรในการเก็บค่าชื่อไฟล์ เพื่อใช้ในการส่งเป็นพารามิเตอร์ในการรวมไฟล์
            List<string> listFiles = new List<string>();
            string path = Server.MapPath("../registPDF");
    
    //ตั้งชื่อไฟล์ที่จะรวมไฟล์ทั้งหมดไว้ และประกาศตัวแปรต่างๆที่จำเป็นต้องใช้ในการสร้างและรวมไฟล์
            string genName = Guid.NewGuid().ToString() + ".pdf";
    
    //ตัวแปร tmpPath เป็นตัวแปรที่เป็นชื่อไฟล์ที่สร้างขึ้นเพื่อรวมไฟล์ทั้งหมด
    
            string tmpPath = "../registPDF/" + genName;
            string[] files = Directory.GetFiles(path);
            string[] fileName;
            string DestName = "";
    
    //กำหนดนามสกุลที่ต้องการตรวจสอบว่าเป็นไฟล์รูปภาพหรือไม่
            string[] ImgExt = { "png","jpg","jpeg","gif"};
    
           /// เป็นการลบ Temporary file ที่ถูกสร้างขุึ้นเพื่อรวมไฟล์ เพื่อไม่ให้มีไฟล์ที่ไม่ใช้งานค้างอยู่ในเซิร์ฟเวอร์มากเกินไป *****
            foreach (string file in files)
            {
                FileInfo fi = new FileInfo(file);
                if (fi.LastAccessTime < DateTime.Now.AddMinutes(-30))
                    fi.Delete();
            }
          
    
          //วนค่าเพื่อเก็บตัวแปรชื่อไฟล์แนบก่อนรวมไฟล์
    
            for (int i = 0; i <= dtFile.Rows.Count - 1; i++)
            {
    
         //ตรวจสอบว่ามีไฟล์ดังกล่าวอยู่จริงหรือไม่บนเซิร์ฟเวอร์ตามที่อยู่ไฟล์ที่อ้างถึง
                if (File.Exists(Server.MapPath("../" + dtFile.Rows[i]["FILE_PATH"].ToString())))
                {
    
         //ตรวจสอบชนิดของไฟล์ว่ามีนามสกุลอะไร หากไม่ใช่ไฟล์ PDF จะต้องทำการแปลงและสร้างเป็นไฟล์ PDF ก่อนส่งไปรวมไฟล์
                    fileName = dtFile.Rows[i]["FILE_PATH"].ToString().Split('.');
                    if (fileName[1] == "pdf")
                        listFiles.Add(Server.MapPath("../" + dtFile.Rows[i]["FILE_PATH"].ToString()));
                    else 
                    {
    
         //กรณีที่พบว่าไม่ใช่ไฟล์ PDF จะตรวจสอบว่าเป็นไฟล์รูปภาพหรือไม่ หากใช่จะทำการแปลงและสร้างเป็นไฟล์ PDF ก่อนส่งไปรวมไฟล์
                        if (ImgExt.Contains(fileName[1].ToLower()))
                        {
                            DestName = "../registPDF/"  + Guid.NewGuid().ToString() + ".pdf";
                            ConvertImageToPdf(Server.MapPath("../" + dtFile.Rows[i]["FILE_PATH"].ToString()), Server.MapPath(DestName));
                            listFiles.Add(Server.MapPath( DestName));
                        }
                    }
                } 
     
            }
    
    //เรียกใช้งานเมธอดในการรวมไฟล์ โดยส่งค่าลิสต์ของชื่อไฟล์ PDF ทั้งหมดที่ต้องการรวม และชื่อไฟล์ปลายทางที่จะใช้ในการรวม
    
            CombineMultiplePDFs(listFiles.ToArray(), Server.MapPath(tmpPath));
    
    
    //แสดงผล PDF ไฟล์ที่ได้ทำการรวมเรียบร้อยแล้วด้วย Literal โดยตัวแปร tmpPath คือที่อยู่ของไฟล์ใหม่ที่ทำการรวมไฟล์ PDF ทั้งหมดเรียบร้อยแล้ว
    
    
            StringBuilder strObj = new StringBuilder();
    
            strObj.Append("<object id=\"pdfContainer\" type=\"application/pdf\"");
            strObj.AppendFormat(" data=\"{0}#toolbar=1&amp;navpanes=0&amp;scrollbar=1\" style=\" z-index:1000; width: 99%;  height: 600px;\">", tmpPath);
            strObj.AppendFormat(" <param name=\"src\" value=\"{0}#toolbar=1&amp;navpanes=0&amp;scrollbar=1\"> ", tmpPath);
            strObj.Append(" </object>");
    
            ltrPDF.Text = strObj.ToString();
            dtFile = null;
            

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

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

    2. เขียนเมธอดในการรวมไฟล์ดังกล่าวและสร้างเป็นไฟล์ PDF ตัวใหม่

        public static void CombineMultiplePDFs(string[] fileNames, string outFile)
        {
            // ขั้นที่ 1: สร้าง document ที่จะรวมไฟล์ทั้งหมดขึ้นมา
            Document document = new Document();
            // สร้าง FileStream object ที่จะใช้งานและต้องอย่าลืม dispose เมื่อใช้งานเรียบร้อยแล้ว
            using (FileStream newFileStream = new FileStream(outFile, FileMode.Create))
            {
                // ขั้นที่ 2: สร้างตัว
                PdfCopy writer = new PdfCopy(document, newFileStream);
                if (writer == null)
                {
                    return;
                }
    
                //ขั้นที่ 3:เปิดการใช้งานตัว document
                document.Open();
    
              // วนเพื่ออ่านค่าชื่อไฟล์ และทำการเพิ่มข้อมูลลงในเอกสารตัวใหม่ที่จะรวมไฟล์ทั้งหมด
    
               foreach (string fileName in fileNames)
                {
                    // สร้างตัว reader จากเอกสารแนบที่กำลังวน
                    PdfReader reader = new PdfReader(fileName);
                    reader.ConsolidateNamedDestinations();
    
                    // ขั้นที่ 4: ทำการเพิ่มหน้าข้อมูลจาก reader ให้กับตัว writer ทีละหน้า
                    for (int i = 1; i <= reader.NumberOfPages; i++)
                    {
                        PdfImportedPage page = writer.GetImportedPage(reader, i);
                        writer.AddPage(page);
                    }
    
                    PRAcroForm form = reader.AcroForm;
                    if (form != null)
                    {
                        writer.CopyAcroForm(reader);
                    }
    
                    reader.Close();
                }
    
                // ขั้นที่ 5: ปิดการทำงาน document และ writer
                writer.Close();
                document.Close();
            } 
        }
    

    3.เขียนเมธอดในแปลงไฟล์รูปภาพให้เป็นไฟล์ PDF

     public static void ConvertImageToPdf(string srcFilename, string dstFilename)
        {
            iTextSharp.text.Rectangle pageSize = null;
    
            using (var srcImage = new Bitmap(srcFilename))
            {
                pageSize = new iTextSharp.text.Rectangle(0, 0, srcImage.Width, srcImage.Height);
            }
            using (var ms = new MemoryStream())
            {
                var document = new iTextSharp.text.Document(pageSize, 0, 0, 0, 0);
                iTextSharp.text.pdf.PdfWriter.GetInstance(document, ms).SetFullCompression();
                document.Open();
                var image = iTextSharp.text.Image.GetInstance(srcFilename);
                document.Add(image);
                document.Close();
    
                File.WriteAllBytes(dstFilename, ms.ToArray());
            }
        }

    4.แสดงผลไฟล์ PDF ที่รวมเรียบร้อยแล้ว ด้วย Literal

            StringBuilder strObj = new StringBuilder();
    
            strObj.Append("<object id=\"pdfContainer\" type=\"application/pdf\"");
            strObj.AppendFormat(" data=\"{0}#toolbar=1&amp;navpanes=0&amp;scrollbar=1\" style=\" z-index:1000; width: 99%;  height: 600px;\">", tmpPath);
            strObj.AppendFormat(" <param name=\"src\" value=\"{0}#toolbar=1&amp;navpanes=0&amp;scrollbar=1\"> ", tmpPath);
            strObj.Append(" </object>");
    
            ltrPDF.Text = strObj.ToString();
    

    หมายเหตุ ในการใช้งานโค้ดข้างต้น มีไลบรารีที่จำเป็นต้องใช้งาน ดังนี้ค่ะ

    using System.IO;
    using iTextSharp.text;
    using iTextSharp.text.pdf;
    using System.Data;
    using System.Text;
    using System.Drawing;

    ผลลัพธ์ ตัวอย่างไฟล์ที่ได้จากการรวมไฟล์เอกสาร PDF 3 ไฟล์ และไฟล์รูปภาพ 1 ไฟล์

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

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

    https://stackoverflow.com/questions/6029142/merging-multiple-pdfs-using-itextsharp-in-c-net

    https://alandjackson.wordpress.com/2013/09/27/convert-an-image-to-a-pdf-in-c-using-itextsharp/

  • จะทำอย่างไรให้สามารถดึงข้อมูลมาแสดงผลด้วย Progress bar โดยใช้ .Net (C#)

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

    แบบแถบละสี

    1. ดึงข้อมูลจากฐานข้อมูล และจัดเตรียม Tag Html ที่จะใช้ในการแสดงผล
        private void getData()
        {
            ////////////////////เป็นการสมมุติการดึงข้อมูลมาใส่ Datatable ที่ชื่อว่า dtProgress ซึ่งเป็นจำนวนของผลไม้แต่ละชนิด
    
            StringBuilder strProgress = new StringBuilder();
            DataTable dtProgress = new DataTable();
            dtProgress.Columns.AddRange(new DataColumn[2] { 
                             new DataColumn("Percent", typeof(int)),
                            new DataColumn("Name",typeof(string))});
    
            dtProgress.Rows.Add(25, "Orange");
            dtProgress.Rows.Add(56, "Grape");
            dtProgress.Rows.Add(45, "Mango");
            dtProgress.Rows.Add(100, "Banana");
          
          ////////////////////เป็นการวนลูปค่าเพื่อสร้างแท็ก html ในการแสดงผลแถบ Progress bar
             int i = 0;
             for ( i = 0; i <= dtProgress.Rows.Count -1; i++) 
             {
             
         ////////////////////เป็นการแสดงชื่อผลไม้แต่ละชนิดบนแถบ Progress bar
                strProgress.Append("<h3 class=\"progress-title\">" + dtProgress.Rows[i]["Name"] + "</h3>");
                strProgress.Append("<div class=\"progress-outer\">");
                strProgress.Append("<div class=\"progress\">");
    
         ////////////////////เป็นการแสดงกำหนดขนาดให้กับแถบสี Progress bar ตามข้อมูล % ในแถวที่วน และมีการ ดึงค่าสไตล์ชีทจากการเรียกใช้ฟังก์ชั่น getCss()
    
    ตามเงื่อนไขของจำนวน % ด้วย
                strProgress.Append("<div class=\"progress-bar progress-bar-striped " + getCss(int.Parse(dtProgress.Rows[i]["Percent"].ToString())) + " \" style=\"width:" + dtProgress.Rows[i]["Percent"] + "%;\"></div>");
    
    
         ////////////////////แสดงจำนวน % ของแต่ละแถบ Progress bar
    
                strProgress.Append("<div class=\"progress-value\"><span>" + dtProgress.Rows[i]["Percent"] + "</span>%</div>");
                strProgress.Append("</div></div>");
             }
    
         ////////////////////นำค่า Tag Html ที่เตรียมไว้ มาแสดงผลด้วย Literal
    
             ltrProgressBar.Text = strProgress.ToString();
    
        }

    2. เมธอดในการแปลงค่าสไตล์ชีทเพื่อปรับสีตามจำนวนที่ส่งมาเป็นพารามิเตอร์

    private string getCss(int Percent)
        {
            string ReturnResult = "";
    
            if (Percent >= 0 && Percent <= 25) 
            {
                ReturnResult = "progress-bar-danger";
            }
            else if (Percent > 25&& Percent <= 50) 
            {
                ReturnResult = "progress-bar-warning"; 
            }
            else if (Percent > 50 && Percent <= 75)
            {
                ReturnResult = "progress-bar-info";
            }
            else if (Percent > 75 && Percent <= 100)
            {
                ReturnResult = "progress-bar-success";
            }
            return ReturnResult;
        }

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

    • สีแดง ช่วงตั้งแต่ 0 – 25 %
    • สีส้ม ช่วงตั้งแต่ 26 – 50 %
    • สีฟ้า ช่วงตั้งแต่ 51 – 75 %
    • สีเขียว ช่วงตั้งแต่ 76 – 100 %

    ตัวอย่างการเรียกใช้งาน

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

    ผลลัพธ์

    แบบหลายสีในแถบเดียวกัน(แบบที่ 1)

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

    1. ดึงข้อมูลจากฐานข้อมูล และจัดเตรียม Tag Html ที่จะใช้ในการแสดงผล
        private void getMultiFruitColorData()
        {
            StringBuilder strProgress = new StringBuilder();
            DataTable dtProgress = new DataTable();
            dtProgress.Columns.AddRange(new DataColumn[2] { 
                             new DataColumn("Percent", typeof(int)),
                            new DataColumn("Name",typeof(string))});
            dtProgress.Rows.Add(25, "Orange");
            dtProgress.Rows.Add(12, "Grape");
            dtProgress.Rows.Add(7, "Mango");
            dtProgress.Rows.Add(25, "Banana");
    
            int i = 0;
            int percent = 0;
            string CssStr = "";
            int Total = 0;
            
                strProgress.Append("<h3 class=\"progress-title\">Multiple-fruits</h3>");
                strProgress.Append("<div class=\"progress-outer\">");
                strProgress.Append("<div class=\"progress\">");
            for (i = 0; i <= dtProgress.Rows.Count - 1; i++)
            {
                percent = int.Parse(dtProgress.Rows[i]["Percent"].ToString());
    
    
    ////////////////////คำนวณผลรวม % ของผลไม้ทุกชนิดตามการวนรอบที่จะแสดงในแถบ Progress bar
    
                Total += percent;
                switch (i) 
                {
                    case 0: CssStr = "progress-bar-danger"; break;
                    case 1: CssStr = "progress-bar-warning"; break;
                    case 2: CssStr = "progress-bar-info"; break;
                    case 3: CssStr = "progress-bar-success"; break;
                }
    
    ////////////////////เป็นการแสงค่า % ของผลไม้แต่ละชนิดในแถบ Progress bar เดียวกัน โดยแสดงชื่อผลไม้ และจำนวน % ของผลไม้แต่ละชนิดด้วย
    
                strProgress.Append("<div class=\"progress-bar progress-bar-striped " + CssStr + "\" style=\"width:" + percent + "%;\">" + dtProgress.Rows[i]["Name"] + "(" + percent + "%)</div>");
               
            }  
    
     ////////////////////เป็นการแสงผลรวม % ของผลไม้ทุกชนิดในแถบ Progress bar
    
            strProgress.Append("<div class=\"progress-value\"><span>" + Total + "</span>%</div></div>");
            strProgress.Append("</div></div>");
    
            ltrProgressBar.Text = strProgress.ToString();
    
        }
    

              จากโค้ดตัวอย่างข้างต้น จะเห็นว่าการสร้างแท็ก Html จะแตกต่างจากแบบแรก คือจะมีการสร้างใน <div class=\”progress\”> เดียวกัน ซึ่งมีหลักการคล้ายกับการสร้าง Progress bar อย่างง่ายหลายสีในแถบเดียวกันที่เคยกล่าวไว้แล้วในบทความก่อนหน้านั่นเอง

    ผลลัพธ์

    แบบหลายสีในแถบเดียวกันและแสดงหลายแถบ Progress Bar(แบบที่ 2)

              ในตัวอย่างนี้ เป็นการแสดงผลแถบสีแยกตามช่วงของข้อมูลบน Progress bar แต่ละแถบ โดยการแสดงผลจะแบ่งสีตามปริมาณข้อมูลในแต่ละช่วง ดังนี้

    สีแดง ช่วงตั้งแต่ 0 – 25 % สีส้ม ช่วงตั้งแต่ 26 – 50 % สีฟ้า ช่วงตั้งแต่ 51 – 75 % สีเขียว ช่วงตั้งแต่ 76 – 100 %

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

    1. ดึงข้อมูลจากฐานข้อมูล และจัดเตรียม Tag Html ที่จะใช้ในการแสดงผล
        private void getMultiColorData()
        {
            StringBuilder strProgress = new StringBuilder();
            DataTable dtProgress = new DataTable();
            dtProgress.Columns.AddRange(new DataColumn[2] { 
                             new DataColumn("Percent", typeof(int)),
                            new DataColumn("Name",typeof(string))});
    
            dtProgress.Rows.Add(25, "Orange");
            dtProgress.Rows.Add(56, "Grape");
            dtProgress.Rows.Add(45, "Mango");
            dtProgress.Rows.Add(100, "Banana");
    
            int i = 0;
            int j = 0;
            int maxRange = 0;
            int percent = 0;
            for (i = 0; i <= dtProgress.Rows.Count - 1; i++)
            {
                percent= int.Parse(dtProgress.Rows[i]["Percent"].ToString());
    
    
    ////////////////////วนเพื่อสร้าง Progress bar ใหม่ในผลไม้แต่ละชนิด
    
                strProgress.Append("<h3 class=\"progress-title\">" + dtProgress.Rows[i]["Name"] + "</h3>");
                strProgress.Append("<div class=\"progress-outer\">");
                strProgress.Append("<div class=\"progress\">");
                maxRange = 0;
    
    ////////////////////คำนวณหาว่าค่าของ % ตกอยู่ในช่วงใด 1-4(เนื่องจากแบ่งออกเป็นช่วงละ 25 % และรวมเป็น 100%)
    
    
                if (percent >= 0 && percent <= 25)
                {
                    maxRange = 1;
                }
                else if (percent > 25 && percent <= 50)
                {
                    maxRange = 2;
                }
                else if (percent > 50 && percent <= 75)
                {
                    maxRange = 3;
                }
                else if (percent > 75 && percent <= 100)
                {
                    maxRange = 4;
                }
    
    ////////////////////วนลูปเพื่อแสดงผลสีในแต่ละช่วงบน Progress bar โดยมีการเรียกใช้งานเมธอด getCssRange()
    
                for (j = 1; j <= maxRange; j++)
                {
                    strProgress.Append(getCssRange(percent, j, maxRange));
                 }
                strProgress.Append("<div class=\"progress-value\"><span>" + dtProgress.Rows[i]["Percent"] + "</span>%</div></div>");
                strProgress.Append("</div></div>");
            }
    
            ltrProgressBar.Text = strProgress.ToString();
    
        }

    2. สร้างเมธอดที่ใช้ในการสร้างแท็ก Html ในการแสดงผลแถบสี ซึ่งในส่วนของกระบวนการคำนวณแถบสีจะไม่ขอลงในรายละเอียด แต่แสดงไว้ให้เห็นภาพการทำงานหลักๆเท่านั้น ดังนี้ค่ะ

        private string getCssRange(int Percent,int Range,int MaxRange)
        {
            string ReturnResult = "";
    
            switch (Range)
            {
                case 1:
                    if (MaxRange > Range)
                        ReturnResult = "<div class=\"progress-bar progress-bar-striped progress-bar-danger\" style=\"width:25%;\"></div>";
    
                    else 
                    {
                        Percent = Percent >= 25 ? 25 : Percent - (25 * (Range - 1));
                    ReturnResult = "<div class=\"progress-bar progress-bar-striped progress-bar-danger\" style=\"width:" + Percent + "%;\"></div>";
                    }
                    break;
                case 2:
                    if (MaxRange > Range)
                        ReturnResult = "<div class=\"progress-bar progress-bar-striped progress-bar-warning\" style=\"width:25%;\"></div>";
    
                    else
                    {
                        Percent = Percent >= 50 ? 50 : Percent - (25 * (Range - 1));
                        ReturnResult = "<div class=\"progress-bar progress-bar-striped progress-bar-warning\" style=\"width:" + Percent + "%;\"></div>";
                    }
                   
                    break;
    
                case 3:
                    if (MaxRange > Range)
                        ReturnResult = "<div class=\"progress-bar progress-bar-striped progress-bar-info\" style=\"width:25%;\"></div>";
    
                    else
                    {
                        Percent = Percent >= 75 ? 75 : Percent- (25* (Range-1));
                        ReturnResult = "<div class=\"progress-bar progress-bar-striped progress-bar-info\" style=\"width:" + Percent + "%;\"></div>";
                    }
                     break;
    
                case 4:
    
                     if (Percent==100)
                         ReturnResult = "<div class=\"progress-bar progress-bar-striped progress-bar-success\" style=\"width:25%;\"></div>";
                     else
                     {
                         Percent =   Percent - (25 * (Range - 1));
                         ReturnResult = "<div class=\"progress-bar progress-bar-striped progress-bar-success \" style=\"width:" + Percent + "%;\"></div>";
                     }
                      break;
    
            }
             return ReturnResult;
        }
    

    ผลลัพธ์

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

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

    แหล่งข้อมูลอ้างอิง :

    https://bestjquery.com/tutorial/progress-bar/demo78/

    https://www.jquery-az.com/boots/demo.php?ex=51.0_5

  • มาทำความรู้จักกับพื้นฐานการใช้งาน “TreeView” สำหรับมือใหม่กันดีกว่า

              เชื่อว่านักพัฒนาโปรแกรม Web application ด้วย .Net หลายๆท่านอาจจะเคยได้ยินชื่อของเจ้า “TreeView” กันมาบ้างแล้ว หรือบางท่านก็อาจจะเกือบลืมเจ้าเครื่องมือตัวนี้ไปแล้วก็ตามเพราะมันอาจจะไม่ใช่เครื่องมือที่ถูกหยิบมาใช้บ่อยนัก ในบทความนี้ผู้เขียนจึงขอหยิบยกเจ้า “TreeView” มาปัดฝุ่น แนะนำลูกเล่นการใช้งาน การกำหนดคุณสมบัติต่างๆ และวิธีการใช้งานกันอย่างคร่าวๆก่อน เพื่อเป็นการปูพื้นฐานให้กับมือใหม่หัดใช้ TreeView และรื้อความทรงจำให้กับผู้ที่เคยใช้ TreeView มาก่อนหน้านี้ เผื่อความสามารถที่ซ่อนอยู่จะไปเตะตาตรงใจท่านใดที่กำลังมองหาการทำงานแบบนี้อยู่พอดี จนอยากนำเครื่องมือตัวนี้ไปประยุกต์ใช้เป็นอีกหนึ่งทางเลือกในการแสดงผลข้อมูลในงานพัฒนาของท่านกันอีกครั้งได้ค่ะ
              แต่ก่อนจะพูดถึงลูกเล่นการทำงานของ TreeView คงต้องเกริ่นนำกันก่อนว่าเจ้าเครื่องมือตัวนี้ถูกจัดอยู่ในจำพวก Navigation Control ซึ่งบางคนอาจเกิดคำถามว่า ข้อมูลแบบใดบ้างจึงจะเหมาะนำมาใช้งานแสดงผลกับเจ้า TreeView นี้ ซึ่งโดยความเห็นส่วนตัวแล้วนั้น ผู้เขียนคิดว่าข้อมูลที่เหมาะจะมาแสดงผลด้วย TreeView ควรจะเป็นข้อมูลที่มีลักษณะเป็นแบบ Hierarchy หรือเป็นลักษณะโครงสร้าง มีลักษณะข้อมูลเป็นลำดับชั้นย่อยๆ เช่น โครงสร้างหน่วยงาน โครงสร้างองค์กร หรือข้อมูลที่เป็นประเภทหลักและประเภทย่อย เป็นต้น และเพื่อไม่ให้เป็นการเสียเวลา เรามาเรียนรู้วิธีจัดการกับ TreeView ของเรากันเลยดีกว่าค่ะ

    ขั้นตอนสร้าง TreeView อย่างง่ายจาก Tool box ของ Visual studio .Net สามารถทำได้ดังนี้

    1. สร้าง TreeView โดยเลือกจากแท็บเครื่องมือ ในกลุ่ม Navigation มาวางในหน้าจอ design ของเรา ดังรูป


    2. การเพิ่มและจัดการ node ให้กับ TreeView ได้โดยการคลิกเลือก “Edit Nodes…” ดังภาพ


    3. การจัดการเพิ่ม-ลดข้อมูล node ในระดับต่างๆ จะแสดงภาพดังหน้าจอต่อไปนี้ เพื่อใช้ในการจัดการเพิ่ม-ลดข้อมูล node ในระดับต่างๆ ดังนี้



      โดยขั้นตอนการเพิ่ม – ลด node อย่างคร่าวๆ มีดังนี้
      • การเพิ่ม node ที่เป็น root (ลำดับแรกสุด) โดยการกดปุ่ม
      • การเพิ่ม node ระดับย่อย(child node) โดยการกดปุ่ม
      • การลบ node ที่ไม่ต้องการ สามารถทำได้โดยการกดปุ่ม
      • ปรับเปลี่ยนระดับความลึกของ node โดยคลิกเลือก node ที่ต้องการจัดการและกดปุ่ม เพื่อเลื่อนระดับความลึกมากน้อยได้ตามต้องการ ซึ่งจะเห็นได้ว่ามีการทำงานคล้ายกับการเยื้องย่อหน้าใน MS Word ที่เราคุ้นเคยกันดี
      • การเลื่อนลำดับบน-ล่างให้กับ node สามารถทำได้โดยกดปุ่ม

        ตัวอย่าง หน้าจอการจัดการ node ใน TreeView



                      จากภาพตัวอย่าง มีการเพิ่มและจัดการ node ข้อมูลโครงสร้างองค์กรตั้งแต่ระดับมหาวิทยาลัย วิทยาเขต และคณะ โดยการกำหนดค่าตายตัวจากหน้าจอ design ด้วยการระบุเอง ไม่ได้ดึงจากฐานข้อมูล ซึ่งท่านสามารถทดลองเพิ่มและจัดการได้ด้วยตัวเองเพื่อให้เข้าใจการทำงานมากขึ้น โดยลองทำตามขั้นตอนการจัดการ node ข้างต้น
                      นอกจากการเพิ่ม-ลด node แล้ว ท่านยังสามารถกำหนดคุณสมบัติให้กับ node ได้ด้วย โดยคลิกข้อมูล node ที่ต้องการจัดการจากฝั่งซ้ายมือ และกำหนดคุณสมบัติของ node ดังกล่าวในฝั่งขวามือ ซึ่งรายละเอียดการกำหนดคุณสมบัติต่างๆ ในแต่ละ node จะขอพูดในหัวข้อถัดไป (ข้อ 4.)ค่ะ

    4. กำหนดคุณสมบัติให้กับแต่ละ node เราสามารถกำหนดคุณสมบัติ (Properties) เฉพาะให้กับแต่ละ node ได้ โดยจะขอพูดถึงคร่าวๆ ที่คิดว่าน่าจะใช้อยู่บ่อยๆและน่าสนใจ ดังนี้
      • ShowCheckBox : เป็นการระบุว่าจะให้ node ดังกล่าวแสดงช่องให้เลือกหรือไม่
      • Checked : เป็นการระบุว่า ต้องการให้มีการทำเครื่องหมายถูกไว้ในกล่อง check box หรือไม่ ซึ่งต้องมีการกำหนดควบคู่กับ ShowCheckBox = “true” นั่นเอง
      • Text : ระบุว่าต้องการให้ node ดังกล่าวแสดงข้อความอะไร
      • Value : ระบุค่าที่จะกำหนดให้กับ node ดังกล่าว และสามารถเลือกดึงค่าไปใช้งานได้(ในกรณีที่จะนำไปพัฒนาโปรแกรมต่อ)
      • NavigateUrl : กำหนดว่าเมื่อกด node ดังกล่าวจะให้ไปยังหน้าจอใด โดยระบุชื่อเพจหน้าจอนั้น
      • Target : เป็นการระบุการเปิดเพจในกรณีที่มีการกำหนด NavigateUrl ไว้ว่าจะให้เปิดเพจใหม่ หรืออยู่ในหน้าเดิมนั่นเอง
      • ImageUrl : เป็นการระบุว่าต้องการให้แสดงเป็นรูปภาพอะไรหน้าข้อความใน node นั้นๆ
      • Selected : เป็นการระบุว่าจะให้ node ดังกล่าวสามารถคลิกลิงค์ได้หรือไม่
      • SelectAction : กำหนด action ที่จะให้ทำตอนกดเลือกลิงค์ใน node นั้น
        1) Expand : เมื่อหากต้องการให้คลิกแล้วขยาย node ย่อย ซึ่งเมื่อคลิกแล้วจะย่อ-ขยาย node ย่อยได้
        2) SelectExpand : จะเป็นการระบุให้มีการขยาย node เช่นกัน แต่จะต่างกันตรงที่เมื่อขยาย node ย่อยแล้วจะไม่ย่อ-ขยายให้อีกแบบ Expand นั่นหมายถึงว่าจะสามารถคลิกลิงค์ของ node เพื่อขยายได้เท่านั้น แต่จะไม่สามารถย่อกลับมาได้นั่นเอง
        3) None : เมื่อไม่ต้องการให้คลิกได้
      • ToolTip : เป็นการระบุข้อความที่ต้องการให้แสดงเมื่อชี้ไปที่ node นั้นๆ
      • Expanded : เป็นการกำหนดว่า ตอนเริ่มต้นจะให้ node ย่อยของ node ดังกล่าวขยายไว้หรือไม่

        ตัวอย่าง ผลลัพธ์จากการกำหนดลองกำหนดค่าต่างๆให้กับบาง node


                      จากภาพ จะเห็นว่าแต่ละ node มีการแสดงผลแตกต่างกันตามที่เราระบุ เช่น บาง node มีการกำหนดให้แสดงภาพหน้าข้อความ บาง node ไม่สามารถคลิกลิงค์ได้ เช่น มหาวิทยาลัยสงขลานครินทร์ และบาง node มี check box อยู่หน้าข้อความให้เลือก และบาง node มีการยุบ node ย่อยไม่แสดงในตอนเริ่มต้น เป็นต้น
    5. กำหนดคุณสมบัติให้กับทุก node จาก properties ของคอนโทรล TreeView ซึ่งจะแตกต่างจากการกำหนดในแต่ละ node ในข้อ 4. เนื่องจากวิธีการกำหนดคุณสมบัติแบบนี้ จะเหมาะกับกรณีที่ไม่ต้องการระบุคุณสมบัติแยกในแต่ละ node แต่ต้องการให้เป็นไปในแบบเดียวกันทั้ง TreeView ทำให้ลดระยะเวลาที่จะต้องกำหนดรูปแบบให้กับทุก node ที่ต้องการให้แสดงผลเหมือนกัน โดยจะขอยกตัวอย่างให้กับคุณสมบัติบางตัวที่อาจจะจำเป็นต้องใช้ ดังนี้
      • ShowCheckBox : เป็นการกำหนดคุณสมบัติคล้ายกับที่กำหนดให้กับแต่ละ node แต่หากมากำหนดที่ตรงนี้ จะทำให้ทุก node แสดงหรือซ่อนกล่อง check box ได้จากจุดเดียว โดยมีให้เลือก 4 ตัวเลือก ดังนี้

        1) All : กำหนดให้ทุก node แสดง check box

        ตัวอย่าง ผลลัพธ์จากการกำหนด ShowCheckBox =”All”


        จากภาพจะเห็นว่า มี check box อยู่ในแต่ละ node ทั้งหมด โดยการกำหนดที่คุณสมบัติ ShowCheckBox =”All” นี้ที่จุดเดียว โดยไม่ต้องไปกำหนดที่แต่ละ node

        2) Leaf : กำหนดให้แสดง check box เฉพาะ node ลูกที่ไม่มี node ย่อย

        ตัวอย่าง ผลลัพธ์จากการกำหนด ShowCheckBox =”Leaf”


        จากภาพจะเห็นว่า จะแสดงผล check box เฉพาะ node ที่เป็นลูก และไม่มี node ย่อยอีก ซึ่งเรียก node แบบนี้ว่า “Leaf” นั่นเอง

        3) None : ไม่แสดง Checkbox ใน node ใดๆ เลย

        ตัวอย่าง ผลลัพธ์จากการกำหนด ShowCheckBox =”None”


        จากภาพจะเห็นว่า ไม่แสดงผล check box ใน node ใดๆเลย

        4) Parent : เป็นการแสดง check box เฉพาะตำแหน่ง node ที่มีลูก หรือ child node ที่ไม่ใช่ root node นั่นเอง

        ตัวอย่าง ผลลัพธ์จากการกำหนด ShowCheckBox =”Parent”


        จากภาพจะเห็นว่า จะแสดง check box เฉพาะ node ที่มีลูกในระดับย่อย และต้องไม่ใช่ root node นั่นเอง

        5) Root : จะแสดง check box เฉพาะตำแหน่ง root หรือ node ระดับแรกสุดเท่านั้น

        ตัวอย่าง ผลลัพธ์จากการกำหนด ShowCheckBox =”Root”

        จากภาพจะเห็นว่า จะแสดงผล check box ใน node ที่อยู่ในระดับ root หรือระดับแรกสุดนั่นเอง

      • ShowExpandCollapse : เป็นการระบุว่าต้องการให้แสดงตัวย่อ-ขยาย ที่เป็นเครื่องหมาย + และ – เพื่อย่อขยาย TreeView หรือไม่ หากกำหนดเป็น false จะไม่สามารถย่อ-ขยาย TreeView ดังกล่าวได้ โดยค่าตั้งต้นจะเป็น true ซึ่งหมายถึงสามารถย่อ-ขยายได้นั่นเอง

        ตัวอย่าง การกำหนดคุณสมบัติ ShowExpandCollapse =”false”

        จากภาพจะเห็นว่า ไม่สามารถย่อ-ขยายข้อมูลของ TreeView แต่ละ node ได้เลย

      • BorderStyle : เป็นการกำหนดรูปแบบของเส้นขอบของ TreeView ที่เราต้องการได้ เช่น solid dashed dotted เป็นต้น

        ตัวอย่าง การกำหนดคุณสมบัติของเส้นขอบ BorderStyle เป็น Double


      • CollapseImageUrl : เป็นการระบุ url ภาพที่ต้องการนำมาใช้แสดงแทนเครื่องหมาย – เพื่อให้กดแล้วย่อ node ย่อย
      • ExpandImageUrl : เป็นการระบุ url ภาพที่ต้องการนำมาใช้แสดงแทนเครื่องหมาย + เพื่อให้กดแล้วขยาย node ย่อย
      • NoExpandImageUrl : เป็นการระบุ url ภาพที่ต้องการนำมาใช้แสดงในกรณีที่ node ดังกล่าวไม่มี node ย่อย

        ตัวอย่าง ผลลัพธ์ของการระบุค่าของ CollapseImageUrl ให้เป็นรูปเครื่องหมายลบ กำหนดค่า ExpandImageUrl ให้เป็น url ของรูปที่เป็นเครื่องหมายบวก และกำหนด NoExpandImageUrl เป็นรูปไอคอนสีฟ้า ดังรูป

        หมายเหตุ : รูปภาพที่กำหนดในการย่อ-ขยายจะแสดงผลเมื่อ ShowLines เป็น false เท่านั้น

      • ImageSet : เป็นการกำหนดภาพที่ต้องการให้แสดงหน้า node ลักษณะคล้ายกับ bullet ดังตัวอย่างในภาพ



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



        เมื่อเราคลิกเลือก “Auto Format…” จะปรากฎภาพหน้าจอดังนี้



        ซึ่งจะเห็นได้ว่า มีลักษณะการจัดการเดียวกับตอนเรากำหนดคุณสมบัติจาก ImageSet นั่นเอง

      • การกำหนด style ให้กับ node แต่ละแบบ ไม่ว่าจะเป็น LeafNodeStyle NodeStyle ParentNodeStyle หรือ RootNodeStyle ท่านก็สามารถกำหนดรูปแบบและตกแต่งความสวยงามให้กับ node แต่ละแบบได้ เช่น การใส่พื้นหลัง สีตัวอักษร หรือ แม้กระทั่งการระบุ style sheet ที่จัดทำไว้ก็สามารถทำได้เช่นกัน

      • LevelStyles : เป็นการกำหนด Style ให้กับแต่ละ level โดยจะเรียงตามลำดับ style ของแต่ละ node เริ่มจาก root ตามลำดับ ดังภาพ



        ตัวอย่าง ผลลัพธ์ของการกำหนด LevelStyles 3 ระดับข้างต้น โดยกำหนดให้ Level แรก มีสีตัวอักษรเป็นสีม่วง และ Level ที่ 2 มีสีตัวอักษรเป็นสีชมพู และ Level ที่ 3 มีตัวอักษรสีเขียว ดังภาพ



      • ExpandDepth : เป็นการกำหนดว่าจะให้การแสดงผล TreeView ขยายเริ่มต้นที่กี่ระดับ โดยค่าตั้งต้นจะเป็นแบบ FullyExpand ซึ่งหมายถึงขยายทั้งหมดตอนเริ่มต้น

        ตัวอย่าง ผลลัพธ์การระบุ ExpandDepth = “1”

      • DataSourceID : เป็นการระบุแหล่งข้อมูลให้กับการแสดงผล TreeView ให้มาจากการดึงข้อมูล ไม่ใช่การระบุค่า node ตายตัวจากหน้าเพจ
      • NodeIndent : ระยะการเยื้องหน้าของ node แต่ละระดับ โดยมีค่าตั้งต้นเท่ากับ 20 ซึ่งท่านสามารถลดหรือเพิ่มได้ตามความเหมาะสม
      • ShowLines : เป็นการระบุว่าต้องการให้แสดงเส้นโยงเชื่อมของ node แต่ละระดับหรือไม่
      • SelectedNodeStyle : เป็นการกำหนด style ให้กับ node ที่โดนเลือกคลิก เช่น การระบุพื้นหลัง หรือการกำหนดสีตัวอักษร เป็นต้น
        ตัวอย่าง ผลลัพธ์การระบุ SelectedNodeStyle ให้พื้นหลังเป็นสีม่วงและตัวอักษรสีขาว โดยเมื่อคลิกที่ node ใดก็ตามก็จะแสดงผลดังที่ได้ระบุไว้ที่ node นั้น

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

  • Refresh ข้อมูลในกรณีที่ฐานข้อมูลมีการอัพเดทใน LINQ และ Entity Framework (Refresh Query in LINQ)

    จากปัญหาที่เคยเจอในกรณีที่ฐานข้อมูลมีการอัพเดทไปแล้ว พอ Select ข้อมูลออกมาข้อมูลไม่ refresh ในกรณีนี้จะยกตัวอย่างการใช้งานฟังก์ชัน reload ของ System.Data.Entity.Infrastructure

    public class DbEntityEntry where TEntity : class

    // Summary:
    // Reloads the entity from the database overwriting any property values with values
    // from the database. The entity will be in the Unchanged state after calling this
    // method.
    public void Reload();

    โดยการใช้งานนั้นจะยกตัวอย่างตามโค้ดด้านล่าง

    ProjectEntities pe = new ProjectEntities();

    var project = pe.PROJECT.Where(w => w.ID == projectID && w.YEAR == year).FirstOrDefault();

    if (project != null)

    {
    pe.Entry(project).Reload();

    }

    หวังว่าคงจะได้ช่วยโปรแกรมเมอร์ทีมีปัญหาเรื่องการ refresh ข้อมูลผ่าน LINQ และ Entity Framework

  • การสร้างเงื่อนไขแบบหลายตัวแปรในการค้นหาข้อมูลผ่าน LINQ (Multiple Search In LINQ)

    การสร้างเงื่อนไขแบบหลายตัวแปรในการค้นหาข้อมูลผ่าน Linq เพื่อให้เห็นภาพชัดเจน จะยกตัวอย่างโดย กำหนดเงื่อนไข 3 ตัวแปร ดังนี้

    • ตัวแปร “ชื่อ/นามสกุล/เลขประจำตัวประชาชน”
      โดยใช้ control TextBox ที่ชื่อ ID=”txtSearch”
    • ตัวแปร “โครงการรับ” โดยใช้ control DropDownList ที่ชื่อ ID=”ddProject”
    • ตัวแปร “สถานะการตรวจเอกสาร”
      โดยใช้ control DropDownList ที่ชื่อ ID=”ddStatus”

    จากนั้นเราสร้าง Entity ยกตัวอย่างเป็น UploadEntities ซึ่งในที่นี้ สร้าง DbSet ที่เชื่อมต่อฝั่งฐานข้อมูลยกตัวอย่างเป็น V_REGISTRATION_UPLOAD ผ่าน Entity Framework 4.5 จากนั้นใช้ LINQ ในการเขียนเงื่อนไข ยกตัวอย่างตามโค้ดด้านล่าง

    project = ddProject.SelectedValue;

    status = ddStatus.SelectedValue;

    search = txtSearch.Text.Trim();

    outList = ue.V_REGISTRATION_UPLOAD

    .Where(w => (w.STUD_FNAME.Contains(search) || w.STUD_LNAME.Contains(search) || w.CITIZEN_ID.Contains(search)) || string.IsNullOrEmpty(search))

    .Where(x => x.PROJECT_ID == project || string.IsNullOrEmpty(project))

    .Where(y => y.APPROVED_STATUS == status || string.IsNullOrEmpty(status)) .ToList();

    gvUploadedList.DataSource = outList;

    gvUploadedList.DataBind();

    แสดงการใช้งานฟังก์ชัน Where ของ LINQ ในส่วนของ code behide
    ผลลัพธ์ที่ได้จากการเรียกใช้เงื่อนไขฟังก์ชัน Where ของ LINQ

    สรุปได้ว่าการนำฟังก์ชัน Where ของ LINQ มาใช้งานนั้น ทำให้โปรแกรมเมอร์สะดวกและลดการเขียนโค้ดให้ง่ายขึ้นจากเมื่อก่อนที่ต้องตรวจสอบเงื่อนไขเป็นแบบทีละเงื่อนไข