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.

7-9-2009 10-49-53 AM 

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.

7-9-2009 10-50-39 AM

Now some rich text entry.

7-9-2009 10-52-33 AM

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 ….

7-9-2009 10-52-54 AM

Presto.

Here are a few implementation details …..

First, lets look at the control in design view.

7-9-2009 11-12-16 AM

… 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>

… and the code.

   1:  using System;
   2:  using System.Collections.Generic;
   3:  using System.Linq;
   4:  using System.Web;
   5:  using System.Web.UI;
   6:  using System.Web.UI.WebControls;
   7:   
   8:  public partial class InPlaceRichTextEditorControl : System.Web.UI.UserControl
   9:  {
  10:   
  11:      private int _ContentHeight;
  12:      public int ContentHeight
  13:      {
  14:          get
  15:          {
  16:              return _ContentHeight;
  17:          }
  18:          set
  19:          {
  20:              _ContentHeight = value;
  21:          }
  22:      }
  23:   
  24:      private int _ContentWidth;
  25:      public int ContentWidth
  26:      {
  27:          get
  28:          {
  29:              return _ContentWidth;
  30:          }
  31:          set
  32:          {
  33:              _ContentWidth = value;
  34:              ContentDisplayPanel.Width = _ContentWidth;
  35:              ContentEditPanel.Width = _ContentWidth;
  36:          }
  37:      }
  38:   
  39:      protected void Page_Load(object sender, EventArgs e)
  40:      {
  41:  
  42:      }
  43:   
  44:      protected void Edit_ImageButton_Click(object sender, ImageClickEventArgs e)
  45:      {
  46:          ContentEditor.Content = ContentLabel.Text;
  47:          EditInPlace_MultiView.SetActiveView(EditView);
  48:      }
  49:   
  50:   
  51:   
  52:      protected void Abort_ImageButton_Click(object sender, ImageClickEventArgs e)
  53:      {
  54:          EditInPlace_MultiView.SetActiveView(DisplayView);
  55:      }
  56:   
  57:      protected void Save_ImageButton_Click(object sender, ImageClickEventArgs e)
  58:      {
  59:          ContentLabel.Text = ContentEditor.Content;
  60:          EditInPlace_MultiView.SetActiveView(DisplayView);
  61:      }
  62:      protected void ContentEditor_ContentChanged(object sender, EventArgs e)
  63:      {
  64:   
  65:      }
  66:  }

And yes, I think this is NOT FINISHED.

Thoughts, suggestions ?

Technorati Tags: ,,NETOOP,
Mega World News Facebook Twitter Myspace Friendfeed Technorati del.icio.us Digg Google Yahoo Buzz StumbleUpon Weekend Joy