Today, I will have a new article on inline-edit control using ASP.NET 2.0 AJAX Extensions published on www.aspalliance.com. That script I wrote was based on a script written by native AJAX. It was simply an ASP.NET 2.0 AJAX Component and not a real control.
I have created lately a new ASP.NET 2.0 AJAX Control called InlineEditLabel control. This is simply an ASP.NET 2.0 AJAX Custom Server Control that you can add to your toolbox and drag it to the ASPX page whenever you need to provide an inline-edit area(s) on your pages.
The idea of this control is that, initially the control displays normal text. When you click on the text, then the text displayed will be now placed inside a textarea with two buttons: Update and Cancel buttons.
Clicking on the update button, fires a client side event handler that allows developer to handle processing the entered text and the cancel button will put the control back to its original state.
All what you need is download this sample application which contains the InlineEditLabel.dll and a sample page that shows how to use the control. This control runs under .NET 3.5 and VS 2008 Beta 2.
To explain a bit about the control, let us check this sample:
<cc1:InlineEditLabel
ID="InlineEditLabel1"
runat="server"
Text="This is a default text to be changed during the demo!!"
ToolTip="Click here to edit"
CssClass=""
CssHoverClass="hover"
UpdateButtonText="Update"
CancelButtonText="Cancel"
UpdateEvent="OnUpdate"
/>
As you can see, the custom control is called InlineEditLabel. It has the following properties:
ID: ID of the control
Text: This is the text to be shown when the control is to be rendered.
Tooltip: This is the text that is displayed when the mouse gets over the editable text.
CssClass: This is a css class to apply to the editable label represented by "div" element.
CsshoverClass: This is a css class that is applied to the control when the mouse gets over its content.
UpdateButtonText: This is the text shown on the update button that is called to update the entered text.
CancelButtonText: This is the text shown on the cancel button that is used to cancel an update.
In addition, there is one client side event that you need to implement which is UpdateEvent. This event handler is fired when you press the update button to process the entered text.
Now let us add some implementation on the UpdateEvent:
<script language="javascript">
function OnUpdate(sender, args)
{
alert(args.get_data());
$find('<%= InlineEditLabel1.ClientID %>').set_originalText(args.get_data() + " -- ");
$find('<%= InlineEditLabel1.ClientID %>')._renderOriginalContents();
}
</script>
As you can see in the handler above, the args parameters holds the text entered into the textarea. You can grab that text, either perform:
. WebRequest
. Call page method
. Call Webservice method
to reflect the changes on the server.
When the control is in the processing state, it shows a message "saving ...". So it is recommended that you reset the text you want in the control after processing the text entered on the server. This can be easily done by setting the originalText property and calling the _renderOriginalContents() method.
Hope you enjoyed this new control, if you have any questions, please let me know.
Regards
Tags: AJAX-ATLAS