Using AjaxPro it helps to call a function in server page from JavaScript directly.
This can be achieved but using XmlHttpRequest, however all these things are taken care by AajaxPro.
Below example is to display the server time in the label when user clicks on the button.
Aspx Page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestPage.aspx.cs" Inherits="TestPage" %>
<!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></title>
<script type="text/javascript" src="Scripts/Test/JScript.js" />
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Server Time :
<input type="button" value="Server Time" onclick="objTest.ServerTime();" />
<label id="lblServerTime">
</label>
</div>
</form>
</body>
</html>
Aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxPro;
public partial class TestPage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(TestPage));
Page.ClientScript.RegisterClientScriptInclude("test12", "Scripts/Test/App/UI/Base.js");
Page.ClientScript.RegisterClientScriptInclude("test1", "Scripts/Test/App/UI/TestPage_Script.js");
Page.ClientScript.RegisterStartupScript(typeof(TestPage), "ld", "<script>LoadTest();</script>");
}
}
[AjaxPro.AjaxMethod]
public string GetCurrentDate()
{
return DateTime.Now.ToString("dd/MM/yyyy hh:mm:ss");
}
}
Jscript.js
//defining the 'Test' object
if (typeof Test == 'undefined')
Test = {};
//building the namespace
Test.namespace = function (nmspace) {
var nms = nmspace.split(".");
var obj = Test;
for (i = 0; i < nms.length; i++) {
obj[nms[i]] = (obj[nms[i]]) ? obj[nms[i]] : {};
obj = obj[nms[i]];
}
}
//implementing the inheritance for the given 2 classes
Test.extend = function (subclass, superclass) {
var fun = function () { };
fun.prototype = superclass.prototype;
subclass.prototype = new fun();
subclass.prototype.constructor = subclass;
subclass.superclass = superclass.prototype;
}
//building the logical namespaces
Test.namespace("App.UI");
Base.Js
//defining the functions in base class
Test.App.UI.Base = function () {
alert('parent class constructor');
}
//to display the text in a label
Test.App.UI.Base.prototype.setInnerText = function (id, txt) {
document.getElementById(id).innerText = txt;
}
TestPage_Script.js
var objTest;
//creating the object for "Test" Class
function LoadTest() {
objTest = new Test.App.UI.Test();
}
//building the derived class (Test)
Test.App.UI.Test = function () {
Test.App.UI.Test.superclass.constructor.call(this, Test.App.UI.Base);
}
//extending the "Base" class in "Test" class
//this will help to copy the prototype of base class to test class
//also adds "superclass" property to invoke constructor of "Base" class
Test.extend(Test.App.UI.Test, Test.App.UI.Base);
//server time javascript, which call server page function
Test.App.UI.Test.prototype.ServerTime = function () {
TestPage.GetCurrentDate(objTest.GetServerTime_Callback);
}
//response call back
Test.App.UI.Test.prototype.GetServerTime_Callback = function (resp) {
//calling the base class set text function
objTest.setInnerText('lblServerTime', resp.value);
}
No comments:
Post a Comment