Microsoft Content Management Server Development : Validating the HtmlPlaceholderControl (part 1) - Retrieving the Current Value of the HtmlPlaceholderControl

1. Limitations of the ASP.NET Validation Controls

ASP.NET provides several time-saving techniques for performing client-side and server-side validation in the form of a set of validation controls. There is the RequiredFieldValidator for ensuring that mandatory fields are never left empty, the RangeValidator, which checks that the entered value lies within acceptable limits, the CompareValidator for comparing values entered in two different controls, and the RegularExpressionValidator, which checks if the value matches the pattern defined by a given regular expression.

With minimal effort, developers can make use of these controls to provide validation within web forms. For example, to check that a required field has not been left empty, simply drag and drop the RequiredFieldValidator from the toolbox onto the web form, set the name of the control to be validated and a friendly error message to display. With the validation control in place, the form may only be submitted when the field is filled in. Otherwise, an error message appears on the screen.

Unfortunately, validating MCMS placeholder controls isn’t as straightforward. Say, you have an HtmlPlaceholderControl that shouldn’t be left blank. You drag and drop a RequiredFieldValidator onto the template file and set its ControlToValidate property to that of the placeholder control. The template looks complete.

However, when you attempt to create a posting based on the template (or view an existing posting based on it), you get the following error message:

Control ‘HtmlPlaceholderControl1’ referenced by the ControlToValidate property of ‘RequiredFieldValidator1’ cannot be validated.

This technique does not work because the RequiredFieldValidator was designed for a limited subset of controls, including standard controls such as the TextBox, ListBox, DropDownList, and RadioButtonList, but not the HtmlPlaceholderControl, or any of the other MCMS placeholder controls for that matter.

2. The MCMSValidators Project

Let’s create a project file to store our code:

3. Validating the HtmlPlaceholderControl

The first control that we will build is a custom validation control that works with the HtmlPlaceholderControl. Our validator will ensure that some text has been entered into the control before the page can be saved. If the author forgets to fill in content, the page will not save and an error message appears on the screen.

The figure below shows how the control works when completed. The author has left HtmlPlaceholderControl1 empty. When he or she tries to save the page, an error message, This is a required field, appears next to the placeholder, instructing him or her to fill it out before proceeding.

3.1 Retrieving the Current Value of the HtmlPlaceholderControl

In order to validate the HtmlPlaceholderControl, we need to first read off its contents. There are two ways to get its stored value—we could use server-side or client-side scripts.

We could choose to use server-side scripts and get the value stored in the Html property of the HtmlPlaceholderControl when the page does a postback. However, performing server-side validation introduces several levels of complexity to the design. After each postback, a check has to be done to see if the page is valid. Should one placeholder control contain invalid content, you need to cancel all attempts to save the page and ensure that all placeholders remember their unsaved values. That’s a lot of work, which we will discuss in the section Implementing Server-Side Validation.

It’s much simpler to perform the validation using client-side JavaScript. The trick is to retrieve the value of the HTMLPlaceholderControl from the client-side ActiveX control. To do so, we will have to dig a little deeper into the HTML code sent to the browser in Authoring mode.

Here’s a snippet of the code sent to the browser in Authoring mode for an HtmlPlaceholderControl with the ID HtmlPlaceholderControl1. The key parts have been highlighted.

<span id="HtmlPlaceholderControl1" name="HtmlPlaceholderControl1">
. . . code continues . . .
<OBJECT
CODEBASE="/TropicalGreen/CMS/WebAuthor/Client/PlaceholderControlSupport/
NRDHtml.cab#Version=5,0,4484,0" ID="NCPHRICH_HtmlPlaceholderDefinition1"
CLASSID="CLSID:B33422AC-C567-4F7D-BB28-6583371EC4EE" width="300" height="300">
   <PARAM NAME="PostUrl" VALUE="/TropicalGreen/CMS/WebAuthor/Controls/
ActiveXHtmlEditControl/ActiveXUpload.aspx?NRMODE=Update&NRNODEGUID={1B5ED208-
75A5-4C86-A9FD-8A8B764FC805}&ph=About">
   <PARAM NAME="HTML" VALUE="">
   <PARAM NAME="CodePage" VALUE="65001">
   <PARAM NAME="Charset" VALUE="utf-8">
</OBJECT>
. . . code continues . . .
</span>

					  

The generated ID of the ActiveX control is the name of the underlying HtmlPlaceholder object pre-pended with NCPHRICH_. We will use this ID to access the ActiveX control object from client-side script. The value to be retrieved is stored in the second <PARAM> tag named HTML. To retrieve the current content of the control, we simply use the HTML property as shown in the following code (don’t worry about typing this in: we will show you how it’s injected to the code file later). The JavaScript here copies the content of an HtmlPlaceholderControl to a variable named content.

<script language="javascript">
  var content = document.all.NCPHRICH_HtmlPlaceholderDefinition1.HTML
</script>

I’m working with the Telerik MCMS placeholder control. How can I use client-side scripts to access its content?

The technique for using client-side scripts to access content in the Telerik MCMS placeholder control is similar. First, we need to get the ID of the object that contains the HTML. To do so, enter some text into the Telerik MCMS placeholder control and save the page. Go back to authoring mode and view the HTML source of the page using Notepad. Press Ctrl+F and search for the text that you have just entered. Take note of the ID of the <div> tag that holds the content, which in v2.12 of the control resembles this:

radEditorContainer (ID of control)_AuthoringModeControlsContainer_Editor (ID
							of Control)_AuthoringModeControlsContainer

					  

For a placeholder control with the ID RadEditorPlaceholderControl1, the JavaScript that retrieves its content is as follows:

<script language="javascript">

var content =
document.all.radEditorContainerRadEditorPlaceholderControl1_AuthoringModeC
ontrolsContainer_EditorRadEditorPlaceholderControl1_AuthoringModeControlsC
ontainer.innerHTML;

</script>

Note that in different versions of the control, the ID given to the <div> tag surrounding the content varies. You will have to check the generated source code to get the ID of <div> tag for the particular version you are working with.