Resources: WebForm, VS 2010, .Net 4.0, SQL Server 2008 R2, IE 11 & Chrome 36.0.1985.125 m.
The web form is meant to create email notifications. Therefore, I have a textbox
with an ajax HtmlEditorExtender
attached to it. After the user adds/edits the html text, that is supposed to be the email body, it is saved in a varbinary(max)
column in the db.
Debug
In debug mode, I noticed that when the user clicks the save button on the form, I get a JS error (although I don't have any js script in the form at all!) :
This error comes from the HTMLEditorExtender
as when I remove this control, I no longer get any errors on the page when I submit the form.
Pressing Continue, in debug, I don't get any other unexpected behavior and the text is saved in the db in the proper html format.
Production
When the site is published, I get this kind of weird behavior (user enters the following text):
After I click Save the first time:
After I click save several times w/o changing anything to the text:
This happens ONLY in IE (tested in IE 11, I don't know if it is the same in previous versions of IE). In Google Chrome it works ok, but in my company the only allowed browser is IE so Chrome won't do me any good here.
Here are some code snippets:
Aspx:
control:
<td colspan="10" style="padding: 5px; margin: 5px; width:100%; overflow:auto;" > <asp:TextBox ID="tbBody" runat="server" Text="" TextMode="MultiLine" Rows="30" Columns="118" ></asp:TextBox> <br /> <ajaxToolkit:HtmlEditorExtender ID="htmlEditorExtender1" runat="server" TargetControlID="tbBody" DisplaySourceTab="true" > <Toolbar> <ajaxToolkit:FontNameSelector /> <ajaxToolkit:HorizontalSeparator /> <ajaxToolkit:FontSizeSelector /> <ajaxToolkit:Bold /> <ajaxToolkit:Italic /> <ajaxToolkit:Underline /> <ajaxToolkit:StrikeThrough /> <ajaxToolkit:JustifyLeft /> <ajaxToolkit:JustifyCenter /> <ajaxToolkit:JustifyRight /> <ajaxToolkit:JustifyFull /> <ajaxToolkit:InsertOrderedList /> <ajaxToolkit:InsertUnorderedList /> <ajaxToolkit:RemoveFormat /> <ajaxToolkit:BackgroundColorSelector /> <ajaxToolkit:ForeColorSelector /> <ajaxToolkit:Indent /> <ajaxToolkit:Outdent /> <ajaxToolkit:InsertHorizontalRule /> <ajaxToolkit:HorizontalSeparator /> </Toolbar> </ajaxToolkit:HtmlEditorExtender>
page:
Page Language="C#" AutoEventWireup="false" CodeFile="Notification.aspx.cs" Inherits="RulesManagement_Notification" Title="Notification" MasterPageFile="~/MasterPage.master" ValidateRequest="false"
Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit"
CS:
save method (when passing the text as a parameter into the db):
SqlParameter prmBody = new SqlParameter("@BODY", SqlDbType.NVarChar, -1); prmBody.Value = tbBody.Text; sqlSaveNotif.Parameters.Add(prmBody);
From what I can tell the actual text of the textbox it's being changed by some sort of weird behavior of this HTMLEE but only in IE. I am open to using any other control out there that will give me the same functionality as this HTMLEE. I've tried the FreeTextBox control but I can't make it work in IE, it only works in Chrome :). Is there any out of the box (html or asp.net) control that would help me in this case? If not, how can I make the Ajax's HTMLee control to work correctly in IE?