Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing.

July 14, 2009 | Comments | ASP.NET

In-Place editing is a slick feature for managing some of a web sites content.

I’ve mocked up a demo of In-Place editing using the new ASP.NET Ajax Control Toolkit’s Editor control and the ASP.NET Multi-View control.

Also, I’m implementing this as a User Control so it can be easily and widely used throughout my project.

Here’s how it works.

Note the little “Pencil” on the top / right of the content are. If you hover over it you get an edit hint.

When you click on it you enter edit mode.

Note the Ajax style behavior accomplished by a combination of using ASP.NET’s MultiView control and ASP.NET Ajax’s UpdatePanel.

Now some rich text entry.

Clicking on the Floppy Disk Icon “Saves” the new content (actual persistence is not yet implemented) and clicking on the X cancels.

Hovering over the icons provides guidance. Note that the Editor Sizes with the text area.

Click save and ….

Presto.

Here are a few implementation details …..

First, lets look at the control in design view.

… the markup

   1:  <asp:UpdatePanel ID="InPlaceEditorCOntrolUpdatePanel" runat="server">

   2:  <ContentTemplate>

   3:  <asp:MultiView ID="EditInPlace_MultiView" runat="server" ActiveViewIndex="0">

   4:     <asp:View ID="DisplayView" runat="server">

   5:         <asp:Panel ID="ContentDisplayPanel" runat="server">

   6:         <p style="text-align: right">

   7:            <asp:ImageButton ID="Edit_ImageButton" runat="server" Height="16px"

   8:                             ImageUrl="~/InPlaceEditorControl/Images/Edit_Icon.png"

   9:                             Width="16px"

  10:                             ToolTip="Click to Enter Edit Mode"

  11:                             onclick="Edit_ImageButton_Click" />

  12:         </p>

  13:         <asp:Label ID="ContentLabel" runat="server" Width="100%"></asp:Label>

  14:         </asp:Panel>

  15:     </asp:View>

  16:     <asp:View ID="EditView" runat="server">

  17:         <asp:Panel ID="ContentEditPanel" runat="server">

  18:         <p style="text-align: right">

  19:            <asp:ImageButton ID="Save_ImageButton" runat="server" Height="16px"

  20:                             ImageUrl="~/InPlaceEditorControl/Images/Save_Icon.png"

  21:                             Width="16px"

  22:                             ToolTip="Click to SAVE and Exit Edit Mode."

  23:                             onclick="Save_ImageButton_Click"

  24:                             />

  25:            <asp:ImageButton ID="Abort_ImageButton" runat="server" Height="16px"

  26:                             ImageUrl="~/InPlaceEditorControl/Images/Abort_Icon.png"

  27:                             Width="16px"

  28:                             ToolTip="Click to Exit Edit Mode Without Saving."

  29:                             onclick="Abort_ImageButton_Click" />

  30:         </p>

  31:         <act:Editor ID="ContentEditor" runat="server" Width="100%" Height="100%"

  32:                 oncontentchanged="ContentEditor_ContentChanged" />

  33:         </asp:Panel>

  34:     </asp:View>

  35:  </asp:MultiView>

  36:  </ContentTemplate>

  37:  </asp:UpdatePanel>

Comments

There are 27 comments for this post.

Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing. : Misfit Geek on July 14, 2009 9:42 am

RE: Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing.

Pingback from Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing. : Misfit Geek
Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing. | I love .NET! on July 14, 2009 10:08 am

RE: Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing.

Pingback from Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing. | I love .NET!
Gilad on July 14, 2009 10:31 am

Great post thank you.

Is there a way to add an image upload or attachment inside the editor text? just like ms word?
Joe Stagner on July 14, 2009 10:33 am

There is not, but as I eveolve the user control there are two additions that I intend to make.

1.) Suport a choice of different HTML Editors (FTB, etc.)

2.) Suport a CUSTOM version of the ACT COntrol – to which we could add the functionality you suggest.
Gilad on July 14, 2009 10:40 am

OK thanks
Joshua on July 14, 2009 11:38 am

I’m curious to see what you come up with as far as supporting other HTML editors. I gave up on trying to get them to work in an UpdatePanel, but hopefully you’ll have better luck.

