Inline text editing is a technique which I really like. It can be used on
various places, displaying updatable widget title or displaying updateable user
status are just two of them. Still, it can be very confusing to the users if they aren't enough familiar with the application they are using. To make it more
user friendly, I added few features (dynamic CSS changing, mouse cursor
changing and tooltip) which purpose is to suggest the users that there is something
more behind the plain text which is initially shown to them.
Control is implemented as
ScriptControl
and all the logic behind it is made with JavaScript using
ASP.NET AJAX framework (full source code and a test web page
are provided at the end -
you will need VS2008 to build it). It doesn't extend any ASP.NET controls ("TextBox"
and "Label" are generated on the fly) and it allows you to get and store updated
text on the persistent medium (database for example) using .asmx web services.
In source code you can see how to:
- build an ASP:NET AJAX control with embedded .js file
- use ASP.NET AJAX DOM extensions
- dynamically invoke web services to asynchronously communicate with the
server
- process various DOM events like keypress, mouseover, mouseout, click and
blur
To use this control you only need to add one line of code in your .aspx page.
<inlEdit:InlineEditing ID="InlineEditing1" runat="server" TextId="100"
ServicePath="WebService.asmx" GetMethod="Load"
SaveMethod="Save" CssClass="lblClass"
LabelHoverCssClass="lblHoverClass"
TextBoxCssClass="txtbxCssClass"/>
This is just a first version. Potential improvements are:
- add a button next to "TextBox" do the same what pressing enter key does
- show progress indication when retrieving and updating text
- add MaxLength property (handle pasting and various keys)
- any other improvement
Source code (tested in IE7, FF2.0.0.12 and Opera 9.26.)