.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

Tips for Effective IT Projects Estimates 23rd December, 2017

Tips about Project Status Reports 05th October, 2017

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:

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:

The line below does the action backwards:

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

My markup looks like this:

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.

View Comments (0) ...
Navigation