Handling Dynamic Images in ASP.NET 3.5 AJAX Applications - Creating the Sample .aspx Page

(Page 4 of 5 )

As for adding this sample required .aspx page, it is very easy. With Visual Studio 2008's built-in support for ASP.NET AJAX Extensions, you can directly add an AJAX web form, as is shown in Figure 6 below.

Figure 6-Adding an AJAX web form in Visual Studio 2008

As many web developers prefer to do, we have also leveraged <table> elements to lay out the page. Now, let's look at the HTML elements related definitions below:

<form id="form1" runat="server">

<div style="width: 761px">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

 

<!-- create ObjectDataSource -->

<asp:ObjectDataSource ID="odsComments" runat="server"

DataObjectTypeName="DemoSpace.Comment"

InsertMethod="AddComment"

SelectMethod="GetComments"

TypeName="DemoSpace.GuestBookDB">

</asp:ObjectDataSource>

 

<table>

<tr>

<td valign="top">

<asp:UpdatePanel ID="upAddComment" runat="server">

<ContentTemplate>

<asp:FormView ID="fvAddComment" runat="server"

DataSourceID="odsComments"

DefaultMode="Insert" OnItemCommand="fvAddComment_ItemCommand">

<InsertItemTemplate>

<table style="width: 550px">

<tr>

<td class="commentTitle">

<img alt="" src="imgs/Bullet01.gif" />Name:</td>

<td>

<asp:TextBox ID="txtName" runat="server"

CssClass="commentNormal"

Text='<%# Bind("Name") %>' Width="150px">

</asp:TextBox>

<br />

<asp:RequiredFieldValidator ID="rfvName" runat="server"

ErrorMessage="Please enter your name" ControlToValidate="txtName">

</asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td class="commentTitle">

<img src="imgs/Bullet01.gif" />Words:</td>

<td>

<asp:TextBox ID="txtComment" runat="server"

Height="100px" TextMode="MultiLine" Width="300px"

CssClass="commentNormal" Text='<%# Bind("Text") %>'>

</asp:TextBox>

<br />

<asp:RequiredFieldValidator ID="rfvComment" runat="server"

ErrorMessage="Please leave your word"

ControlToValidate="txtComment">

</asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td class="commentTitle">

<img src="imgs/Bullet01.gif" />Verifying code:</td>

<td>

<asp:TextBox ID="txtCAPTCHA" runat="server"

CssClass="commentNormal" Width="150px"

MaxLength="5"></asp:TextBox>

<br />

<asp:RequiredFieldValidator ID="rfvCAPTCHA" runat="server"

ErrorMessage="Please enter the verifying code"

ControlToValidate="txtCAPTCHA">

</asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td align="center" colspan="2">

(Please enter the characters shown within the picture below.)<br />

<img src="GenerateCAPTCHA.ashx" title="Verifying code" /><br />

<img src="imgs/Hr_pen.gif" /></td>

</tr>

<tr>

<td colspan="2" align="center">

<table align="center" cellpadding="10" cellspacing="10" width="100%">

<tr>

<td>

<asp:Button ID="btnSend" runat="server"

BackColor="#C0FFFF" CommandName="Submit"

Font-Bold="True" Font-Size="Medium" Text="Submit" /></td>

<td>

<asp:Button ID="btnReset" runat="server"

CausesValidation="False" CommandName="Cancel"

Font-Bold="True" Font-Size="Medium" ForeColor="Blue"

Text="Clear" /></td>

</tr>

</table>

</td>

</tr>

</table>

</InsertItemTemplate>

<HeaderTemplate>

Leave Your Word

</HeaderTemplate>

<HeaderStyle CssClass="header" />

</asp:FormView>

 

<ajaxToolkit:NoBot ID="myNoBot" runat="server"

ResponseMinimumDelaySeconds="15"

CutoffMaximumInstances="3"

CutoffWindowSeconds="150"

OnGenerateChallengeAndResponse="MyChallengeResponse" />

 

 

<asp:Label ID="lblMessage" runat="server" ForeColor="Red"></asp:Label>

</ContentTemplate>

</asp:UpdatePanel>

</td>

<td valign="top">

<asp:UpdatePanel ID="upShowComments" runat="server"

UpdateMode="Conditional">

<ContentTemplate>

<asp:DataList ID="dlComments" DataSourceID="odsComments" runat="server">

<ItemTemplate>

<table align="left">

<tr>

<td class="dlTitle">

Name:</td>

<td class="dlContent">

<asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>'></asp:Label></td>

</tr>

<tr>

<td class="dlTitle">

Word:</td>

<td class="dlContent">

<asp:Label ID="lblText" runat="server" Text='<%# Eval("Text") %>'></asp:Label></td>

</tr>

</table>

</ItemTemplate>

<HeaderTemplate>

Already Left Words

</HeaderTemplate>

<SeparatorTemplate>

<img src="imgs/Hr_book_pen.gif" />

</SeparatorTemplate>

<HeaderStyle CssClass="header" />

<AlternatingItemStyle BackColor="#F7F7F7" />

<ItemStyle BackColor="#E7E7FF" />

</asp:DataList>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID="fvAddComment" EventName="ItemInserted" />

<asp:AsyncPostBackTrigger ControlID="fvAddComment" EventName="ItemCommand" />

</Triggers>

</asp:UpdatePanel>

</td>

</tr>

</table>

</div>

</form>

First, you may notice that the ASP.NET AJAX server side controls ScriptManager and UpdatePanel are employed, which nearly all ASP.NET AJAX server-centric applications must put into use. Therefore, we do not dwell upon them.

Second, you should see that the important ASP.NET data source control ObjectDataSource appears herein. It is used to provide data for the FormView 'fvAddComment' and the DataList control 'dlComments.' This is typical ASP.NET 2.0 programming.

In the middle of the code hides the AJAX Toolkit control NoBot (with its ID being 'myNoBot'). There are two properties, ResponseMinimumDelaySeconds and OnGenerateChallengeAndResponse, which need to be discussed. The  ResponseMinimumDelaySeconds property is set to 15 seconds, which means that within this period of time, if the "Submit" button is pressed, then the current action is suspected to be from a robot, as a result of which the submitting content is rejected and a warning message is thrown at the left bottom of the page.

Next: Property Related Value >>
 

More ASP.NET Articles
More By Xianzhong Zhu

Comments On: Handling Dynamic Images in ASP.NET 3.5 AJAX Applications

>>> Be the FIRST to comment on this article!