?? default.aspx
字號:
<%@ Page language="c#" Codebehind="default.aspx.cs" AutoEventWireup="false" Inherits="AjaxProSample.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>Ajax.NET Professional Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="DemoMethods.js" language="javascript"></script>
<style type="text/css">
@import "main.css";
</style>
</head>
<body>
<form id="Form1" runat="server" method="post">
<script language="javascript" src="service1.asmx?AJAX"></script>
<h1>Ajax.NET Professional - A free library for the Microsoft .NET Framework</h1>
<h3>Asynchronous JavaScript with XmlHttpRequest - from the author of Ajax.NET</h3>
<p><b>Contact Address / Impressum</b></p>
<p>This web site is a demonstration page of the Ajax.NET Professional library I have build in my free time.</p>
<p><i>Michael Schwarz<br>Meisenweg 2<br>90547 Stein<br>Germany</i></p>
<p>Use my contact form at <a href="http://weblogs.asp.net/mschwarz/contact.aspx">http://weblogs.asp.net/mschwarz/contact.aspx</a> to give feedback, ideas and if you got any error.</p>
<h3>Ajax.NET Professional Download</h3>
<p>Visit my blog at <a href="http://weblogs.asp.net/mschwarz/">http://weblogs.asp.net/mschwarz/</a> for the latest news about this library.</p>
<p>The library can be downloaded from this web page. As this project is a technology demonstration of XmlHttp requests there is no warranty:</p>
<p>THE LIBRARY IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED,<br>
INCLUDING, WITHOUT LIMITATION, WARRANTIES THAT THE LIBRARY IS FREE OF DEFECTS, MERCHANTABLE,<br>
FIT FOR A PARTICULAR PURPOSE OR NON-INFRINGING. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE<br>
OF THE LIBRARY IS WITH YOU. SHOULD ANY PROVE DEFECTIVE IN ANY RESPECT, YOU (NOT THE INITIAL<br>
DEVELOPER OR ANY OTHER CONTRIBUTOR) ASSUME THE COST OF ANY NECESSARY SERVICING, REPAIR OR CORRECTION.</p>
<p>THE SOURCE CODE IS ONLY PROVIDED TO SHOW HOW Ajax.NET Professional IS WORKING INTERN. IT IS<br>
STRICTLY FORBIDDEN TO CREATE YOUR OWN AJAX LIBRARY FOR THE .NET FRAMEWORK USING THIS SOURCE CODE.<br>
SOME FEATURES WILL BE INCLUDED IN THE Ajax.NET LIBRARY (BorgWorX) IN THE NEXT WEEKS. PLEASE VISIT<br>
<a href="http://www.borgworx.com/" target="_new">www.BorgWorx.com</a> FOR THE LATEST Ajax.NET LIBRARY NEWS.</p>
<p>If you have accepted the terms above you can <a href="download/ajaxpro.zip">download</a> Ajax.NET Professional including this example project.</p>
<h3><font color="red">NEW!</font> Fixed bugs and new features</h3>
<p>
<ul>
<li>supporting nested classes</li>
<li>fixed caching support of Ajax.NET Professional requests (are the arguments equal?)</li>
</ul>
</p>
<h3><font color="red">NEW!</font> Enums on JavaScript client-side code</h3>
<p>The value of enums are exported as integer. If you want to use .NET syntax to test the enum values you can export the enums as JavaScript objects:</p>
<pre>
<b>[AjaxPro.AjaxEnum]
public enum GenderType
{
Male,
Female,
Unknown
}</b>
[AjaxPro.AjaxClass]
public class IPerson
{
public string FirstName;
// ...
public GenderType Gender = GenderType.Unknown;
}
</pre>
<p>To export the enum you can put following code to your Page_Load method:</p>
<pre>
private void Page_Load(object sender, System.EventArgs e)
{
<b>AjaxPro.Utility.RegisterEnumForAjax(typeof(AjaxProSample.NamespaceTest.Demo.GenderType));</b>
}
</pre>
<p>On the client-side JavaScript you can then use the generated enum class to test a property:</p>
<pre>
<script language="javascript">
var res = AjaxProSample.NamespaceTest.Demo.DemoMethods.GetPerson(1);
var person = res.value;
alert("Person is GenderType.Male: " + (<b>person.Gender == AjaxProSample.NamespaceTest.Demo.GenderType.Male</b>));
alert("Person is GenderType.Female: " + (<b>person.Gender ==AjaxProSample.NamespaceTest.Demo.GenderType.Female</b>));
</script>
</pre>
<p><a href="javascript:void(0);" onclick="enumTest();">Click here</a> for the enum type. It will display two messages boxes, the returned IPerson object will be GenderType.Female.</p>
<h3><font color="red">NEW!</font> DateTime, new Date() and TimeZones</h3>
<p>Oh, time zones are really cool, don't think so? Ok, Ajax.NET Professional supports time zone, now. Why do I need this? Well, if you want to create a calendar web site you want to allow the user to create a new schedule. He will enter a date (new Date()) and a subject and send this information back to the server. Two days later he will travel to a different time zone. Now, he want to see the schedule in the correct time zone. All browsers are using the system wide configured time zone to create dates.</p>
<pre>
<script language="javascript">
<b>alert(new Date());</b>
</script>
</pre>
<p><a href="javascript:void(0);" onclick="alert(new Date());">Click here</a> to see in which time zone you are working.</p>
<p>I have done a small time test where I try to get the time from the web server. (Note: my web server is in Germany and is configured with the local time zone here in Germany.) After displaying the date I will use this value to send it back to the server, only for testing the round-trip. The last message box will display the date formatted as string on the web server. See the C# source code:</p>
<pre>
[AjaxPro.AjaxMethod]
public DateTime GetServerTime()
{
return DateTime.Now;
}
[AjaxPro.AjaxMethod]
public DateTime PutServerTime(DateTime d)
{
return d;
}
[AjaxPro.AjaxMethod]
public string GetDateStringOnServer(DateTime d)
{
return d.ToString(); // this will return a DateTime formatted to the web servers date format
}
</pre>
<p><a href="javascript:void(0);" onclick="timeTest();">Click here</a> for the time test!</p>
<h3><span style="color:red">NEW!</span> Ajax.NET Professional Source Code</h3>
<p>I got a lot of requests for showing the source code of Ajax.NET Professional. Yes, the source code will be available on Firday evening, some minutes before I got to bed and travel to Los Angeles to attend the PDC.</p>
<h3><span style="color:red">NEW!</span> Session State handling with Ajax.NET</h3>
<p>Now, we you can access your session variables, there was a small bug.</p>
<p>First click on <i>write</i> to save the value i.e. "demo" to the session on the server. Now, you can press F5 (reload) and click on <i>read</i>. You should see the same value as you have written to the session state.</p>
<table>
<tr><td>Session Handling Demo</td></tr>
<tr><td>Write value</td><td><input type="text" id="sessionTest1" value="demo"></td><td><a href="javascript:test5();void(0);">Write</a></td></tr>
<tr><td>Read value</td><td><input type="text" id="sessionTest2" value=""></td><td><a href="javascript:test6();void(0);">Read</a></td></tr>
</table>
<p>On the server the C# method looks like following code:</p>
<pre>
[AjaxPro.AjaxMethod(<b>AjaxPro.HttpSessionStateRequirement.ReadWrite</b>)]
public void Test5(string value)
{
System.Web.HttpContext.Current.Session["example"] = value;
}
[AjaxPro.AjaxMethod(<b>AjaxPro.HttpSessionStateRequirement.Read</b>)]
public string Test6()
{
if(System.Web.HttpContext.Current.Session["example"] != null)
return (string)System.Web.HttpContext.Current.Session["example"];
return "First set the value...";
}
</pre>
<h3>JavaScript Object Wrappers</h3>
<p>The first new feature is the use of client-side JavaScript objects for arguments of Ajax.NET Professional methods. Let us make an example: You want the user to add several contacts. You can use following code to create a in memory DataSet on the client:</p>
<pre>
<script language="javascript">
var ds = new <b>System.Data.DataSet("MyDataset")</b>;
// create first table
var dt = new <b>System.Data.DataTable("FirstTable")</b>;
// defining columns
dt.addColumn("FirstName", "System.String");
dt.addColumn("Age", "System.Int32");
dt.addColumn("Birthday", "System.DateTime");
</script>
</pre>
<p>How do we add a row? Nothing easier than this:</p>
<pre>
<script language="javascript">
// adding two sample rows
dt.Rows.push({"FirstName":"Hans Werner","Age":20,"Birthday":new Date()});
dt.Rows.push({"FirstName":"Olaf","Age":333,"Birthday":new Date(1977,4,20)});
</script>
</pre>
<p>Or maybe you want to use an row object to be added to the table? See, how we can do this:</p>
<pre>
<script language="javascript">
var r = new Object();
r.FirstName = "Michael";
r.Alter = 999;
r.Birthday = new Date();
dt.Rows.push(r);
</script>
</pre>
<p>Ok, let us put the DataTable to the DataSet and send it to a Ajax.NET Professional method that will return the XML data of this DataSet (using .WriteXml()):</p>
<pre>
<script language="javascript">
// add the table to the DataSet
ds.Tables.push(dt);
WebForm1.GetDataSetXml(ds, callback2);
</script>
</pre>
<p><a href="javascript:void(0);" onclick="WebForm1.GetDataSetXml(buildSampleDataSet(), callback2);">Click here</a></p>
<h3>How encryption and tokens are working</h3>
<p>Ajax.NET Professional allows you to encrypt your data between the client and the server.</p>
<p>A token can be used to identify if it is a valid user. See, there are a lot of crawlers running to fetch XML data or JSON formatted strings to display the same information on their web sites. To protect yourself you can simply add a token to the page that will be identify your users. The token will be unique and cannot copied to another browser or computer. Currently I am searching for a <i>good</i> token.</p>
<p>For more details see <a href="source/SampleCryptProvider.cs.txt">SampleCryptProvider.cs</a> and <a href="source/SampleKeyProvider.cs.txt">SampleKeyProvider.cs</a></p>
<p>Click on <a href="javascript:void(0);" onclick="MS.Debug.enabled=true;">Enable</a> to enable tracing and click on any Ajax.NET Profession button to see all the messages.</p>
<p>If you are using <a href="http://www.fiddlertool.com/fiddler/" target="_blank">Fiddler</a> you can watch on what is sent to and from the server. In your example I have done a small test by reverting the string (mirror string):</p>
<p><img src="images/fiddler-encrypt.gif"></p>
<p>To enable encryption or using your own provider (IAjaxCryptProvider) you have to modify your web.config:</p>
<pre>
<ajaxNet>
<ajaxSettings>
<encryption cryptType="AjaxProSample.SampleCryptProvider, AjaxProSample"
keyType="AjaxProSample.SampleKeyProvider, AjaxProSample" />
</ajaxSettings>
</ajaxNet>
</pre>
<h3>JavaScript files are cached</h3>
<p>Because there a some JavaScript files that have to be generated as proxy between JavaScript and .NET I have added a caching mechanism using the ETag (see HTTP protocol). The virtual files are only downloaded once. For further requests the browser will make short requests to the server to ask for a newer version. This is needed because .NET methods can change and this is important for the client requests.</p>
<p><img src="images/fiddler-etag.gif"></p>
<p>In the image above you can see two requests to the same page. During the first request the browser gets all the files needed for this running Ajax.NET Professional. The second request will only return the main page, the JavaScript wrappers are unchanged. You can see that if you have a look on the HTTP status 304 and that the size of the files is zero.</p>
<h3>Using NameSpaces</h3>
<p>With the new version I have added namespaces for JavaScript, too. If you register a class for Ajax.NET Professional the complete .NET namesapce will be used for the client.</p>
<p>Before: WebForm1.MyMethod<br>Now: WebApplication1.WebForm1.MyMethod</p>
<p>You can specifiy a different namespace with the new AjaxClassAttribute that you can i.e. put to the Page class to get the old method for JavaScript calls.</p>
<h3>Use any class as return value or argument (no IAjaxObjectConverter needed)</h3>
<p>I have changed the JSON parser that it will accept all objects as return value and argument for your Ajax.NET Professional methods.</p>
<p>Let us write a short example: In .NET I am using a class IPerson to hold person information. A IBoss class is inherited from IPerson and adds the property <i>Company</i>:</p>
<pre>
[AjaxPro.AjaxClass]
public class IPerson
{
public string FirstName;
public string FamilyName;
public int Age = 0;
}
public class IBoss : IPerson
{
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -