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 ?
Technorati Tags:
Microsoft,
ASP.NET,NETOOP,
AJAX
)
