Loading Progress with NProgress

วันนี้จะมาแนะนำวิธีการทำ Loading ด้วย NProgress นะครับ หลายคนอาจจะยังไม่ภาพไม่ออกว่า NProgress นี่ทำ Loading แล้วจะมีหน้าตาออกมาเป็นแบบไหน ให้ไปลองดูที่ Youtube นะครับเมื่อเราเข้ามาแล้วจะมี Loading เล็กวิ่งอยู่ด้านบนสุด

ซึ่งเราสามารถนำ NProgress นี่เข้ามาใช้งานบนเว็บไซต์ของเราได้ไม่ยาก โดยสามารถทำได้ ดังนี้ครับ

เข้าไปที่ http://ricostacruz.com/nprogress/ เพื่อดาวน์โหลด nprogress.css และ nprogress.js มาไว้ใน Solution ในตัวอย่างนี้ผมขอใช้ผ่าน CDN ดังนี้ครับ

<link href="http://ricostacruz.com/nprogress/nprogress.css"

    rel="stylesheet" type="text/css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"

    type="text/javascript"></script>

<script src="http://ricostacruz.com/nprogress/nprogress.js"

    type="text/javascript"></script>

เท่านี้เราก็ติดตั้ง NProgress เสร็จเรียบร้อยแล้วครับ ต่อมาจะเริ่มใช้งานกันนะครับ โดยมี 2 คำสั่งที่จำเป็นในการใช้งาน คือ NProgress.start(); เพื่อใช้สำหรับสั่งให้ Progress Bar เริ่มทำงาน และ NProgress.done(); เพื่อใช้สำหรับสั่งให้ Progress Bar สิ้นสุดการทำงาน

เริ่มทดสอบการทำงานโดยใช้ Code นี้นะครับ

<script>

    $(document).ready(function () {

        NProgress.start();

        setTimeout(function () {

            NProgress.done();

            $('.fade').removeClass('out');

        }, 1000);

    });

</script>

หลังจากลอง Run แล้วจะมี Loading แสดงขึ้นมา เท่านี้ก็เสร็จแล้วครับกับการใช้ NProgress สำหรับทำ Loading

Split String ด้วย LINQ

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

สมมติว่าผมมีข้อมูล String ในรูปแบบนี้ "00001_CompanyA_5000,00002_CompanyB_2000,00003_CompanyC_7000" โดยใน string นี้จะประกอบด้วย CompanyID , CompanyName , Price ซึ่งมี '_' เป็นตัวคั่น และข้อมูลแต่ละชุดมี ',' เป็นตัวคั่น โดยทั่วไปอาจจะทำได้โดยการวน Loop แล้ว Split String เก็บที่ละฟิลด์ ก็จะได้ผลลัพธ์ที่ต้องการเหมือนกัน แต่ถ้าใช้ LINQ เราสามารถทำได้โดยใช้ Code ดังนี้

string companydata = "00001_CompanyA_5000,00002_CompanyB_2000,00003_CompanyC_7000";
            var companylist = companydata.Split(',')
                                        .Select(s => s.Split('_'))
                                        .Select(a => new
                                        {
                                            CompanyID = a[0].ToString()
                                            , CompanyName = a[1].ToString()
                                            , Price = a[2].ToString()
                                        });

ที่นึี้ลองมาทดสอบผลการทำงา่นกันนะครับว่าสามารถทำงานได้จริงหรืิเปล่า

จะสังเกตว่าเมื่อใช้ฟังก์ชั่น Split ของ LINQ เราสามารถทำการแยก String ได้โดยใชัคำสั่งเพี้ยงแค่บรรทัดเดียว