New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

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 AJAX requests instead of postbacks.

  • You can add new contacts to the system (friends or family).
  • You can edit existing contacts.
  • You can delete existing contacts.
  • You can filter the datagrid view to display different contact groups.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.AjaxManager.ApplicationScenarios.FormValues.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide no-bg">
        <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="AjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="leftPanel" LoadingPanelID="AjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="cancelButton">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="leftPanel" LoadingPanelID="AjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="contactsFilterDropDown">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="contactsGrid" LoadingPanelID="AjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="contactsGrid">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="leftPanel" LoadingPanelID="AjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                        <telerik:AjaxUpdatedControl ControlID="contactsGrid" LoadingPanelID="AjaxLoadingPanel1"></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" 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">
                                <span>Add Contact</span>
                            </td>
                            <td class="heading">
                                <asp:DropDownList ID="contactsFilterDropDown" Width="94px" CssClass="contactsDropDown"
                                    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>
                                <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 RenderMode="Lightweight" runat="server" ID="contactsGrid" CssClass="callBackDataGrid" Skin="Silk"
                                    EnableLinqExpressions="false" BorderWidth="0" ShowHeader="False" AutoGenerateColumns="False"
                                    CellSpacing="0" CellPadding="0" Style="position: relative; top: -7px;" OnDeleteCommand="contactsGrid_DeleteCommand1"
                                    OnNeedDataSource="contactsGrid_NeedDataSource" OnItemCommand="contactsGrid_ItemCommand">
                                    <MasterTableView>
                                        <Columns>
                                            <telerik:GridTemplateColumn>
                                                <ItemStyle CssClass="editCell"></ItemStyle>
                                                <ItemTemplate>
                                                    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="images/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="images/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="images/saveBtnBg.gif" BorderWidth="0px"></asp:ImageButton>
                        <asp:ImageButton ID="cancelButton" Width="53px" BorderWidth="0px" runat="server"
                            CssClass="controlButton" AlternateText="Cancel" Height="18px" ImageUrl="images/cancelBtnBg.gif"></asp:ImageButton>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="firstLookFooter" colspan="3"></td>
            </tr>
        </table>
        <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel1" runat="server" Skin="Default">
        </telerik:RadAjaxLoadingPanel>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance