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

Ajax / Form Values

Add Contact
     
Joe Satrianijoe@domain.comPersonal
Steve Vaisteve@domain.comPersonal
Tony Macalpinetony@domain.comPersonal
Brett Garsedbrett@domain.comWork
Rey Mysterioray@wwe.comWork
Yngwie Malmsteenyngwie@domain.comWork

  • Form values on the page are preserved between AJAX requests performed by the RadAjax controls. This concept is illustrated in a typical scenario for building a web-based address book with the RadAjaxManager control. Everything works as expected with the only difference that controls make AJAXrequests instead of postbacks.

    • You can add new contacts to the system (private or work-related).
    • You can edit existing contacts.
    • You can delete existing contacts.
    • You can filter the datagrid view to display different contact groups.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

    <%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.AJAXExamplesVBNET.AJAX.Examples.Common.FormValues.DefaultVB" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/DTD/xhtml11.dtd">
    <html xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <telerik:HeadTag runat="server" ID="Headtag1"></telerik:HeadTag>
        <!-- custom head section -->
        <link href="Img/Styles.css" type="text/css" rel="stylesheet" />
        <!-- end of custom head section -->
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <telerik:Header runat="server" ID="Header1" NavigationLanguage="VB" ShowSkinChooser="false">
        </telerik:Header>
        <!-- content start -->
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="personalRadioButton">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="groupDropDown" LoadingPanelID="AjaxLoadingPanel1">
                        </telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="avatarDropDown" LoadingPanelID="AjaxLoadingPanel1">
                        </telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="personalRadioButton"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="workRadioButton"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="workRadioButton">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="groupDropDown" LoadingPanelID="AjaxLoadingPanel1">
                        </telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="avatarDropDown" LoadingPanelID="AjaxLoadingPanel1">
                        </telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="workRadioButton"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="personalRadioButton"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="saveButton">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="contactsGrid" LoadingPanelID="AjaxLoadingPanel2">
                        </telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="leftPanel" LoadingPanelID="AjaxLoadingPanel2">
                        </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="cancelButton">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="leftPanel" LoadingPanelID="AjaxLoadingPanel2">
                        </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="contactsFilterDropDown">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="contactsGrid" LoadingPanelID="AjaxLoadingPanel2">
                        </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="contactsGrid">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="leftPanel" LoadingPanelID="AjaxLoadingPanel2">
                        </telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="contactsGrid" LoadingPanelID="AjaxLoadingPanel2">
                        </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <table class="firstLookContainer" cellspacing="0" cellpadding="0">
            <tr>
                <td class="roundedLeftCorner">
                </td>
                <td class="headerCell">
                </td>
                <td class="roundedRightCorner">
                </td>
            </tr>
            <tr>
                <td colspan="3" style="height: 25px" class="headerBottom">
                </td>
            </tr>
            <tr>
                <td class="mainCell" colspan="3" valign="top">
                    <table class="controlsTable" cellspacing="7" cellpadding="0" border="0">
                        <tr>
                            <td class="heading" style="width: 259px">
                                <span>Add Contact</span>
                            </td>
                            <td class="heading" style="width: 266px">
    <asp:DropDownList ID="contactsFilterDropDown" Width="94px" Style="font-size: 11px;
    float: right;" runat="server" AutoPostBack="True" OnSelectedIndexChanged="contactsFilterDropDown_SelectedIndexChanged">
                                    <asp:ListItem Value="All">Select Filter</asp:ListItem>
                                    <asp:ListItem Value="Work">Work-related only</asp:ListItem>
                                    <asp:ListItem Value="Personal">Personal only</asp:ListItem>
                                </asp:DropDownList>
                                <telerik:RadCodeBlock ID="CodeBlock1" runat="server">
                                    <label for="<%= contactsFilterDropDown.ClientID %>">
                                        Contacts</label>
                                </telerik:RadCodeBlock>
                            </td>
                        </tr>
                        <tr>
                            <td style="height: 100%">
                                <asp:Panel ID="leftPanel" runat="server">
                                    <table cellspacing="7" cellpadding="0">
                                        <tr>
                                            <td>
                                                <label for="nameBox">
                                                    Name:</label>
                                            </td>
                                            <td>
                                                <asp:TextBox ID="nameBox" runat="server" Text="" CssClass="inputTxt"></asp:TextBox>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label for="emailBox">
                                                    E-mail:</label>
                                            </td>
                                            <td>
                                                <asp:TextBox ID="emailBox" runat="server" Text="" CssClass="inputTxt"></asp:TextBox>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
    <asp:RadioButton ID="personalRadioButton" AutoPostBack="True" runat="server" Text="Personal contact"
    GroupName="contactType" Checked="True" OnCheckedChanged="personalRadioButton_CheckedChanged">
                                                </asp:RadioButton>
    <asp:RadioButton ID="workRadioButton" AutoPostBack="True" runat="server" Text="Work-related contact"
    GroupName="contactType" OnCheckedChanged="workRadioButton_CheckedChanged"></asp:RadioButton>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label for="groupDropDown">
                                                    Group:</label>
                                            </td>
                                            <td>
                                                <asp:DropDownList ID="groupDropDown" runat="server">
                                                    <asp:ListItem Value="">Choose</asp:ListItem>
                                                    <asp:ListItem Value="Friends">Friends</asp:ListItem>
                                                    <asp:ListItem Value="Co-workers">Co-workers</asp:ListItem>
                                                </asp:DropDownList>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label for="avatarDropDown">
                                                    Avatar:</label>
                                            </td>
                                            <td>
                                                <asp:DropDownList ID="avatarDropDown" runat="server">
                                                    <asp:ListItem Value="">Choose</asp:ListItem>
                                                </asp:DropDownList>
                                            </td>
                                        </tr>
                                    </table>
                                </asp:Panel>
                            </td>
                            <td valign="top">
                                <telerik:RadGrid runat="server" ID="contactsGrid" CssClass="callBackDataGrid" GridLines="None"
                                    BorderWidth="0" ShowHeader="False" AutoGenerateColumns="False" CellSpacing="0"
                                    CellPadding="0" Style="position: relative; top: -7px;" OnDeleteCommand="contactsGrid_DeleteCommand1"
                                    EnableLinqExpressions="false" OnNeedDataSource="contactsGrid_NeedDataSource"
                                    OnItemCommand="contactsGrid_ItemCommand">
                                    <MasterTableView>
                                        <Columns>
                                            <telerik:GridTemplateColumn>
                                                <ItemStyle CssClass="editCell"></ItemStyle>
                                                <ItemTemplate>
    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="Img/editRecordBtn.gif"
    BorderWidth="0px" AlternateText="Edit Record" CommandName="CustomEdit" Height="15px"
    Width="13px"></asp:ImageButton>
                                                </ItemTemplate>
                                            </telerik:GridTemplateColumn>
                                            <telerik:GridBoundColumn DataField="Name">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="Email" Display="false">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn DataField="Type" Display="false">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridTemplateColumn>
                                                <ItemStyle CssClass="deleteCell"></ItemStyle>
                                                <ItemTemplate>
    <asp:ImageButton runat="server" CommandName="Delete" ImageUrl="Img/deleteRecordBtn.gif"
    Height="15px" BorderWidth="0px" Width="13px" AlternateText="Delete Record" ID="ImageButton2">
                                                    </asp:ImageButton>
                                                </ItemTemplate>
                                            </telerik:GridTemplateColumn>
                                        </Columns>
                                    </MasterTableView>
                                </telerik:RadGrid>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td class="controlButtonsPanel" colspan="3">
                    <div class="buttonsContainer">
    <asp:ImageButton ID="saveButton" Width="104px" runat="server" CssClass="controlButton"
    AlternateText="Save" Height="18px" ImageUrl="Img/saveBtnBg.gif" BorderWidth="0px">
                        </asp:ImageButton>
    <asp:ImageButton ID="cancelButton" Width="53px" BorderWidth="0px" runat="server"
    CssClass="controlButton" AlternateText="Cancel" Height="18px" ImageUrl="Img/cancelBtnBg.gif">
                        </asp:ImageButton>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="firstLookFooter" colspan="3">
                </td>
            </tr>
        </table>
        <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel1" runat="server" />
        <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel2" runat="server" />
        <!-- content end -->
        <telerik:Footer runat="server" ID="Footer1" AdditionalCodeViewerFiles="~/Ajax/Examples/Common/FormValues/Img/Styles.css"></telerik:Footer>
        </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