Salah satu fasilitas yang terdapat pada ASP.Net adalah update panel yang memungkinkan halaman mengirim request ke server tanpa proses reload halaman secara keseluruhan selayaknya metode AJAX. Untuk mencoba menggunakan update panel, buatlah sebuah master page yang didalamnya terdapat pemanggilan script manager secara sederhana satu script manager yang terdapat pada master page dapat menangani banyak update panel yang merujuk ke master page tersebut. Untuk membuat master page anda bisa melihat tutorialnya pada artikel saya yang sebelumnya pada halaman ini Membuat Master Page Pada ASP.Net. Berikut adalah struktur file pada projek yang akan digunakan:
Master.master
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Master.master.cs" Inherits="Master" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Study On Sunday - Bekerja Dengan Update Panel Pada ASP.Net</title>
<asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<form id="form" runat="server">
<div>
<%--Menyisipkan Script Manager--%>
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:ContentPlaceHolder id="body" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Default.aspx
<%@ Page Title="Beranda" Language="C#" MasterPageFile="~/Master.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="headBeranda" ContentPlaceHolderID="head" Runat="Server"></asp:Content>
<asp:Content ID="bodyBeranda" ContentPlaceHolderID="body" Runat="Server">
<h1>Bekerja Dengan Update Panel Pada ASP.Net</h1>
<%--Menyisipkan Update Panel--%>
<asp:UpdatePanel ID="updatePanelBeranda" runat="server">
<%--Content Template Digunakan Untuk Menampung Isi Halaman Yang Tidak Akan Di Reload--%>
<ContentTemplate>
<label>Pesan:</label> <input type="text" id="textPesan" runat="server" />
<input type="button" id="buttonKirim" value="Kirim" onserverclick="buttonKirim_Click" runat="server" />
<p id="divPesan" runat="server"></p>
</ContentTemplate>
<Triggers>
<%--Triggers Digunakan Untuk Menangani Event Dalam Hal Ini Tombol Kirim Diklik--%>
<asp:AsyncPostBackTrigger ControlID="buttonKirim" EventName="serverclick" />
</Triggers>
</asp:UpdatePanel>
</asp:Content>
Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
}
}
/*Fungsi Ini Dijalankan Ketika Tombol Kirim Diklik*/
protected void buttonKirim_Click(object sender, EventArgs e)
{
divPesan.InnerText = textPesan.Value;
}
}
Apapila program dijalankan akan terlihat seperti gambar berikut:
Apabila kesulitan dalam mengikuti tutorial diatas dapat menanyakannya melalui fasilitas komentar pada blog ini.
0 Comments:
Post a Comment