//
you're reading...
ASP.NET, IT-Center, Javascript, Web Based

Simple Ajax in ASP.NET

1. Create New Web Project > Using ASP.NET Ajax-Enable WebSite
if did’t using this choice, asp.net will getting error ‘System.Web.UI.ScriptManager’ is not defined

2. Add Reference for AjaxControls.dll and AjaxControlToolkit.dll
3. HTML page :

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="simplecb.aspx.vb" Inherits="simplecb" %>
<%@ Register Assembly="AjaxControls" Namespace="AjaxControls" TagPrefix="cc2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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>Untitled Page</title>
 <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeout="1200">
 </asp:ScriptManager>

 <script>
 function GetValue(condt){
 UseCallback(condt);
 }
 function GetData(result, context){
 //document.form1.txtText.value='Ok';
 //$get("<%= txtSearch.ClientId %>").value="";
 document.getElementById("pilihan").innerHTML ="<select id='ddlPilihan'>"+result+"</select>";

 var modalPopupBehavior = $find('popupBehavior');
 modalPopupBehavior.show();
 }
 function setReturnValue() {
 //alert('setReturnValue function');
 $get("txtText").value = $get("ddlPilihan").value;
 $get("txtText").focus();
 return false;
 //alert('OK!');
 }

 </script>
 <asp:TextBox runat="server" ID="txtText" name="txtText"></asp:TextBox>
 <INPUT style="WIDTH: 22px; HEIGHT: 21px" id="btnRatingCd" onclick="javascript:GetValue(document.form1.txtText.value)" type=button value="..." name="btnRatingCd" />

 <div>
 <asp:Panel ID="pnlPopup" runat="server" Width="600px" Height="200px" Style="display: none">
 <table cellpadding="4" cellspacing="4" width="100%" class="mainModalTable">
 <tr>
 <td class="mainModalTitle" colspan="2">
 Select Dialog</td>
 </tr>
 <tr>
 <td style="width: 80px; text-align:right">
 Filter Options: </td>
 <td>
 <asp:TextBox ID="txtSearch" runat="server" Width="200px"></asp:TextBox>
 <asp:Button ID="btnSearch" runat="server" Text="Search" />
 </td>
 </tr>
 <tr>
 <td style="text-align:right;"> Options : </td>
 <td>
 <div id="pilihan">
 </div>
 </td>
 </tr>
 <tr>
 <td>&nbsp;
 </td>
 <td>
 <asp:Button ID="btnPopupOk" runat="server" Text="OK" CssClass="btn" OnClientClick="javascript:return setReturnValue()" />
 <asp:Button ID="btnPopupCancel" runat="server" CssClass="btn" Text="Cancel" /></td>
 </tr>
 </table>
 </asp:Panel>
 <cc2:ModalUpdateProgress ID="mupLoading" runat="server"
 BackgroundCssClass="modalBackground">
 <ProgressTemplate>
 <div class="modalPopup">
 Loading...
 <img alt="Loading" src="../images/ajax-loader.gif" />
 </div>
 </ProgressTemplate>
 </cc2:ModalUpdateProgress>
 <cc1:ModalPopupExtender ID="mpePopup" BehaviorID="popupBehavior" runat="server" PopupControlID="pnlPopup"
 OkControlID="btnPopupOk" CancelControlID="btnPopupCancel" TargetControlID="btnPopup"
 BackgroundCssClass="modalBackground">
 </cc1:ModalPopupExtender>
 <asp:Button ID="btnPopup" runat="server" Text="" Style="display: none" />
 </div>
 </form>
</body>
</html>

Important :

<asp:ScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeout="1200">
 </asp:ScriptManager>
<!-- must be included in form with runat server -->

4. ASP.NET VB Script:

Partial Class simplecb
 Inherits System.Web.UI.Page
 Implements System.Web.UI.ICallbackEventHandler
 Protected _callbackResult As String = Nothing
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 Dim cbReference As String = Page.ClientScript.GetCallbackEventReference(Me, "arg", "GetData", "context")
 Dim cbScript As String = "function UseCallback(arg, context)" & "{" & cbReference & ";" & "}"
 Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "UseCallback", cbScript, True)
End Sub
 Public Function GetCallbackResult() As String Implements System.Web.UI.ICallbackEventHandler.GetCallbackResult
 Return _callbackResult
 End Function
 Public Sub RaiseCallbackEvent(ByVal eventArgument As String) Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent
 Dim val As String = ""
If eventArgument = "1" Then
 val = "<option value='setunggal'>satu</option>"
 Else
 val = "<option value='kosong'>zero</option>"
 End If
 _callbackResult = val
 End Sub
End Class

Important :

 Public Sub RaiseCallbackEvent
<!-- in here data process to load in form --> 

Look data in HTML :
function GetValue(condt){
 UseCallback(condt);
 }

That have relation with ASP.NET script in :
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim cbReference As String = Page.ClientScript.GetCallbackEventReference(Me, "arg", "GetData", "context")
Dim cbScript As String = "function UseCallback(arg, context)" & "{" & cbReference & ";" & "}"
Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "UseCallback", cbScript, True)
End Sub

Download sample here

About berbagisolusi

Berbagi merupakan sebuah bentuk simbol keikhlasan untuk membantu dan menolong, sedangkan solusi adalah cara menyelesaikan masalah. Setiap manusia pasti mengalami masalah, tetapi kita tidak perlu mengalami masalah yang sama jika orang lain pernah mengalami dan kita tahu hal tersebut.

Discussion

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 9 other followers

December 2011
M T W T F S S
« Nov   Jan »
 1234
567891011
12131415161718
19202122232425
262728293031  

Archives

Web Statistic

Blog Stats

  • 149,580 hits
%d bloggers like this: