In our project we are calling dialog boxes two ways. For the ones with static text and buttons we generate the dialog in a script and get the text from hidden spans in front-end. When using html elements inside the text from the span (i.e <br />), it renders correctly.
But when we create the same setup in code behind, it doesn't interpret the html.
This code works:
var okClicked = false;
var control;
$(".confirmAction").unbind('click');
$(".confirmAction").click(function (e) {
var control = $(this);
let title = $(this).find('.confirmTitle').text();
let info = $(this).find('.confirmInfo').html();
if (!title.trim()) {
title = "Er du sikker?"
}
if (!info.trim()) {
info = "Vennligst bekreft at du vil gjennomføre denne operasjonen."
}
if (!okClicked) {
$("<div class='consioDialogContainer'><i class='fa fa-5x fa-exclamation-triangle consioDialogIcon'></i><h2>" + title + "</h2><p>" + info + "</p></div>").dialog({
autoOpen: true,
modal: true,
dialogClass: 'consioConfirmDialog',
width: 500,
minHeight: 300,
top: '50%',
left: '50%',
title: title,
open: function (event, ui) {
$('.consioConfirmDialog').find('.consioButtonCancel').focus();
},
buttons: [
{
text: 'Fortsett',
'class': 'consioButtonOK',
click: function () {
try {
showInprogress();
}catch (e){
}
okClicked = true;
control.trigger('click');
$(this).dialog("close");
}
}, {
text: 'Avbryt',
'class': 'consioButtonCancel',
click: function () {
$(this).dialog("close");
}
}
],
Close: function () {
$(this).dialog("close");
}
});
return false;
}
console.info('We may post back now!!!');
okClicked = false;
return true;
});
This one does not:
Private Function BuildScript() As String
Dim script As New StringBuilder()
script.AppendLine("<script type=""text/javascript"">")
script.AppendLine($" var msgboxResult = ''")
script.AppendLine($" function {Me.ClientID}() {{")
script.AppendLine($" $('<div class=""consioDialogContainer""><i class=""fas fa-5x {MessageBoxIcon} consioDialogIcon""></i><h2>{MessageBoxTitle}</h2><p>{MessageBoxText.Replace("'", "\'")}</p></div>').dialog({{")
script.AppendLine($" modal: true,")
script.AppendLine($" title: '{MessageBoxTitle}',")
script.AppendLine($" zindex: 10000,")
script.AppendLine($" autoOpen: true,")
script.AppendLine($" width: '500',")
script.AppendLine($" minHeight: 300,")
script.AppendLine($" top: '50%',")
script.AppendLine($" left: '50%',")
script.AppendLine($" dialogClass: '{If(MessageBoxType <> MessageBoxTypeClass.None, MessageBoxType.ToString(), "consioInfoDialog")}',")
script.AppendLine($" resizable: false,")
script.AppendLine($" open: function (event, ui) {{ $('.{If(MessageBoxType <> MessageBoxTypeClass.None, MessageBoxType.ToString(), "consioInfoDialog")}').find('.{FocusButtonClass()}').focus();}},")
script.AppendLine($" buttons: [")
Select Case MsgBoxButton
Case VbMsgBoxButton.vbOKOnly
script.AppendLine(OKButton())
Exit Select
Case VbMsgBoxButton.vbOKCancel
script.AppendLine($"{OKButton()},")
script.AppendLine(CancelButton())
Exit Select
Case VbMsgBoxButton.vbAbortRetryIgnore
script.AppendLine($"{AbortButton()},")
script.AppendLine($"{RetryButton()},")
script.AppendLine(IgnoreButton())
Exit Select
Case VbMsgBoxButton.vbRetryCancel
script.AppendLine($"{RetryButton()},")
script.AppendLine(CancelButton())
Exit Select
Case VbMsgBoxButton.vbYesNo
script.AppendLine($"{YesButton()},")
script.AppendLine(NoButton())
Exit Select
Case VbMsgBoxButton.vbYesNoCancel
script.AppendLine($"{YesButton()},")
script.AppendLine($"{NoButton()},")
script.AppendLine(CancelButton())
Exit Select
End Select
script.AppendLine($" ],")
script.AppendLine($" close: function(event, ui) {{ $(this).remove();{ExitScript}; }}".Replace(";;", ";"))
script.AppendLine($" }});")
script.AppendLine($"}}")
'Str = (((((Str() & " Dim msgboxResult" & ChrW(10) & ChrW(9) & ChrW(9) & "msgboxResult = msgbox(""") & Me.MessageBoxText & """") & Me.BuildMsgboxAttributeConstants) & Me.BuildMsgboxTitle & ")") & ChrW(10) & Me.BuildReturnScript)
If Me.ShowOnWindowOnload Then
script.AppendLine($" jQuery(function($){{")
script.AppendLine($" {Me.ClientID}();")
' the two lines below removes disabled classes for buttons that, for some reason, looks disabled by default.
script.AppendLine($" $('.ui-state-disabled').removeClass('ui-state-disabled');")
script.AppendLine($" $('.ui-button-disabled').removeClass('ui-button-disabled');")
script.AppendLine($" }});")
End If
Return script.AppendLine("</script>").ToString()
End Function
Protected Overrides Sub Render(output As HtmlTextWriter)
If Me.Enabled Then
#Disable Warning BC40000 ' Type or member is obsolete
Parent.Page.ClientScript.RegisterStartupScript(Page.GetType(), ID, BuildScript())
#Enable Warning BC40000 ' Type or member is obsolete
output.Write(BuildScript())
End If
End Sub
I have tried a few things with MessageBoxTitle, but none of it matters. I have tried only returning the value without any replaces and I have tried encoding it.
Public Property MessageBoxText As String
Get
Return _messageBoxText
End Get
Set(value As String)
'_messageBoxText = WebUtility.HtmlEncode(value)
_messageBoxText = value?.Replace("<", "<")?.Replace(">", ">")?.Replace(ChrW(13) & ChrW(10), "<br />")?.Replace(ChrW(10), "<br />")?.Replace(ChrW(13), "<br />")
End Set
End Property
Basically, everything works as it should when generating the script from behind, except that it doesn't interpret the html tags. So when I add this text:
MsgBox("<i>Endringer ikke lagret!<i/> <br>Dere bruker Visma eller et annet system som har begrensinger på antall tegn noen felter kan ha. <br />Følgende felter er for lange: " & res)
It doesn't render the italics and line breaks, but shows it as <i>Endringer ikke lagret!<i/> <br>Dere bruker Visma eller et annet system som har begrensinger på antall tegn noen felter kan ha. <br />Følgende felter er for lange:.
When I add the same text to the span "confirmInfo" in front-end it renders correctly.
Any suggestions or ideas would be appreciated as I couldn't find anything about this particular case when searching online.