.NET Daily

How to make NicEdit work inside Update Panel in ASP.NET

Introduction

Darius

Darius

Darius Dumitrescu is a creative Senior CMS Consultant with in depth .NET knowledge, focused on Web Development and Architecture Design.


LATEST POSTS

My View on the Life cycle of a Fixed Cost Web Project 01st July, 2018

How to Deliver Accurate Project Status Reports 21st April, 2018

Microsoft ASP.NET

How to make NicEdit work inside Update Panel in ASP.NET

Posted on .

Introduction

When is wrapped with Update Panel, every WYSIWYG editor based on Javascript has the same problems under ASP.NET:

  1. You can’t access the generated markup at postback because the code is usually generated inside a div and, as a consequence, the viewstate is empty.
  2. After postback, the editor fails to load again because the script does not recognize a page reload in update panel and therefore the editor initialization is not triggered.

Please follow the tutorial below in order to make NicEdit WYSIWYG editor work inside UpdatePanel.

Tutorial

Step 1) Add the following javascript functions into your page:

var prm = Sys.WebForms.PageRequestManager.getInstance();
 
prm.add_endRequest(function () {
 
   new nicEditor({ iconsPath: '/Scripts/nicEdit/nicEditorIcons.gif' }).panelInstance('<%=txtSample.ClientID %>');
   $(".nicEdit-main").html($("#<%=hdnNicEdit.ClientID %>").val());
});
 
bkLib.onDomLoaded(function () {
      new nicEditor({ iconsPath: '/Scripts/nicEdit/nicEditorIcons.gif' }).panelInstance('<%=txtSample.ClientID %>');
      $(".nicEdit-main").html($("#<%=hdnNicEdit.ClientID %>").val());
});
 
function SaveContent() {
    $("#<%=hdnNicEdit.ClientID %>").val($(".nicEdit-main").html());
}

The idea is that on every postback we need to make a backup of the information from NicEdit editor and place it into a hiddenfield from the page. We do this because the hiddenfield control keeps its viewstate during postbacks. The textbox also keeps its viewstate during postbacks but not when it’s altered by NicEdit script.

Code Explanation

The prm.add_endRequest is used to register again the NicEdit editor after the postback inside UpdatePanel.
On the following line we copy the information from the hiddenfield back into the NicEdit container:

$(".nicEdit-main").html($("#<%=hdnNicEdit.ClientID %>").val());

The line below does the action backwards:

$("#<%=hdnNicEdit.ClientID %>").val($(".nicEdit-main").html());

We use the SaveContent() function to decorate the Save button in order to back up the markup during submit.

My markup looks like this:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
            <asp:TextBox ID="txtSample"  TextMode="MultiLine" Width="500px" runat="server"></asp:TextBox>
            <asp:HiddenField ID="hdnNicEdit" runat="server" />
            <asp:Button ID="btnSubmit" runat="server" Text="Button" OnClientClick="SaveContent();" onclick="btnSubmit_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

You can download a working copy of my code from below.

Attachments

Darius

Darius

Darius Dumitrescu is a creative Senior CMS Consultant with in depth .NET knowledge, focused on Web Development and Architecture Design.

There are no comments.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

View Comments (0) ...
Navigation