Delving Deeper into Constructing ASP.NET AJAX-based Applications - Using the ConfirmButton Extender Control When Necessary
(Page 4 of 4 )
In real scenarios and as a general rule, for some important operations, such as deleting some record or when users wish to give up filling some web form, the system should pop up an unambiguous message to prompt users to say Yes or No; otherwise some mishandling would lead to fatal error. With the ConfirmButton Extender Control provided by the MS Control Toolkit, when a user is about to submit some data which will trigger a post back we can easily pop up a confirmable JavaScript dialog to let the user further affirm; and, only after the user clicks the "OK" button can the post back take place, or else the submission would be canceled.
Now let's research into two places in JSSK appropriate to enhance by using the ConfirmButton extender control.
1. Canceling the Modification with Personal Resume
The original page looks like the above Figure 2. Though with two buttons, "Save" and "Cancel," on the page, clicking the "Cancel" button would not trigger some further affirmation prompts. Therefore, once users do something wrong, they can not take back what they just did.
Now, let's ameliorate this with the ConfirmButton control. First, locate the source inside file jobseekerpostresume.aspx (here we only allow for the "Cancel" button):
<asp:Button ID="btnCancel" Runat="server" Text="Cancel" OnClick="btnCancel_Click" CausesValidation="False" />
Next, let's add one line right below the above line, as follows:
<asp:Button ID="btnCancel" Runat="server" Text="Cancel" OnClick="btnCancel_Click" CausesValidation="False" />
<ajaxToolkit:ConfirmButtonExtender ID="cbe" runat="server" ConfirmText="Leave this page without saving your changes?" TargetControlID="btnCancel" />
Easily, we bind the ConfirmButtonExtender control to the "Cancel" button via the TargetControlID property. That's okay. Now, press F5 to start JSSK, and use the "alok" username (the job seeker) to register into JSSK, and when you click the "Cancel" button in the above page you will see an ordinary affirmation dialog box to let you further affirm the current cancel operation. That's much safer and friendlier.
2. Deleting a Post
Now let's discuss the second case suitable for modification with ConfirmButtonExtender.
As one of the functions to manipulate the posts, the employers are able to delete some post. This is accomplished through the AddEditPosting.aspx page, whose runtime snapshot is shown in Figure 3.
Figure 3-the pre-modified snapshot for page AddEditPosting.aspx.
As illustrated from the above figure, there are three buttons lining up with a little horizontal padding between each of them. And what's more, there is no related affirm hint appearing when the employers click the "Delete" button. This kind of design will also easily result in problems for users. Here, we'd better take out our ConfirmButton extender control to reconstruct this.
Here, there's a little trouble in modifying ASP.NET DetailsView since we can not separate one button from another in coding mode to get the reference to the "Delete" button. So, we have to use some tips to convert the <asp:CommandField> into a <asp:TemplateField>. For this, switch to the design view of the AddEditPosting.aspx page, select DetailsView1 on it, and then left-click the suspension points on the right of the "Fields" item on the Properties window. In the subsequent dialog box "Fields" click the "Command Field" item (the last item in the ListBox on the lower left corner), and then click the "Convert this field into a TemplateField" hyperlink on the lower right corner on the dialog box. In this way, we can make a successful conversion.
The subsequent operation is quite similar -- locate the "Delete" button and add the follow line after it:
<ajaxToolkit:ConfirmButtonExtender ID="cbe" runat="server" TargetControlID="LinkButton3" ConfirmText="Are you sure you want to delete this post?" />
Here, we still use the TargetControlID property of ConfirmButtonExtender to succeed in binding the ConfirmButtonExtender control to the "Delete" button.
Please check back next week for the conclusion to this article.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 4 
