Page 50 - MSDN Magazine, October 2017

Then change its codebehind to the following:
using System; namespace foobar {
public partial class Default : p5.ajax.core.AjaxPage {
[p5.ajax.core.WebMethod]
public void foo_onclick(p5.ajax.widgets.Literal sender, EventArgs args) {
And the third—probably most important—point is that you can dynamically add, remove, update and insert any new AJAX control into any other widget, as you see fit. Before you have a look at this final point, though, you’ll need to examine the “trinity of widgets.”
There are three different widgets in p5.ajax, but they’re also very similar in their API. By combining these three widgets together using composition, you can create any HTML markup you wish. In the example in Figure 2, you used the Literal widget. The Literal widget has an “innerValue” property, which on the client sidemapsto“innerHTML,”andsimplyletsyouchangeitscontent as a piece of string or HTML.
The Container widget can contain widgets. And it will remem- ber its Controls collection and let you dynamically add, remove or change its collection of controls dynamically during AJAX requests.
The third widget is the Void widget, which is exclusively used for controls that have no content at all, such as HTML input elements, br elements, hr elements and so on. The most important one for the example here is probably the Container widget. So go ahead and change the code in the .aspx page to what you see in Figure 3.
The widget hierarchy in Figure 3 will create one “button” and a “ul” element with one “li” child element. Next, change the C# codebehind to the code in Figure 4.
Realize that the last piece of code dynamically injected new widgets into the Container widget. Basically, new “li” elements were appended into the “ul” element, dynamically during an AJAX request, and it simply worked! These widgets are also persistently remembered across AJAX requests, such that you can change their properties and invoke event handlers for them. In addition, through the “Element” property any HTML elements can be rendered and any attribute added through the subscript operator.
You now have 100 percent perfect control over your HTML markup, and you can create tiny AJAX requests and responses that update anything you want to update on your page in any way you see fit. And you did it with 4.8KB of JavaScript. You’ve turned Web
Figure 3 Creating a Page with a Button
and a Bulleted List Containing One List Item
sender.innerValue = "Hello World from Managed Ajax!";
} }
Notice that you first need to inherit your page from AjaxPage, add a WebMethod attribute to the event handler and specifically strongly type the first parameter to your event handler as a “Literal” widget. At this point you can start your Web site, click the button and enjoy your result. If you get weird bugs when debugging your Web site, make sure you turn off the “browser link” settings for Visual Studio, which is normally a toolbar button, at the top of Visual Studio. If you’re curious about what goes on here, try to inspect your HTTP requests. Also make sure you take a look at its initial HTML.
Whoa, What Was That?
That was managed AJAX in practice. There are several important points to this idea that should be considered. First, you can mod- ify any property in any control on your page from any AJAX event handler in your page. If you created another Literal widget, “Element” type “p” for instance, you could update its content from your button’s “foo_onclick” event handler.
Second, you can dynamically add, remove, update or retrieve any property from your widget any way you see fit. To reference any attribute or event handler, simply use the subscript operator from C#. In Figure 2, instead of setting the widget’s innerValue, its style property is checked and toggles a yellow background, using the CSS style property. Notice how it’s able to persist and “remember” the style property of your widget. Notice also that this is done without passing huge amounts of ViewState back and forth between the client and the server.
In a real-world application, you’d probably want to use CSS classes, which could be done by exchanging the reference in Figure 2 from “style” to “class.” But I wanted to keep this example simple, so I didn’t mix CSS files in here, instead using the style attribute for convenience. Using the approach shown in Figure 2, you can add, remove and change any attribute you wish, on any widget on your page.
Figure 2 Toggling the Background Color
}
<%@ Page Language="C#" Inherits="foobar.Default" %> <!DOCTYPE html>
<html>
<head runat="server">
<title>Default</title> </head>
<body>
<form id="form1" runat="server">
<p5:Literal
runat="server"
id="foo"
onclick="foo_onclick" Element="button">Click me!</p5:Literal>
<p5:Container runat="server"
id="bar" Element="ul"> <p5:Literal
runat="server"
id="initial"
onclick="initial_onclick"
Element="li">Initial list element, try clicking me!</p5:Literal>
</p5:Container>
</form> </body>
</html>
using System; namespace foobar {
public partial class Default : p5.ajax.core.AjaxPage {
[p5.ajax.core.WebMethod]
public void foo_onclick(p5.ajax.widgets.Literal sender, EventArgs args) {
if (sender.HasAttribute ("style")) sender.DeleteAttribute ("style");
else
sender ["style"] = "background-color:Yellow;";
} }
}
46 msdn magazine
Web Development