Tutorial Programming

Tutorial Basic Mengenal AJAX pada ASP.NET C#


Asalammualaikum, sahabat kali ini saya akan membahas tentang mengenal AJAX pada ASP.NET C# , kali saya akan memberi tutorial sebagai pengenal secara algoritmanya saja, dalam tutorial kali ini saya akan membahas dengan penggunaan TIME, agar sahabat lebih sedikit mengerti, karena melakukan interaksi pada AJAX, ASP.NET sudah memberi data API tersendiri, namun menurut saya, jika ada update an terbaru pada library .js tersebut, akan terjadi permasalahan yang sedikit menggaggu, tips dari saya, lebih baik membuat library .js sendiri untuk AJAX, namun bila di butuhkan data API gunakanlah seminimal mungkin dan membuat .js sendiri.
Baiklah kita langsung saja, bismillah.

Pertama sahabat buat file dengan nama Ajax.aspx di server ASP.NET kalian.


Kedua buatlah coding design pada ASP.NET kalian dengan code;


<%@ Page Title="Ajax" Language="C#" MasterPageFile="~/Site.Master"  AutoEventWireup="true" CodeBehind="Ajax.aspx.cs" Inherits="Tutorial_1.Ajax" %>


<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1><%: Title %>.</h1>
                <h2>Modify this template to jump-start your ASP.NET application.</h2>
            </hgroup>
            <p>
                To learn more about ASP.NET, visit <a href="http://asp.net" title="ASP.NET Website">http://asp.net</a>.
                The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET.
                If you have any questions about ASP.NET visit
                <a href="http://forums.asp.net/18.aspx" title="ASP.NET Forum">our forums</a>.
            </p>
        </div>
    </section>
</asp:Content>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">

    <section class="crud">

        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                <asp:Button ID="Butto_Ajax" runat="server" Text="Refresh" OnClick="Butto_Ajax_Click"/>
             </ContentTemplate>
            </asp:UpdatePanel>
        </div>

        <div>
            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                <ContentTemplate>
                <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                </ContentTemplate>

                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Button1" />
                </Triggers>

            </asp:UpdatePanel>

            <asp:Button ID="Button1" runat="server" Text="Laju Ajax 2 Triger" OnClick="Button1_Click"/>
        </div>

        <div>
            <asp:UpdatePanel ID="UpdatePanel3" runat="server">
                <ContentTemplate>
                <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
                <asp:Button ID="Button2" runat="server" Text="Button tRIGER POST" OnClick="Button2_Click"/>
                </ContentTemplate>

                <Triggers>
                <asp:PostBackTrigger ControlID="Button2" />
                </Triggers>
            </asp:UpdatePanel>
        </div>

        <div>
            <asp:UpdateProgress ID="UpdateProgress1" runat="server">

                <ProgressTemplate>
                Loading....silakan tunggu.
                <asp:Image ID="Image1" Width="75" Height="95" runat="server" ImageUrl="~/mages/animation_processing.gif" />
                </ProgressTemplate>

            </asp:UpdateProgress>

            <asp:UpdatePanel ID="UpdatePanel4" runat="server">

                <ContentTemplate>
                <asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
                <asp:Button ID="Button3" runat="server" Text="Ajax Progres" onclick="Button3_Click" />
                </ContentTemplate>

            </asp:UpdatePanel>
        </div>

        <div>
            <asp:UpdatePanel ID="UpdatePanel5" runat="server">
                <ContentTemplate>
                <asp:Timer ID="Timer1" Interval="60" OnTick="Timer1_Tick"
                runat="server">
                </asp:Timer>
                <asp:Label ID="Label5" runat="server" Text="Label"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>

    </section>
    
</asp:Content>



Ketiga copy code untuk server side nya;

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

namespace Tutorial_1
{
    public partial class Ajax : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Label1.Text = DateTime.Now.ToString();
        }

        protected void Butto_Ajax_Click(object sender, EventArgs e)
        {
            Label1.Text = DateTime.Now.ToString();
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            Label2.Text = DateTime.Now.ToString();
        }

        protected void Button2_Click(object sender, EventArgs e)
        {
            Label3.Text = DateTime.Now.ToString();
        }

        protected void Button3_Click(object sender, EventArgs e)
        {
            Label4.Text = DateTime.Now.ToString();
            for (int i = 0; i < 1000000000; i++)
            {
            }
        }

        protected void Timer1_Tick(object sender, EventArgs e)
        {
            Label5.Text = DateTime.Now.ToString();
        }
    }
}


Jika coding benar, akan seperti gambar dibawah ini:



Jika sahabat mengalami error pada coding kalian, jangan segan untuk mengirim email dan komen.

Sekian tutorial saya mengenai PENGENALAN AJAX mengunakan ASP.NET di C#, Semoga bermanfaat yah sahabat.
Maaf jika pemahaman saya ada yang salah, terimakasih.


No comments:

Post a Comment

Tutorial Programming Designed by Templateism | Ary EJFA Copyright © 2015

Theme images by richcano. Powered by Blogger.