Beginning Ajax With ASP.NET (2006).pdf

Chapter 9
The code defined here should immediately be familiar to you from your experience with Ajax.NET. The
pattern here is the same as with Ajax.NET. First, you must register the page with the Anthem.NET framework.
Then you add the Anthem.Method attribute to your method. As stated above, the Multiply
method requires two factors as arguments and returns the product.
Now test the behavior by launching the page in the browser.
Example 6: Direct Scripting (Micro-Content)
Recall from the MagicAjax section how you implemented the micro-content pattern. You will now
implement the same pattern using Anthem.NET.
This exercise uses Anthem.NET as well as some custom Cascading Style Sheet definitions to power the
change in the user interface to give clues as to what is happening.
The page will provide initial clues that parts of the page are editable by drawing a border over the text
when the cursor hovers over the editable area. (You can refer back to Figure 9-10 to remind yourself of
what this looks like.)
The next clue is to change the appearance of the control when the user has placed this area of the page in
“edit mode.” (Refer back to Figure 9-11 to see an example of this.)
Finally when the focus is lost from the control Anthem.NET will contact the server and allow the back-end
processing to persist the latest data. Under normal circumstances you would probably persist the data to
a data store of some kind. For demonstration purposes, this exercise will simply store the information in
Session state. This way, once you make a change to the data, you can navigate off the page and return to
see your latest changes, but you avoid having to implement a data layer just for this example.
Try It Out
Using Direct Scripting
Begin by adding a new web form to the solution, naming it DirectScripting.aspx. Now add the
Anthem register directive to the page just under the directive.
Next, add the following code within the tag:
input
{
border:solid 1px #fff;
}
.focus
{
background-color:#eee;
border:dashed 1px #ccc;
}
.blur
{
242