I think your example should have UpdateMode="Conditional" for your UpdatePanel.

It’s nice to see that the ASP.NET AJAX controls are still being developed.
Hemen on July 14, 2009 11:59 am

When I click on the pencil icon on the demo site it takes some time for the editor to load about 30 seconds or so. Till that time there is no visual notification that there is some processing being done. May be a visual icon of a spinning wheel or the clock can give an idea to the user that he/she needs to wait.
Hemen on July 14, 2009 12:01 pm

Also noticed that the control does not come up properly in IE6
Joe Stagner on July 14, 2009 12:42 pm

Hemen – already implemented in my working copy

As to IE 6, how DOES it "come up" ?
Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing. | Nexo IT - Information Technology News on July 14, 2009 1:22 pm

RE: Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing.

Pingback from Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing. | Nexo IT – Information Technology News
Vijay on July 14, 2009 2:46 pm

It’s nice to see that the ASP.NET AJAX controls.

Is it working for all the browsers like opera, firefox 2.0 or greater, i.e.8 etc?
Vijay on July 14, 2009 2:48 pm

How to apply a styles(CSS function)?
sosmary on July 14, 2009 3:35 pm

Joe,

Thanks for the neat demo. Ajax rocks!!!
Khaled Diab on July 14, 2009 5:27 pm

Great work, Joe

but, When shall we start to design and write a code ?
Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing. : Misfit Geek on July 14, 2009 6:30 pm

RE: Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing.

Thank you for submitting this cool story – Trackback from ravipendigg
News Using the ASP.NET AJAX Editor Control to Implement In-Place … | Web 2.0 Designer on July 14, 2009 6:34 pm

RE: Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing.

Pingback from News Using the ASP.NET AJAX Editor Control to Implement In-Place … | Web 2.0 Designer
Hemen on July 14, 2009 6:46 pm

When I tried in the morning all i could see is the save and ‘X’ icon buttons on the top right corner and two lines.. When I tried some time back it does show the control but the height is not identical to that in Firefox.

Screenshot for IE6 : i648.photobucket.com/…/untitled.png
Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing. : Misfit Geek on July 14, 2009 10:53 pm

RE: Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing.

Thank you for submitting this cool story – Trackback from progg.ru
Ahmed on July 15, 2009 1:05 am

It looks great tool

Thanks for the demo, I hope it will work with all browsers
Dew Drop – July 15, 2009 | Alvin Ashcraft's Morning Dew on July 15, 2009 8:31 am

RE: Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing.

Pingback from Dew Drop – July 15, 2009 | Alvin Ashcraft’s Morning Dew
Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing. : Misfit Geek on July 15, 2009 11:48 am

RE: Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing.

Thank you for submitting this cool story – Trackback from DotNetShoutout
Pat Woods on July 15, 2009 7:16 pm

For the record:

Firefox 3.5 took about 20 secs

Chrome 2.0 didn’t work, after about 5 secs the disk and cross icons show with what looks like the top edge only of the control showing

Opera 9.64 took about 18 secs

Safari 4.0 same as Chrome.

I guess these would be called MAJOR clients as per the original spec.
Daily tech links for .net and related technologies - July 14-17, 2009 on July 16, 2009 3:26 am

RE: Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing.

Daily tech links for .net and related technologies – July 14-17, 2009 Web Development ASP.NET Membership
Using the ASP.NET AJAX Editor Control to Implement In-Place … | Webmaster Tools on July 16, 2009 3:18 pm

RE: Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing.

Pingback from Using the ASP.NET AJAX Editor Control to Implement In-Place … | Webmaster Tools
asp.net news (July 17th) - Jack is Here on July 16, 2009 9:37 pm

RE: Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing.

Pingback from asp.net news (July 17th) – Jack is Here
bennyb on July 18, 2009 10:39 am

UpdatePanel?

Are you kidding me?

I just lost faith in this project
In-Place Editing using the ASP.NET AJAX Editor Control « Dev42 and Friends on July 27, 2009 7:02 pm

RE: Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing.

Pingback from In-Place Editing using the ASP.NET AJAX Editor Control « Dev42 and Friends