Using ValidatorCalloutExtender
Someone has a problem when using ValidatorCalloutExtender in DotNetNuke module. Hopefully my article can solve his problem.
Ok, let's begin.
First, create your new module in Visual Studio using your favourite technique. Or maybe just load your existing module source into Visual Studio. Suppose that i have a name of my module is "SimpleHTML". Then i have one SimpleHTMLModule.ascx.
The next step is, if you want to use ASP .NET AJAX functionality then the easiest way is modify your control (.ascx) from DotNetNuke Control Panel and add Support Partial Rendering feature like below :
Go to Host --> Module Definition . Then choose your module that you want to add ajax functionality.
Choose your control that you want to add partial rendering feature. Mine is SimpleHTMLModule.ascx. Then check Supports Partial Rendering checkbox.
Then, design your UI like below. I add these controls in my UI design :
- One UpdatePanel control
- One Panel control
- One Button control
- Two TextBox control
- Two RequiredFieldValidator control
- Two ValidatorCalloutExtender control
I'll explain it. First, we add one UpdatePanel control. Then add one Panel control. Inside Panel control, add two TextBox control, two RequiredFieldValidator control, and two ValidatorCalloutExtender control. Change their properties like below :
- UpdatePanel --> nothing changes
- Panel --> Add Style attribute to Style='position: relative;'
- Button --> Text=Click Me, ValidationGroup=vg1
- TextBox1 --> ValidationGroup=vg1
- TextBox2 --> ValidationGroup=vg1
- RequiredFieldValidator1 --> ControlToValidate=TextBox1, Display=None, ValidationGroup=vg1, ErrorMessage=Fill your UserId
- RequiredFieldValidator2 --> ControlToValidate=TextBox2, Display=None, ValidationGroup=vg1, ErrorMessage=Fill also your User name
- ValidatorCalloutExtender1 --> ID=vcalUserId, TargetControlID=RequiredFieldValidator1
- ValidatorCalloutExtender2 --> ID=vcalUserId, TargetControlID=RequiredFieldValidator2
That's it ! Now you can use ValidatorCalloutExtender in your DotNetNuke module. This is the screenshot of my module.
The trick is when adding one Panel with Style='position:relative;' into UpdatePanel. If you don't do that, your ValidatorCalloutExtender will shown in wrong position.
This is the complete code in SimpleHTMLModule.ascx :
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="SimpleHTMLModule.ascx.vb" Inherits="DesktopModules_SimpleHTML_SimpleHTMLModule" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Click Me" ValidationGroup="vg1" /><br />
<br />
User Id :
<br />
<asp:Panel ID="pnlDummy" style='position: relative;' runat='server'>
<asp:TextBox ID="TextBox1" runat="server" ValidationGroup="vg1"></asp:TextBox><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
ErrorMessage="User Id should not be blank !" ValidationGroup="vg1" Display="None"></asp:RequiredFieldValidator>
<cc1:ValidatorCalloutExtender ID="vcalUserId" runat="server" TargetControlID="RequiredFieldValidator1">
</cc1:ValidatorCalloutExtender>
<br />
User Name :<br />
<asp:TextBox ID="TextBox2" runat="server" ValidationGroup="vg1"></asp:TextBox><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2"
ErrorMessage="User Name also should not be blank" ValidationGroup="vg1" Display="None"></asp:RequiredFieldValidator>
<cc1:ValidatorCalloutExtender ID="vcalUserName" runat="server" TargetControlID="RequiredFieldValidator2">
</cc1:ValidatorCalloutExtender>
</asp:Panel>
<br />
<br />
<br />
</ContentTemplate>
</asp:UpdatePanel>
Hope this help.
UPDATE: You can remove UpdatePanel control in the code above. When you check the Support Partial Rendering is the same like put your module inside one UpdatePanel control by DNN. So the control will work. Here, I justr demonstrate to make it clear.