Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

FormDecorator / Validation and Login Controls

Toggle FormDecorator

RequiredFieldValidator and ValidationSummary controls.




Login, LoginName, LoginStatus and LoginView controls

 
This is displayed if the user is NOT logged in!

ChangePassword

Change Your Password

CreateUser

Sign Up for Your New Account


  • This example shows how RadFormDecorator can be used along with Validation and Login controls. RadFormDecorator will style any standard elements like CheckBox, Textarea, Fieldset, Input, Label, H4, etc. in these controls' templates and will apply visual effects like mouse over and rounded corners thus providing better visual experience.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.FormDecorator.ValidationControls.DefaultCS" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag runat="server" ID="Headtag1"></qsf:HeadTag>
        <style type="text/css">
            .vlaidationSummary
            {
                font-family: "Segoe UI" ,Arial,Helvetica,sans-serif;
                font-size: 12px;
            }
            .validators input
            {
                margin-bottom: 3px;
            }
            .groupWrapper
            {
                width: 45%;
                margin: 0 2%;
                height: 350px;
                float: left;
            }
            .fieldRow
            {
                margin-top: 4px;
            }
            .fieldRow label
            {
                width: 140px;
                display: block;
                float: left;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="form1" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="c#" />
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

        <div class="vlaidationSummary">
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
                <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" />

                <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Enabled="true" Title="Toggle FormDecorator"
                    Expanded="true" HorizontalAlign="Center" Width="100%">
                    <asp:RadioButtonList ID="toggleDecorator" runat="server" AutoPostBack="true" RepeatDirection="Horizontal" style="margin: 0 auto;">
                        <asp:ListItem Text="Enable FormDecorator" Value="1" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Disable FormDecorator" Value="0"></asp:ListItem>
                    </asp:RadioButtonList>
                </qsf:ConfiguratorPanel>
                <div class="groupWrapper">
                    <div class="validators">
                        <qsf:InformationBox ID="InformationBox1" runat="server" Title="RequiredFieldValidator and ValidationSummary controls.">
                        </qsf:InformationBox>
                        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RFV1" runat="server" ErrorMessage="Required Field Validator Error Message."
    ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
                        <br />
                        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Wrong Input"
    ControlToValidate="TextBox2"></asp:RequiredFieldValidator>
                        <br />
                        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" Display="Dynamic"
    ErrorMessage="Required Field Validator Error Message." ControlToValidate="TextBox3"></asp:RequiredFieldValidator>
                        <br />
                        <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="Error Message"
    ControlToValidate="TextBox4"></asp:RequiredFieldValidator>
                    </div>
                    <asp:Button ID="Button1" runat="server" Text="Validate Page" />
                    <div style="padding-bottom: 4px;">
                        <asp:ValidationSummary ID="ValidationSummary1" runat="server" EnableViewState="false" />
                    </div>
                </div>
                <div class="groupWrapper">
                    <qsf:InformationBox ID="InformationBox2" runat="server" Title="Login, LoginName, LoginStatus and LoginView controls">
                    </qsf:InformationBox>
                    <asp:Login ID="Login2" runat="server" Width="100%" EnableViewState="false">
                        <LayoutTemplate>
                            <table cellpadding="1" cellspacing="0" width="100%">
                                <tr>
                                    <td>
                                        <table cellpadding="0" width="100%">
                                            <tr>
                                                <td>
                                                    <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">User Name:</asp:Label>
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="UserName" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName"
    ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="Login1"></asp:RequiredFieldValidator>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password:</asp:Label>
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>
    <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password"
    ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="Login1"></asp:RequiredFieldValidator>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    &nbsp;
                                                </td>
                                                <td>
                                                    <asp:CheckBox ID="RememberMe" runat="server" Text="Remember me next time." />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center" colspan="2" style="color: Red;">
                                                    <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2" style="text-align: right;">
                                                    <asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In" ValidationGroup="Login1" />
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </LayoutTemplate>
                    </asp:Login>
                    <div style="margin-top: 5px;">
                        <asp:LoginName ID="LoginName1" runat="server" Width="300px" EnableViewState="false" />
                    </div>
                    <div style="margin-top: 5px;">
                        <asp:LoginStatus ID="LoginStatus1" runat="server" Width="300px" EnableViewState="false" />
                    </div>
                    <div style="margin-top: 5px;">
                        <asp:LoginView ID="LoginView1" runat="server" EnableViewState="false">
                            <AnonymousTemplate>
                                <div style="height: 100px">
                                    This is displayed if the user is NOT logged in!
                                </div>
                            </AnonymousTemplate>
                            <LoggedInTemplate>
                                <div style="color: #fff; background-color: #015914; -moz-border-radius: 4px; padding: 4px;">
                                    This is displayed if the user is LOGGED in!
                                </div>
                            </LoggedInTemplate>
                        </asp:LoginView>
                    </div>
                </div>
                <div class="groupWrapper">
                    <qsf:InformationBox ID="InformationBox4" runat="server" Title="ChangePassword">
                    </qsf:InformationBox>
                    <asp:ChangePassword ID="ChangePassword1" runat="server" Width="385px" EnableViewState="false">
                    </asp:ChangePassword>
                </div>
                <div class="groupWrapper">
                    <qsf:InformationBox ID="InformationBox5" runat="server" Title="CreateUser">
                    </qsf:InformationBox>
                    <asp:CreateUserWizard ID="CreateUserWizard2" runat="server" Width="100%" EnableViewState="false">
                        <WizardSteps>
                            <asp:CreateUserWizardStep ID="CreateUserWizardStep2" runat="server">
                            </asp:CreateUserWizardStep>
                            <asp:CompleteWizardStep ID="CompleteWizardStep2" runat="server">
                            </asp:CompleteWizardStep>
                        </WizardSteps>
                    </asp:CreateUserWizard>
                </div>
                <br style="line-height: 1px; clear: both;" />
            </telerik:RadAjaxPanel>
        </div>
        <qsf:Footer runat="server" ID="Footer1" />

        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            //the link of the LoginStatus control is disabled for demo purposes (to avoid redirecting to a non-existing page)
            Sys.Application.add_load(function ()
            {
                var loginStatus = $get("<%= LoginStatus1.ClientID %>");
                loginStatus.setAttribute("href", "javascript:void(0);");
            })
        </script>
        </telerik:RadCodeBlock>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451