Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing.
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>
… 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 ?
RSS Feeds
Pingback from Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing. : Misfit Geek
Pingback from Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing. | I love .NET!
Pingback from Using the ASP.NET AJAX Editor Control to Implement In-Place Content Editing. | Nexo IT - Information Technology News
Thank you for submitting this cool story - Trackback from ravipendigg
Pingback from News Using the ASP.NET AJAX Editor Control to Implement In-Place … | Web 2.0 Designer
Thank you for submitting this cool story - Trackback from progg.ru
Pingback from Dew Drop – July 15, 2009 | Alvin Ashcraft's Morning Dew
Thank you for submitting this cool story - Trackback from DotNetShoutout
Daily tech links for .net and related technologies - July 14-17, 2009 Web Development ASP.NET Membership
Pingback from Using the ASP.NET AJAX Editor Control to Implement In-Place … | Webmaster Tools
Pingback from asp.net news (July 17th) - Jack is Here
Pingback from In-Place Editing using the ASP.NET AJAX Editor Control « Dev42 and Friends