📄 default.aspx
字号:
<%@ Page language="c#" AutoEventWireup="false" Inherits="AJAXDemo.Examples.Classes._default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ajax.NET - Class Example</title>
<link rel="stylesheet" type="text/css" href="../../css/main.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<form id="Form1" method="post" runat="server"></form>
<div class="content">
<h1>Class Examples</h1>
<p>The first example will return an own class that has some public fields to be used on the client-side JavaScript.</p>
<pre class="csharp">public class MyClass
{
public string FirstName = "";
public string FamilyName = "";
public int Age = 0;
}</pre>
<p>Click <a href="javascript:doTest1();void(0);">here</a> to return an instance of the above class.</p>
<p>It is also working if you inherit from a class and add your own properties to the new class.</p>
<pre class="csharp">public class MyInheritedClass : MyClass
{
public double SizeInMeters = 0.0;
public Guid ID = Guid.Empty;
}</pre>
<p>Click <a href="javascript:doTest2();void(0);">here</a> to get an MyInheritedClass object.</p>
<h2>Passing a own class back to the server</h2>
<p>Next we want to pass the MyClass object back to the server. The first call will get an MyClass object from the server like we have done above. Then we want to modify the .FirstName property on the client, submit the object to the server, modify the .FamilyName there and see the results.</p>
<pre class="javascript">function doTest3() {
// synchronous call to the server-side method to get an MyClass object
var p = AJAXDemo.Examples.Classes.Demo.GetMyClass().value;
p.FirstName = "CLIENT-SIDE CHANGE"; // change one property
AJAXDemo.Examples.Classes.Demo.PutMyClass(p, doTest3_callback);
p = null;
}</pre>
<pre class="csharp">[AjaxMethod]
public MyClass PutMyClass(MyClass c)
{
c.FamilyName = "SERVER-SIDE CHANGE"; // change one property
return c;
}</pre>
<p>Click <a href="javascript:doTest3();void(0);">here</a> to run the test!</p>
<h2>Create converters for your classes</h2>
<p>One new feature is the use of converters to serialize a .NET object or deserialize a JSON string. In this example I am using a custom IJavaScriptConverter. This converter will return a new class on the client-side JavaScript that may have more properties or methods that are not returned using the built-in custom object converter (which will only return public fields and properties).</p>
<pre class="javascript">function doTest4() {
var p = AJAXDemo.Examples.Classes.Demo.GetPerson().value; // synchronous call to the server-side method
// access the properties of the Person object here
alert(p.FirstName);
// Now, we want to save it, we call the save method of the instance
// and get a boolean if succeded.
var b = p.save();
}</pre>
<p>Click <a href="javascript:doTest4();void(0);">here</a> to get an Person instance and save the object using a method from the instance.</p>
</div>
<p class="footer">Last updated: November 2, 2005 by <a href="http://weblogs.asp.net/mschwarz/contact.aspx" target="_blank">Michael Schwarz</a></p>
<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></p>
<script type="text/javascript" defer="defer">
function doTest1() {
AJAXDemo.Examples.Classes.Demo.GetMyClass(doTest1_callback);
}
function doTest1_callback(res) {
var p = res.value;
alert("FirstName = " + p.FirstName + "\r\nFamilyName = " + p.FamilyName + "\r\nAge = " + p.Age);
p = null;
}
function doTest2() {
AJAXDemo.Examples.Classes.Demo.GetMyInheritedClass(doTest2_callback);
}
function doTest2_callback(res) {
var p = res.value;
alert("FirstName = " + p.FirstName + "\r\nFamilyName = " + p.FamilyName + "\r\nAge = " + p.Age + "\r\n\r\nSizeInMeters = " + p.SizeInMeters + "\r\nID = " + p.ID);
p = null;
}
function doTest3() {
var p = AJAXDemo.Examples.Classes.Demo.GetMyClass().value; // synchronous call to the server-side method
p.FirstName = "CLIENT-SIDE CHANGE";
AJAXDemo.Examples.Classes.Demo.PutMyClass(p, doTest3_callback);
p = null;
}
function doTest3_callback(res) {
var p = res.value;
alert("FirstName = " + p.FirstName + "\r\nFamilyName = " + p.FamilyName + "\r\nAge = " + p.Age);
p = null;
}
function doTest4() {
var p = AJAXDemo.Examples.Classes.Demo.GetPerson().value; // synchronous call to the server-side method
alert("p.FirstName = " + p.FirstName + "\r\n\r\nClick on OK to save this object using p.save();");
var b = p.save();
alert("Person " + (b == true? "has been saved." : "could not be saved!"));
alert("If we now set the .FirstName to \"HANS\" it will not work because\r\nthe Save method will not allow to save Person objects with that FirstName.");
p.FirstName = "HANS";
b = p.save();
alert("Person with .FirstName == \"HANS\" " + (b == true? "has been saved." : "could not be saved!"));
p = null;
b = null;
}
</script>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -