mscommunity.net

Interactive mscommunity.net online activities
Signed in as anonymous | Edit Profile | Sign out | Help
in Search

Weblog :: Boris Ševo

Sporadic posts about my interests, e.g. software development (mostly .NET), technology in general and some occasional rant.

Inline text editing control in ASP.NET AJAX

Inline text editingInline 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.)

Comments

No Comments

Leave a Comment

(required) 
(optional)
(required) 
Submit
Powered by Community Server (Commercial Edition), by Telligent Systems