This article is currently in the process of being translated into Thai (~98% done).

The Basics:

Hello, world!

โยปกติแล้ว การเขียนโปรแกรมเบื้องต้นจะเริ่มต้นหัวข้อด้วยการใช้คำสั่ง "Hello, world!" เป็นบทแรก เราก็จะเริ่มต้นตรงนี้แหละ (ฮ่าๆ) และเราจะอธิบายความหมายของแต่ละคำสั่งในภายหลัง หากคุณเพิ่งเข้ามาใหม่ ขอแนะนำให้สร้างโปรเจค ASP.NET website บน Visual Studio Express 2012 ขึ้นมาก่อน หลังจากนั้นจะมีไฟล์ Default.aspx และ Default.aspx.cs ขึ้นมา ซึ่งจะหน้าตาคล้ายกับตัวอย่างที่เราจะเรียนในขณะนี้ ให้เพิ่มคำสั่ง AJAX ลงไปดังด้านล่างนี้:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Hello, world!</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="MainScriptManager" runat="server" />
        <asp:UpdatePanel ID="pnlHelloWorld" runat="server">
            <ContentTemplate>
                <asp:Label runat="server" ID="lblHelloWorld" Text="Click the button!" />
                <br /><br />
                <asp:Button runat="server" ID="btnHelloWorld" OnClick="btnHelloWorld_Click" Text="Update label!" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

ในส่วนของ CodeBehind ให้พิมพ์ข้อความที่เราต้องการแสดงผลบนหน้าจอ ดังคำสั่งด้านล่างนี้:

protected void btnHelloWorld_Click(object sender, EventArgs e)
{
    lblHelloWorld.Text = "Hello, world - this is a fresh message from ASP.NET AJAX! The time right now is: " + DateTime.Now.ToLongTimeString();
}

ในบทนี้ เรามีคำแนะนำอยู่สองอย่าง เมื่อคุณเปรียบเทียบกับ ASP.NET รูปแบบอื่น: ScriptManager control และ UpdatePanel control ในส่วนของ ScriptManager ให้ตรวจสอบก่อนว่ามีไฟล์ ASP.NET AJAX files และไฟล์ Library ของ AJAX ว่ามีในระบบและเวอร์ชั่นรองรับหรือไม่ และฟังก์ชันทั้งหมดในแต่ละหน้าเพจรองรับการทำงานผ่าน AJAX หรือไม่

หลังจากนั้น จะมี controls อยู่ส่วนหนึ่งที่ทำงานร่วมกับ with AJAX ก็คือ UpdatePanel โดยในส่วนนี้จะช่วยการอัปเดตข้อมูลเฉพาะส่วนที่ต้องการ จึงทำให้มีการ postback เกิดขึ้นไปยังเซิร์ฟเวอร์ รายละเอียดของ UpdatePanel เราจะอธิบายในบทต่อๆไป โดย controls จะสร้างขึ้นมาเป็นค่าพื้นฐานของ IDE อยู่แล้วและเรียกใช้งานได้เลยโดยยังไม่ต้องมีการแก้ไขคำสั่งใดๆ

ลองทดสอบรันหน้าเว็บ และลองกดปุ่มดู ข้อความจะเปลี่ยนเป็น Hello World และแสดงวันเวลาปัจจุบัน สามารถกดหลายๆครั้งได้ และเวลาจะเปลี่ยนไปทุกครั้งที่กด สังเกตจะพบว่าว่าหน้าเพจจะไม่กะพริบและแถบสถานะที่กำลังทำงานอยู่ ทั้งหมดนี้ทำงานภายใต้คำสั่งของ AJAX หากต้องกรารเปรียบเทียบการทำงาน ให้ตั้งค่า "enablepartialrendering" ในส่วนของ ScriptManager เป็น false ดังนี้:

<asp:ScriptManager ID="MainScriptManager" runat="server" enablepartialrendering="false" />

ผลการทำงานเมื่อไม่ได้เปิดใช้งาน AJAX.

ในบทต่อไปเราจะมาเจาะลึกการใช้งาน AJAX controls มากขึ้น

This article has been fully translated into the following languages:

Is your preferred language not on the list? Click here to help us translate this article into your language!

Metadata

Hello, world!