บทที่2 แนะนำ asp.net web pages –...
TRANSCRIPT
บทท่ี 2 แนะน ำ ASP.NET Web Pages – พื้นฐำนกำรเขียนค ำสั่ง Razor
บทเรียนนี้จะแนะน ำวิธีกำรเขียนโปรแกรมใน ASP.NET Web Pages ด้วยรูปแบบค ำสั่ง Razor โดยเนื้อหำที่จะได้เรียนรู้ในบทนี้ได้แก่
เนื้อหำบทเรียนนี้ พื้นฐำนค ำสั่ง Razor ส ำหรับกำรเขียนโปรแกรม ASP.NET Web Pages พื้นฐำนกำรเขียนโปรแกรมภำษำ C# เฉพำะที่จ ำเป็นในบทเรียนนี้ แนวคิดพื้นฐำนของกำรเขียนโปรแกรม Web Pages วิธีกำรติดตั้งส่วนประกอบซอฟต์แวร์ต่ำงๆที่จ ำเป็นส ำหรับบทเรียนนี้โดยใช้ NuGet วิธีกำรใช้งำน helpers ในกำรช่วยกำรเขียนโปรแกรม
เทคโนโลยีที่ใช้ในบทนี้ NuGet และ package manager Gravatar helper
บทเรียนนี้เน้นในเรื่องของกำรเขียนค ำสั่งที่คุณจ ำเป็นต้องใช้ในกำรเขียนโปรแกรม ASP.NET Web Pages คุณจะได้เรียนรู้เกี่ยวกับค ำสั่ง Razor และกำรเขียนโปรแกรมภำษำ C# ซึ่งในบทเรียนก่อนหน้ำคุณได้ผ่ำนมำบ้ำงแล้ว และในบทเรียนนี้จะลงลึกไปอีกระดับ
เรำคำดว่ำบทเรียนนี้จะครอบคลุมเนื้อหำที่จ ำเป็นส ำหรับกำรเขียนโปรแกรมตั้งแต่ต้นจนจบส ำหรับบทเรียนชุดนี้ทุกบท และบทนี้เป็นเพียงบทเดียวท่ีจะแนะน ำคุณเกี่ยวกับเรื่องกำรเขียนโปรแกรมหลังจำกนั้นในบทอื่นๆจะเน้นในเรื่องที่น่ำสนใจในบทนั้นๆแทน
ในบทนี้คุณยังจะได้เรียนรู้เกี่ยวกับ helper ซึ่งเป็นส่วนประกอบหนึ่งที่เป็นกลุ่มของค ำสั่งที่มีประโยชน์เรำสำมำรถน ำมำเรียกใช้ได้ในภำยหลังโดย Razor มี helper ส ำเร็จรูปอยู่ที่จะท ำให้กำรเขียน Web Pages ท ำได้ง่ำยขึ้น
สร้ำงหน้ำ Web Pages เพื่อเรียนรู้กำรเขียนโปรแกรม เปิดโปรแกรม Visual Studio 2013 หำกยังไม่ได้เปิด คุณจะใช้โครงกำรที่ได้สร้ำงไว้แล้วในบทเรียนก่อนหน้ำ กำรเปิดโครงกำรเก่ำท ำได้โดยกำรคลิกท่ีช่ือโครงกำรเก่ำ ในที่น้ีคือ WebPagesMovies ที่ปรำกฏในรำยกำร Recent ในหน้ำต่ำง Start Page
หลังจำกเปิดโครงกำร WebPagesMovies แล้วให้คลิกขวำที่ WebPagesMovies ในหน้ำต่ำง Solution Explorer แล้วเลือกเมนูลอย Add > New Item ในหน้ำต่ำง Add New Item ให้เลือกที่ Visual C# > Web > Razor > Web Page (Razor v3) และในช่อง Name ให้กรอกช่ือไฟล์ว่ำ TestRazor.cshtml แล้วคลิกปุ่ม Add
โปรแกรมจะสร้ำงไฟล์หน้ำเว็บใหม่และแสดงในหน้ำต่ำงเขียนค ำสั่งให้ท ำกำรแทนท่ีค ำสั่งเดิมทั้งหมดด้วยค ำสั่งดังต่อไปนี้
@{ // Working with numbers var a = 4; var b = 5; var theSum = a + b; // Working with characters (strings) var technology = "ASP.NET"; var product = "Web Pages"; // Working with objects var rightNow = DateTime.Now; } <!DOCTYPE html> <html lang="en"> <head> <title>Testing Razor Syntax</title> <meta charset="utf-8" /> <style> body { font-family: Verdana; margin-left: 50px; margin-top: 50px; } div { border: 1px solid black; width: 50%; margin: 1.2em; padding: 1em;
} span.bright { color: red; } </style> </head> <body> <h1>Testing Razor Syntax</h1> <form method="post"> <div> <p>The value of <em>a</em> is @a. The value of <em>b</em> is @b. <p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p> <p>The product of <em>a</em> and <em>b</em> is <strong>@(a * b)</strong>.</p> </div> <div> <p>The technology is @technology, and the product is @product.</p> <p>Together they are <span class="bright">@(technology + " " + product)</span></p> </div> <div> <p>The current date and time is: @rightNow</p> <p>The URL of the current page is<br /><br /><code>@Request.Url</code></p> </div> </form> </body> </html>
ศึกษำค ำสั่งต่ำงๆในหน้ำ TestRazor.cshtml ค ำสั่งเกือบท้ังหมดในหน้ำจอน้ีคือค ำสั่งภำษำ HTML แต่อย่ำงไรก็ดีที่ด้ำนบนสุดมีค ำสั่งดังนี้ปรำกฏอยู่
@{ // Working with numbers var a = 4; var b = 5; var theSum = a + b; // Working with characters (strings) var technology = "ASP.NET"; var product = "Web Pages"; // Working with objects var rightNow = DateTime.Now; }
เมื่อพิจำรณำค ำสั่งเหล่ำนี้คุณจะพบว่ำ
อักขระ @ เป็นกำรบอก ASP.NET ให้รู้ว่ำต่อไปนี้คือชุดค ำสั่งของ Razor ไม่ใช่ HTML และ ASP.NET จะท ำกำรประมวลผลค ำสั่งเหล่ำนี้ในแบบ Razor จนกว่ำจะสิ้นสุดชุดค ำสั่งและประมวลผล HTML ที่เหลือต่อไป (ในที่นี้จะสิ้นสุดและไปประมวลผลค ำสั่ง HTML ที่เขียนไว้ว่ำ <!DOCTYPE> )
ปีกกำเปิดและปิด ( { และ } ) เป็นกำรระบุขอบเขตเริ่มต้นและสิ้นสุดของชุดค ำสั่ง Razor โดยสำมำรถมีได้หลำยบรรทัดภำยในปีกกำเปิดและปิด
อักขระ // สองตัวติดกันหมำยถึงกำรระบุบรรทัดที่เป็นหมำยเหตุ เป็นข้อควำมอธิบำยค ำสั่งที่จะไม่ถูกประมวลผล คุณสำมำรถพิมพ์อะไรในบรรทดันี้ก็ได้เพื่อให้คุณและผู้อื่นเข้ำใจกำรท ำงำนของค ำสั่งที่คุณเขียนได้ในภำยหลัง
แต่ละบรรทัดหรือกำรสิ้นสุดแต่ละค ำสั่งจะต้องปิดท้ำยด้วยอักขระ ; ซึ่งเป็นกฎของภำษำโปรแกรม C# (คล้ำยภำษำ C, C++ และ JAVA) โดยบรรทัดที่เป็นหมำยเหตุ ( // ) ไม่จ ำเป็นต้องสิ้นสุดด้วย ; แต่อย่ำงใด
กรณีข้อมูลแบบสำยอักขระหรือ String (ในที่น้ีคือค ำว่ำ “ASP.NET” และ “Web Pages”) จะต้องอยู่ภำยใน Double quotation คือเปิดด้วย “ และปิดด้วย “ ส ำหรับข้อมูลแบบตัวเลขไม่ต้องอยู่ใน Double quotation
ช่องว่ำงหรือ Whitespace ที่อยู่ภำยนอก Double quotation ไม่มีผลใดๆต่อโปรแกรม และกำรขึ้นบรรทัดใหม่ในกำรระบุข้อมูลแบบ String ก็ไม่มีผล ดังนั้นคุณสำมำรถเขียนข้อมูลแบบ String ได้หลำยบรรทัดโดยจะถือว่ำอยู่ภำยในสำยอักขระเดียวกันตรำบใดที่ยังอยู่ใน Double quotation เดียวกัน
สิ่งส ำคัญคือภำษำโปรแกรมแบบ C# เป็นแบบ Case sensitive หมำยควำมว่ำช่ือต่ำงจะต้องมีกำรใช้อักษรภำษำอังกฤษตัวพิมพ์ใหญ่พิมพ์เลก็ให้ถูกต้อง จำกตัวอย่ำงด้ำนบนจะพบว่ำตัวแปรชื่อ TheSum จะเป็นคนละตัวกับตัวแปรที่อำจจะตั้งช่ือว่ำ theSum หรือ thesum เนื่องจำกใช้ตัวพิมพ์ใหญ่พิมพ์เล็กแตกต่ำงกัน และค ำสั่ง var เป็นค ำสงวน (Keywords) ส ำหรับกำรประกำศตัวแปร แต่ค ำว่ำ Var จะไม่ใช้ค ำสงวน
Object และ property และ method ในตัวอย่ำงค ำสั่งจะมีค ำสั่ง DateTime.Now ในกำรอธิบำยแบบง่ำย DateTime คือ Object โดย Object คือวัตถุที่คุณสำมำรถเขียนโปรแกรมด้วยได้ หน้ำเว็บ กล่องข้อควำม ไฟล์ รูปภำพ web request ข้อควำมอีเมล์ ข้อมูลลูกค้ำ และอื่นๆทั้งหมดนี้ล้วนคือ Object โดย Object สำมำรถมี Property ได้หนึ่งหรือหลำยตัวเพื่ออธิบำยคุณสมบัติต่ำงๆของ Object เช่น กล่องข้อควำม จะมี Text property หรือ requrst object จะมี Url property หรือข้อควำมอีเมล์จะมี From และ To properties และอื่นๆอีกมำกมำย Object จะมี method ที่หมำยถึงกำรกระท ำต่ำงๆที่ Object สำมำรถกระท ำได้ ในเนื้อหำถัดๆไปคุณจะได้เรียนรู้และใช้งำน Object อีกมำกมำย
จำกตัวอย่ำง DateTime เป็น Object ที่ให้คุณเขียนโปรแกรมที่เกี่ยวกับวันและเวลำต่ำงๆได้ และมันมี Now เป็น property ที่จะส่งค่ำวันท่ีและเวลำปัจจุบันของระบบกลับมำให้กับคุณ
กำรเขียนค ำสั่งเพื่อแสดงผลในหน้ำเว็บ ภำยในค ำสั่งตัวอย่ำงตรงส่วนของ body จะมีค ำสั่งดังต่อไปนี้
<div> <p>The value of <em>a</em> is @a. The value of <em>b</em> is @b. <p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p> <p>The product of <em>a</em> and <em>b</em> is <strong>@(a * b)</strong>.</p> </div> <div> <p>The technology is @technology, and the product is @product.</p> <p>Together they are <span class="bright">@(technology + " " + product)</span></p> </div>
<div> <p>The current date and time is: @rightNow</p> <p>The URL of the current page is<br /><br /><code>@Request.Url</code></p> </div>
ในค ำสั่งด้ำนบนบำงจุดจะมีอักขระ @ อยู่ซึ่งหมำยถึงว่ำตรงจุดนั้นไม่ใช่ค ำสั่ง HTML แต่เป็นค ำสั่งของ Razor โดย ASP.NET จะท ำกำรประมวลผลค ำสั่งนั้นๆก่อนและแสดงผลลัพธ์ที่ได้ ณ จุดที่มีอักขระ @ จำกตัวอย่ำงข้ำงบน @a จะท ำกำรแสดงผลข้อมูลที่เก็บในตัวแปรที่ช่ือว่ำ a และ @product จะท ำกำรแสดงผลข้อมูลที่เก็บในตัวแปรที่ช่ือ product เช่นกัน
กำรเขียนค ำสั่ง Razor แทรกระหว่ำงค ำสั่ง HTML ไม่ได้จ ำกัดแค่กำรแสดงผลค่ำข้อมูลในตัวแปร ในบำงจุดของตัวอย่ำงจะเป็นกำรแสดงผลจำกผลลัพธ์ของสมกำรต่ำงๆ เช่น
@(a*b) จะแสดงผลลัพธ์ระหว่ำงกำรเอำข้อมูลในตัวแปร a มำคุณกับข้อมูลในตัวแปร b @(technology + “ “ + product) จะเป็นกำรแสดงผลข้อมูลในตัวแปร technology เช่ือมด้วยช่องว่ำง และเช่ือมด้วยข้อควำม
ในตัวแปร product ส ำหรับเครื่องหมำย + ในที่นี้คือกำรเช่ือมโยง String และจะสำมำรถใช้ในกำรบวกค่ำตัวเลขได้ด้วย ซึ่ง ASP.NET จะดูจำกข้อมูลในตัวแปรและตัดสินใจได้เองว่ำเป็นกำรเชื่อม String หรือเป็นกำรบวกค่ำตัวเลข
@Request.Url จะเป็นกำรแสดงผล Url ปัจจุบันของหน้ำเว็บนี้ท่ีส่งมำจำก Web browser
ชุดค ำสั่งตัวอย่ำงด้ำนบนนี้ยังเป็นกำรแสดงให้เห็นกำรท ำงำนของหน้ำเว็บในลักษณะต่ำงๆ คุณสำมำรถท ำกำรค ำนวณในชุดค ำสั่งบรรทัดบนสุด (ระหว่ำง @{ } ) น ำผลลัพธ์ที่ได้มำใส่ตัวแปรและแสดงผล ณ จุดที่ต้องกำร หรือคุณจะท ำกำรค ำนวณ ณ จุดเดียวกันกับกำรแสดงผลเลยก็ได้ (เขียนต่อจำกอักขระ @) ทั้งหมดนี้ข้ึนอยู่กับควำมต้องกำรของคุณ
ทดสอบกำรท ำงำนค ำสั่งตัวอย่ำง ท ำกำรคลิกขวำท่ีหน้ำต่ำงเขียนค ำสั่ง แล้วเลือกเมนูลอย View in Browser เพื่อแสดงหน้ำเว็บท่ีผ่ำนกำรประมวลผลต่ำงๆเรียบร้อยแล้วดังน้ี
หำกลองดู Source code ที่ Web browser จะพบค ำสั่งดังนี ้
เมื่อดู Source code จะพบว่ำไม่มีค ำสั่ง Razor ซึ่งท่ีเห็นจะมีแค่ผลลัพธ์ที่ได้จำกกำรประมวลผล เมื่อคุณสั่ง Run หน้ำเว็บจะท ำกำร request ไปที่ Web server ที่เครื่องของคุณ เมื่อ IIS Express ได้รับ request ASP.NET จะท ำกำรประมวลผลค ำสั่งทั้งหมดและส่งผลลัพธ์กลับมำที่ Web browser
Razor และ C# ในกำรเขียนค ำสั่งท้ังหมดที่ผ่ำนมำเรำเรียกว่ำกำรเขียนค ำสั่งโปรแกรมแบบ Razor โดยใช้ภำษำโปรแกรมแบบ C# ( คุณสำมำรถเขียน Razor โดยใช้ภำษำอื่นได้อีกคือภำษำ Visual Basic.NET ) โดยภำษำ C# สร้ำงโดย Microsoft และมีกำรใช้งำนมำเป็นเวลำนำนและเป็นภำษำหลักในกำรสร้ำง Windows apps ดังนั้นกฎกำรตั้งช่ือรูปแบบ syntax และ keywords ต่ำงๆจะเป็นกฎของ C# ทั้งหมด
Razor จะถือเป็นชุดค ำสั่งเฉพำะที่ช่วยในกำรแทรกค ำสั่ง C# ลงในเอกสำร HTML ตัวอย่ำงที่ผ่ำนมำคือกำรใช้อักขระ @ และ @{ } เพื่อแทรกค ำสั่งลงในหน้ำเว็บ นอกจำกนั้น Helpers ยังถือเป็นส่วนหนึ่งของ C# โดย Razor นอกจำกจะถูกใช้ในกำรเขียนโปรแกรม ASP.NET Web Pages แล้วยังถูกใช้ในกำรเขียนโปรแกรมอื่นด้วยเช่น ASP.NET MVC (ซึ่งเป็นอีกเรื่องหนึ่งและไม่อยู่ในบทเรียนนี้)
เรำแจ้งให้คุณทรำบไว้ก่อน เพื่อเวลำคุณหำข้อมูลเกี่ยวกับกำรเขียนโปรแกรม (ใช้ Google Search) ASP.NET Web Pages โดยกำรใช้ค ำว่ำ Razor ค้นหำคุณอำจจะพบว่ำไม่ได้รับค ำตอบหรือข้อมูลที่คุณต้องกำร ดังนั้นคุณควรหำในหัวข้อที่เกี่ยวกับ C# และ ASP.NET แทนเพรำะจะเป็นในส่วนของกำรเขียนโปรแกรมต่ำงๆ
ทดสอบกำรเขียนโปรแกรม Logic (เงื่อนไขต่ำงๆ) กำรใช้งำน Logic เป็นสิ่งส ำคัญและจะช่วยให้กำรสร้ำง Web Application ได้แบบ Dynamic โดยคุณำสำมำรถเขียนค ำสั่งเพื่อเปลี่ยนแปลงกำรแสดงผลต่ำงๆได้ตำมที่คุณต้องกำร หรือนอกจำกน้ันอำจจะเปลี่ยนแปลงพฤติกรรมกำรท ำงำนอ่ืนๆได้อีก โดยในบทเรียนนี้เรำจะใช้ Logic ในกำรเปลี่ยนแปลงกำรแสดงผลต่ำงๆตำมเง่ือนไข
เรำจะท ำกำรสร้ำงหน้ำเว็บใหม่และเน้นไปที่ Logic ต่ำงๆ โดยหน้ำเว็บที่สร้ำงใหม่จะท ำสิ่งต่อไปนี้
แสดงข้อควำมที่แตกต่ำงกันในหน้ำเว็บตำมเง่ือนไขต่ำงๆเช่นกำรคลิกบนปุ่มในหน้ำเว็บ โดยจะเป็นเง่ือนไขชุดแรก แสดงข้อควำมตำมเง่ือนไขของข้อมูลที่ส่งกลับมำผ่ำนทำง Query string ของ URL ( เช่น http://...?show=true ) โดยจะเป็น
เงื่อนไขที่ 2
ใน Visual Studio 2013 ให้ท ำกำรสร้ำงหน้ำเว็บใหม่และใช้ช่ือว่ำ TestRazorPart2.cshtml ด้วยกำรคลิกขวำที่ช่ือโครงกำรใน Solution Explorer แล้วเลือกเมนูลอย Add > New Item > Visual C# > Web > Razor > Web Page (Razor v3) แล้วคลิกปุ่ม Add
เมื่อท ำกำรสร้ำงเสร็จแล้วให้ท ำกำรแทนท่ีค ำสั่งเดิมในหน้ำต่ำงเขียนค ำสั่งของไฟล์ TestRazorPart2.cshtml ด้วยค ำสั่งต่อไปนี้
@{ var message = "This is the first time you've requested the page."; if (IsPost) { message = "Now you've submitted the page."; } } <!DOCTYPE html> <html lang="en"> <head> <title>Testing Razor Syntax - Part 2</title> <meta charset="utf-8" /> <style> body { font-family: Verdana; margin-left: 50px; margin-top: 50px; } div { border: 1px solid black; width: 50%; margin: 1.2em; padding: 1em; } </style> </head> <body> <h1>Testing Razor Syntax - Part 2</h1> <form method="post"> <div> <p>@message</p> <p><button type="submit">Submit</button></p> </div> </form> </body> </html>
ในชุดค ำสั่งบนสุดของหน้ำจะเป็นกำรประกำศตัวแปรช่ือ message และก ำหนดค่ำเริ่มต้นเป็นข้อควำม ในส่วนของ body ด้ำนล่ำงข้อควำมในตัวแปร message จะถูกสั่งให้แสดงภำยในค ำสั่ง <p> และค ำสั่ง HTML นี้ยังมีค ำสั่ง <button> เพื่อสร้ำง Submit button อีกด้วย
หลังจำกแทนที่ค ำสั่งเดิมแล้วให้ทดลองรันใน Web browser แล้วลองคลิกปุ่มต่ำงๆจะยังไม่มีอะไรเกิดขึ้นเพรำะคุณต้องเขียนค ำสั่ง Logic ต่ำงๆเพื่อเติม
กลับไปที่ Visual Studio 2013 ในส่วนของค ำสั่ง Razor บนสุดให้ท ำกำรแทรกค ำสั่งที่ถูกไฮไลท์สีฟ้ำต่อจำกบรรทัดที่ประกำศตัวแปร message ดังนี ้
@{ var message = "This is the first time you've requested the page."; if (IsPost) { message = "Now you've submitted the page."; } }
กำรใช้งำน if จำกค ำสั่งข้ำงบนท่ีคุณเพิ่งจะเพิ่มเข้ำไปคือกำรระบุเงื่อนไขของโปรแกรมเรียกว่ำ if โดยมีโครงสร้ำงค ำสั่งดังนี้
if(some condition){
One or more statements here that run if the condition is true;
}
เงื่อนไขที่จะถูกตรวจสอบต้องเขียนไว้ในวงเล็บเปิดและปิดท้ำยค ำสั่ง if โดยต้องมีผลลัพธ์เป็น true หรือ false หำกเงื่อนไขในวงเล็บเป็น true ASP.NET จะรันชุดค ำสั่งต่ำงๆที่อยู่ภำยในปีกกำเปิดและปิด หำกเงื่อนไขเป็น false ก็จะข้ำมชุดค ำสั่งภำยในนั้นไป
ต่อไปนี้คือตัวอย่ำงเงื่อนไขที่สำมำรถใช้ได้ใน if
if(currentValue > 12) { ... }
if(dueDate <= DateTime.Today) { ... }
if(IsDone == true) { ... }
if(IsPost) { ... }
if(!IsPost) { ... }
if(a != 0) { ... }
if(fileProcessingIsDone != true && displayMessage == false) { ... }
คุณสำมำรถทดสอบตัวแปรต่ำงๆหรือกับชุดค ำสั่งโดยใช้สัญลักษณ์แทนกำรเปรียบเทียบ (หรือ Logical operator) เช่นเปรียบเทียบกำรเท่ำกันด้วย == กำรมำกกว่ำด้วย > กำรน้อยกว่ำด้วย < กำรมำกกว่ำหรือเท่ำกับด้วย >= และกำรน้อยกว่ำหรือเท่ำกันด้วย <= และ != หมำยถึงกำรเปรียบเทียบว่ำไม่เท่ำกันใช่หรือไม่ ตัวอย่ำงเช่น if(a != 0) หมำยถึงจะเป็น true เมื่อ a มีค่ำไม่เป็น 0 เท่ำนั้น
คุณต้องระมัดระวังกำรเปรียบเทียบแบบเท่ำกันโดยใช้ == โดยห้ำมใช้ = ตัวเดียวเพรำะจะหมำยถึงกำรเปลี่ยนค่ำหรือก ำหนดค่ำให้กับตัวแปรและ property แทนซึ่งอำจจะท ำเกดิข้อผิดพลำดเมื่อรันหน้ำเว็บ
เพื่อเป็นกำรทดสอบว่ำเง่ือนไขเป็น true โดยทั่วไปคือ if(ตัวแปร == true) แต่คุณสำมำรถเขียนแบบย่อได้หำกตัวแปรนั้นเป็นแบบส่งค่ำกลับมำเป็น Boolean ซุ่งเป็นชนิดข้อมูลแบบ Logic คุณหำจเขียนแบบสั้นเป็น if(isDone) โดย isDone เป็นตัวแปรแบบ Boolean
อักขระ ! เป็น Logic operator หมำยถึง NOT ตัวอย่ำงเช่น if(!isPost) หมำยถึง ถ้ำตัวแปร isPost ไม่เป็นค่ำ true
คุณสำมำรถผสมผสำนเง่ือนไขหลำยเง่ือนไขเข้ำด้วยกันโดยใข้ && (And operator) และ || (Or operator) โดยจำกตัวอย่ำงเง่ือนไขบรรทัดสุดท้ำยจะหมำยควำมว่ำ ถ้ำ fileProcessingIsDone ถูกก ำหนดเป็นค่ำ true และ disaplyMessagr ถูกก ำหนดค่ำเป็น false
กำรใช้งำน else ในเง่ือนไขสุดท้ำยของ if เรำสำมำรถใช้ค ำสั่ง else โดย else จะมีประโยชน์หำกคุณต้องกำรก ำหนดเง่ือนไขที่จะถูกท ำเมื่อไม่มีเง่ือนไขใดๆก่อนหน้ำเป็นจริงเลย ตัวอย่ำงเช่น
var message = "";
if(errorOccurred == true)
{
message = "Sorry, an error occurred.";
}
else
{
message = "The process finished without errors!";
}
คุณจะพบว่ำ else จะมีประโยชน์มำกในกำรเขียนโปรแกรมในบทเรียนถัดๆไป
เงื่อนไขส ำหรับกำรทดสอบว่ำผู้ใช้งำนท ำกำร submit request หรือไม่ ในค ำสั่งตัวอย่ำงจะมีกำรทดสอบเงื่อนไขคือ if(IsPost) { … } โดย IsPost ที่จริงคือ property หนึ่งของหน้ำเว็บปัจจุบัน โดยครั้งแรกที่หน้ำเวบ็นี้ถูกเปิด IsPost จะมีค่ำเป็น false และเมื่อคุณคลิกปุ่ม submit ในหน้ำเว็บนี้จะถือว่ำเป็นกำร Post ข้อมูลหรือส่งข้อมูลกลับมำยัง Web server เง่ือนไขทั้งหมดจะถูกตรวจสอบใหม่และครั้งนี้ IsPost จะมีค่ำเป็น true กล่ำวโดยสรุป IsPost จะช่วยจัดกำรเกี่ยวกับกำรส่งข้อมูลด้วยแบบฟอร์ม (ในกำรท ำงำนจริงของ HTTP เมื่อผู้ใช้เรียกดูหน้ำเว็บจะถือเป็น GET operation และ IsPost จะเป็น false และหำกผู้ใช้งำน submit form จะถือเป็น POST operation และ IsPost จะเป็นค่ำ true) ในบทเรียนถัดๆไปคุณจะได้ใช้งำนแบบฟอร์ม ดังนั้นกำรใช้ IsPost จะมีประโยชน์อย่ำงมำก
ให้ท ำกำรทดลองรันหน้ำเว็บนี้ใหม่อีกครั้ง ในครั้งแรกที่หน้ำเว็บแสดงคุณจะเห็นข้อควำมว่ำ “This is the first time you’ve requested the page” ซึ่งเป็นข้อมูล String ที่คุณก ำหนดให้กับตัวแปร message ในตอนเริ่มต้น ซึ่งตอนนี้ if(IsPost) จะเป็น false ท ำให้ชุดค ำสั่งภำยใน if ไม่ถูกประมวลผล
ให้ท ำกำรคลิกปุ่ม Submit หน้ำเว็บจะท ำกำรส่ง request แบบ POST ไปที่ Web server โดยในครั้งนี้ if(IsPost) จะถูกตรวจสอบใหม่และจะมีค่ำเป็น true ท ำให้ค ำสั่งภำยใน if ถูกประมวลผล โดยค ำสั่งที่ว่ำจะท ำกำรเปลี่ยน String ในตัวแปร message ให้เป็นข้อควำมอื่น
ต่อไปให้ทดลองเพิ่ม if แทรกในระหว่ำงค ำสั่ง HTML ใต้ค ำสั่ง </p> ที่มีปุ่ม Submit โดยให้แทรกค ำสั่งดังนี้
@if (IsPost) {
<p>You submited the page at @DateTime.Now</p> }
เนื่องคุณก ำลังแทรกค ำสั่ง Razor ภำยในค ำส่ง HTML ดังนั้นคุณจะต้องขึ้นต้นค ำสั่งด้วย @ โดยค ำสั่งนี้จะเป็นกำรตรวจสอบเง่ือนไขด้วย if เช่นเดียวกัน โดยหำกเป็นจริงจะแสดงเนื้อหำ HTML ที่อยู่ภำยในปีกกำเปิดและปีกกำปิด โดยในค ำสั่ง HTML นั้นเรำจะท ำกำรแสดงเวลำที่เรำท ำกำร POST ดังนั้นจะต้องแทรกค ำสั่ง Razor แบบ inline โดยต้องมีเครื่องหมำย @ น ำหน้ำ DateTime.Now เช่นเดียวกัน
วัตถุประสงค์ของตัวอย่ำงค ำสั่งนี้ก็เพ่ือแสดงให้เห็นว่ำคุณสำมำรถแทรกค ำสั่งเงื่อนไข if ได้ทั้งในส่วนของ @{ … } และแทรกโดยตรงใน HTML โดยหำกคุณแทรก if โดยตรงลงใน HTML ชุดค ำสั่งที่อยู่ภำยใน { … } จะสำมำรถเป็นได้ทั้ง HTML หรือค ำสั่งภำษำ C# ให้จ ำไว้ว่ำทุกครั้งที่คุณจะผสม HTML และ Razor เข้ำด้วยกันคุณต้องขึ้นต้นด้วย @ เพื่อบอกให้ ASP.NET รู้ว่ำส่วนใดคือ HTML ส่วนใดคือ Razor
ให้ทดลองรันหน้ำเว็บอีกครั้งแล้วคลิกปุ่ม Submit ตอนนี้คุณจะเห็นควำมแตกต่ำงและจะมีเวลำที่ Web server ได้รับ request ปรำกฎขึ้นมำดังนี ้
กำรทดสอบเงื่อนไขโดยใช้ค่ำจำก Query string ล ำ ดั บ ต่ อ ไ ป จ ะ เ ป็ น ก ำ ร ท ด ส อ บ เ ง่ื อ น ไ ข โ ด ย ใ ช้ ค่ ำ ที่ ส่ ง ผ่ ำ น ท ำ ง query string ( เ ช่ น http://localhost:31254/TestRazorPart2.cshtml?show=true ) โดยเรำจะท ำกำรเปลี่ยนข้อควำมที่ปรำกฎในหน้ำเว็บให้เป้นข้อควำมอื่นแทนหำกค่ำ show เป็น true
ให้ท ำกำรแทรกชุดค ำสั่งที่ไฮไลท์สีฟ้ำในส่วนของ @{ … } ด้ำนบนสุดของหน้ำเว็บ
@{ var message = "This is the first time you've requested the page."; if (IsPost) { message = "Now you've submitted the page."; } var showMessage = false; if (Request.QueryString["show"].AsBool() == true) { showMessage = true; } }
ค ำสั่งด้ำนบนเป็นกำรประกำศตัวแปร showMessage และก ำหนดค่ำเริ่มต้นให้เป็น false หลังจำกนั้นท ำกำรตรวจสอบเง่ือนไขด้วยกำรดูค่ำข้อมูลที่ส่งผ่ำนมำทำง query string โดยในตอนแรกเมื่อคุณเป็นเว็บเพจน้ีจะได้ URL เป็น
http://localhost:31254/TestRazorPart2.cshtml
โดยในชุดค ำสั่งด้ำนบนจะท ำกำรตรวจสอบ URL ว่ำมีกำรส่งค่ำตัวแปรผ่ำน URL มำหรือไม่ซึ่งก็คือ query string โดยหำกแก้ URL ด้ำนบนให้เป็นดังนี้
http://localhost:31254/TestRazorPart2.cshtml?show=true
ในครั้งนี้ค ำสั่งด้ำนบนจะท ำกำรหำค่ำใน property ช่ือ QueryString ของ Request object โดยหำก query string ที่ช่ือว่ำ show มีค่ำเป็น true เงื่อนไขจะเป็นจริง และตัวแปร showMessage จะมีค่ำเป็น true
ในค ำสั่งด้ำนบนมีบำงอย่ำงเพิ่มเติมเข้ำมำเนื่องจำก query string จะเก็บข้อมูลที่เป็น String เท่ำนั้นไม่ได้เป็น Boolean จึงไม่สำมำรถน ำมำเปรียบโดยตรงว่ำมีค่ำเป็น true หรือ false หรือไม่อย่ำงไร ดังนั้นเรำต้องท ำกำรแปลงค่ำข้อมูลใน query string ให้เป็น Boolean ก่อนแล้วท ำกำรเปรียบเทียบ โดยเรำเรียกใช้ Method ช่ือว่ำ AsBool() เพื่อท ำกำรแปลงข้อควำมให้กลำยเป็นค่ำ true หรือ false โดยกำรท ำงำนก็คือหำก String มีค่ำเป็น “True” หรือ “true” จะแปลงเป็น true ให้แต่ถ้ำไม่ใช้จะแปลงเป็น false และส่งผลลัพธ์กลับมำ
Method AsBool() เป็นหนึ่งในฟังก์ชันกำรท ำงำนของภำษำ C# โดยปกติแล้ว C# จะท ำกำรตรวจสอบและแปลงข้อมูลเป็นชนิดที่เหมำะสมให้โดยอัตโนมัติ เช่น หำกเรำเอำ String มำเช่ือมกับตัวเลขก็จะได้ผลลัพธ์เป็น String กลับมำ แต่ในบำงครั้ง C# ไม่สำมำรถตรวจหำและเปลี่ยนแปลงชนิดข้อมูลให้เหมำะสมและถูกต้องได้ จึงเป็นหน้ำที่ของคุณที่จะต้องท ำกำรแปลงข้อมูลเป็นชนิดที่ถูกต้องดังตัวอย่ำงค ำสั่งด้ำนบนนี้ C# ไม่สำมำรถแปลง String ให้เป็น Boolean ได้ถึงแม่ String จะเป็น “true” หรือ “false” ก็ตำม
ขั้นถัดไปให้ท ำกำรลบบรรทัดท่ีเขียนค ำสั่งตำมด้ำนล่ำงทิ้งไป หรือท ำกำร Comment ไว้ดังน้ี
!-- <p>@message</p> -->
หลังจำกนั้นให้แทนที่ด้วยค ำสั่งดังนี ้
@if (showMessage) { <p>@message</p> }
ค ำสั่งเงื่อนไข if นี้จะท ำกำรตรวจสอบตัวแปร showMessage ว่ำมีค่ำเป็น true หรือไม่หำกเป็นจริงก็จะแสดงค ำสัง่ภำยใน คือ <p> และตำมด้วยข้อควำมในตัวแปร message
สรุปภำพรวมของค ำสั่งเงื่อนไข if หำกคุณยังไม่มั่นใจและเข้ำใจว่ำค ำสั่งด้ำนบนคืออะไร เรำขอสรุปภำพรวมให้คุณดังนี ้
ตัวแปร message ถูกก ำหนดค่ำเริ่มต้นไว้เป็นข้อควำม String (“This is the first time…”) หำกหน้ำเว็บนี้ถูกประมวลผลหลังจำกคลิกปุ่ม Submit ค่ำของตัวแปร message จะเปลี่ยนเป็น “Now you’ve submitted…” ตัวแปร showMessage ถูกก ำหนดค่ำเริ่มต้นให้เป็น false ถ้ำ query string มีกำรส่งค่ำ ?show=true ตัวแปร showMessage จะถูกเปลี่ยนค่ำให้เป็น true
ในค ำสั่ง HTML หำกตัวแปร showMessage เป็น true แล้ว <p> จะถูกแสดงใออกมำ (ถ้ำ showMessage ยังเป็น false จะไม่มีข้อควำมแสดง)
ในค ำสั่ง HTML หำกเป็นผลลัพธ์จำกกำรกดปุ่ม Submit จะมีข้อควำมพร้อมวันท่ีและเวลำปัจจุบันปรำกฏขึ้น
ขั้นถัดไปให้ทดลองรันหน้ำเว็บน้ีใน web broser แล้วลองคลิกท่ีปุ่ม Submit จะมีข้อควำมพ้อมวันท่ีและเวลำปรำกฏแต่ยังไม่มีข้อควำมที่เพิ่มไปใหม่ปรำกฎให้ท ำกำรแก้ไข URL บน web browser โดยเพิ่ม ?show=true ต่อท้ำย URL เดิมแล้วเคำะ Enter ดังนี ้
หน้ำเว็บจะถูกเรียกให้ประมวลผลและแสดงผลลัพธ์ใหม่อีกครั้ง โดยในครั้งนี้จะแสดงข้อควำมตำมภำพด้ำนล่ำง
ในช่อง URL ให้เปลี่ยนค่ำจำก ?show=true เป็น show=false แล้วเคำะ Enter อีกครั้งหน้ำเว็บจะกลับไปสภำพเดิมคือไม่มีวันที่เวลำ และข้อควำมปรำกฏ ซึ่งแสดงให้เห็นว่ำกำรก ำหนดเง่ือนไขต่ำงๆสำมำรถท ำได้โดยกำรตรวจสอบค่ำกำร POST และค่ำใน query string ซึ่งเป็นวิธีกำรพื้นฐำนและมีกำรใช้งำนอยู่เป็นประจ ำส ำหรับกำรสร้ำง Web Application
กำรติดตั้งและใช้งำน Helper ที่ช่วยในกำรแสดงผลภำพตัวแทน ในกำรพัฒนำฟังก์ชันของ Web Application บำงฟังก์ชันจ ำเป็นต้องมีกำรเขียนค ำสั่งที่ซับซ้อนและต้องอำศัยควำมรู้ที่มำกขึ้น ตัวอย่ำงเช่นกำรแสดงแผนภูมิที่ดึงข้อมูลจำกฐำนข้อมูล กำสร้ำงปุ่ม Like ของ Facebook กำรส่งอีเมล์จำกเว็บของเรำ กำรตัดและย่อ ขยำยภำพ กำรใช้งำนระบบช ำระเงิน PayPal เพื่อให้สำมำรถท ำสิ่งเหล่ำนี้ได้ง่ำยขึ้น ASP.NET Web Pages ได้เตรียมเครื่องมือเรียกว่ำ helpers โดยเป็นกำรติดตั้งส่วนประกอบเพิ่มเติมเพื่อให้เว็บของเรำสำมำรถใช้ฟังก์ชันท่ียุ่งยำกซับซ้อนได้ทันทีโดยไม่ต้องเขียนค ำสั่งทั้งหมดแต่อย่ำงใด
ASP.NET Web Pages มี helpers ทีต่ิดตั้งมำภำยในอยู่แล้วบำงส่วน และ helpers ก็ยังสำมำรถดำวน์โหลดและติดตั้งเพิ่มเติมให้กับเว็บของเรำได้ในลักษณะ add-ins packages โดยอำศัยโปรแกรม NuGet package manager ซึ่งช่วยในกำรติดตั้ง helpers เหล่ำนั้นโดยลดควำมซับซ้อนในกำรติดตั้งลงไปได้มำก
ในบทนี้เรำจะเรียนใช้ Gravatar (Globally recognized avatar) ซึ่งเป็น helper ที่ช่วยในกำรแสดงภำพตัวแทน โดยเรำจะได้เรียนรู้สองสิ่งอย่ำงแรกคือกำรค้นหำและติดตั้ง helper แล้วคุณจะได้รู้ว่ำ helpers สำมำรถช่วยเพิ่มฟังก์ชันใหม่ให้กับเว็บและลดควำมซับซ้อนต่ำงๆได้
ในกำรใช้งำน Gravatar เรำจะต้องท ำกำรลงทะเบียนในเว็บ http://www.gravatar.com แต่ในบทนี้เรำยังไม่จ ำเป็นต้องลงทะเบียนเพื่อทดสอบกำรใช้งำน helper
กลับไปท่ี Visual Studio 2013 คลิกเมนู TOOLS > NuGet Package Manager > Manage NuGet Packages for Solution
เมนูนี้จะท ำกำรเปิดหน้ำต่ำง Manage NuGet Packages และแสดง packages ต่ำงๆที่สำมำรถติดตั้งได้หรือถูกติดตั้งไว้แล้วในโครงกำรของเรำ (Packages ที่แสดงอยู่ไม่ได้เป็น ASP.NET Web Pages helpers ทั้งหมด อำจเป็นแม่แบบ สคริปต์ หรือเครื่องมือช่วยอื่นๆ) ให้ท ำกำรคลิกท่ีหัวข้อ Online แล้วไปท่ี Seach Online แล้วพิมพ์ค ำว่ำ asp.net helpers แล้วเคำะ Enter
ในผลกำรค้นหำรำยกำรแรกจะมีชื่อว่ำ ASP.NET Web Helpers Library คือ package ที่เรำต้องกำรใช้ในบทนี้ ใหค้ลิกท่ีปุ่ม Install ท้ำยช่ือรำยกำร
เมื่อคลิกแล้วอำจมีหน้ำต่ำงให้เลือกโครงกำรที่จะติดตั้ง hekpers ให้ท ำกำรเลือกโครงกำร WebPagesMovies ของคุณ แล้วคลิกปุ่ม OK เพื่อเริ่มกำรติดตั้ง packages โดยระหว่ำงกำรติดตั้งจะมีกำรให้รับรอง License เพื่อด ำเนินกำรต่อ
เมื่อติดตั้งเสร็จแล้วให้ท ำกำรคลิกปุ่ม Close เพื่อปิดหน้ำต่ำง Manage NuGet Packages
ในบำงสถำนกำรณ์คุณอำจจะต้องกำร Uninstall package ที่ติดตั้ง คุณสำมำรถท ำได้โดยกลับมำที่หน้ำต่ำง Manage NuGet Packages อีกครั้งในหัวข้อ Installed packages แล้วเลือก package ทีต่้องกำรแล้วคลิกปุ่ม Uninstall ท้ำยรำยกำร
กำรใช้งำน Helper ในหน้ำเว็บ ต่อไปจะเป็นกำรใช้งำน helper ที่พึ่งติดตั้งโดยขั้นตอนกำรเรียกใช้งำน helper จะคล้ำยคลิงกันทุก helper โดยเริ่มต้นให้คุณท ำกำรสร้ำงหน้ำเว็บใหม่และให้ใช้ช่ือว่ำ GravatarTest.cshtml เรำสร้ำงหน้ำใหม่นี้เพื่อทดสอบ helper แต่ในกำรท ำงำนจริงคุณสำมำรถเรยีกใช้ helper ได้จำกทุกหน้ำเว็บที่เป็น Razor
ในหน้ำต่ำงเขียนค ำสั่งของไฟล์ GravatarTest.cshtml ให้ไปที่บรรทัดแรกสุดและแทรกค ำสั่งด้ำนล่ำงนี้เหนือ <!DOCTYPE html>
@using Microsoft.Web.Helpers
หลังจำกนั้นให้ไปที่ <body> เพิ่ม <div></div> และภำยใน <div> ที่เพ่ิมไปใหม่ให้พิมพ์ค ำสั่ง
@Gravatar.
(อย่ำลืมจุดต่อท้ำยค ำว่ำ @Gravatar)
จำกค ำสั่งนี้ @ ก็มีควำมเช่นเดียวกับท่ีผ่ำนมำคือเป็นกำรประกำศว่ำส่วนนี้คือค ำสั่ง Razor และค ำว่ำ Gravatar คือช่ือของ helper object ที่เรำต้องกำรใช้ในบทนี้ และทันทีท่ีคุณพิมพ์ . ลงไป Visual Studio จะแสดงรำยกำร methods ของ helper Gravatart ที่สำมำรถเรียกใช้ได้ดังภำพด้ำนล่ำงนี้
รำยกำรที่แสดงเกิดจำกสิ่งที่เรียกว่ำ IntelliSense ซึ่งเป็นตัวช่วยให้เรำสำมำรถเข้ำถึง properties และ methods ของ object ต่ำงๆได้ง่ำยขึ้นโดยสำมำรถใช้งำนได้ทั้งกับ HTML CSS ASP.NET JavaScript และภำษำอื่นๆที่ Visual Studio สนับสนุน
เคำะ G บนคีย์บอร์ด InstalliSense จะไฮไลต์ไปที่ method ที่ขึ้นต้นด้วยตัว G ในที่นี้คือ GetHtml method เครำะ Tab 1 ครั้งเพื่อให้ IntelliSense ท ำกำรแทรก method ดังกล่ำวลงในหน้ำต่ำงเขียนค ำสั่ง แล้วให้เขียนค ำสั่งดังน้ี
@Gravatar.GetHtml("อีเมลข์องคุณ")
หำกคุณท ำกำรลงทะเบียนในเว็บของ Gravatar แล้วคุณก็จะสำมำรถใช้อีเมล์ของคุณในกำรแสดงผลข้อมูล Profile ของคุณใน Gravatar ได้แต่หำกยังไม่ลงทะเบียนก็จะแสดงเป็นภำพ default ของ Gravatar แทน เช่นตัวอย่ำงดังนี ้
@Gravatar.GetHtml("[email protected]")
เมื่อพิมพ์เสร็จแล้วให้ทดลองรันหน้ำเว็บน้ีบน web browser โดยหำกคุณเคยลงทะเบียน Gravatar ไว้กับอีเมล์ของคุณแล้วก็จะได้ภำพตัวคณุที่อัพโหลดไว้ใน Profile ของ Gravatar แต่ถ้ำยังไม่ได้ลงทะเบียนหรืออัพโหลดภำพก็ได้จะได้เป็นภำพ default ตำมตัวอย่ำงด้ำนล่ำงนี้
ให้ท ำกำรดู Sourcecode หน้ำเว็บใน web browser เพื่อดูว่ำ helper ได้ท ำกำรแทรกค ำสั่ง html ใหม่เพิ่มเติมลงไปให้เรำเพื่อแสดงภำพจำกเว็บ Gravatar ที่ตรงกับอีเมล์ของเรำ ในบรรทัดท่ีเรำเรียกใช้ helper ( @Gravatar.GetHtml นั้นเอง )
บทถัดไป เพื่อให้บทเรียนนี้สั้นกระชับสำมำรถเรียนรู้พื้นฐำนต่ำงๆได้อย่ำงรวดเร็วในบทน้ีจึงเน้นเฉพำะพื้นฐำนท่ีจ ำเป็นต้องใช้ส ำหรับบทเรียนนี้เท่ำนั้น ในกำรท ำงำนจริงยังมีค ำสั่ง Razor และ C# ต่ำงๆอีกมำกมำย คณุจะไดเ้รียนรู้เพิ่มเติมในบทถัดๆไป หรือหำกคุณต้องกำรศึกษำเองเพิ่มเติมคุณสำมำรถเข้ำไปศึกษำได้ที่เว็บ http://www.asp.net/web-pages/overview/getting-started/introducing-razor-syntax-(c)
ผู้เขียน ต้นฉบับภำษำอังกฤษเขียนโดย Tom FitzMacken ซึ่งเป็น Senior Programing Writer ในหัวข้อ Web Platform & Tools
Content team http://www.asp.net/web-pages/overview/getting-started/introducing-aspnet-web-pages-2/intro-to-web-pages-programming
แปลเป็นไทยและปรับแต่งเนื้อหำโดยพลรบ สวัสดี ([email protected])