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

أساسيات:

Hello, world!

كالعادة, سوف نستخدم المثال الدارج "!Hello, World" ليكون أول مثال. سوف نبدأ بالكود, و ثم سوف نشرح بعد ذلك. إن لم تكون قد فعلت ذلك, يجب ان تنشئ مشروع جديد لموقع ASP.NET على Visual Studio Express 2012. البرنامج سوف ينشئ ملفات Default.aspx و Default.aspx.cs, مثل أي صفحة ASP.NET. لنضيف بعض ال 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>

في الكود الخلفي، لن يحدث أي أمر جديد فيما عدى هذا الحدث والذي يجب عليك إضافته:

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();
}

In the markup part, we use two new things, when compared to regular ASP.NET: The ScriptManager control and the UpdatePanel control. The ScriptManager makes sure that the required ASP.NET AJAX files are included and that AJAX support is added, and has to be included on every page where you wish to use AJAX functionality.

After the manager, we have one of the most used controls when working with AJAX, the UpdatePanel. This control allows you to wrap markup which you would like to allow to be partially updated, that is, updated without causing a real postback to the server. More about the UpdatePanel in a coming chapter. Besides those two controls, everything else is standard controls, with no modifications that would indicate alternate behavior.

Try running the example site, and click the button. The label will be updated with our usual Hello world text, and the current time. Try repeatedly clicking the button, and you will see the label get the current timestamp each time. Notice the wonderful absence of a blinking window and a running status bar - everything is done without updating anything but the label! We've just created our first AJAX enabled page. If you wish to see how this page would work without AJAX, try setting the "enablepartialrendering" of the ScriptManager to false like this:

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

هذا سيمنع استخدام الاستدعاء الجزئي على الصفحة، ويريك كيف تعمل الصفحة من دون أجاكس.

في الفصل القادم، سنبحث في أنواع متحكمات أجاكس وكيفية استعمالهم.

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!