Home/ Questions/Q 6373733
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T01:23:57+00:00

I’m trying to create a page that has some information in databound labels with

  • 0

I’m trying to create a page that has some information in databound labels with and edit button. When the edit button is clicked, the information is replaced with TextBoxes bound to the same data. The data can then be modified, saved back to the DB and the TextBoxes replaced with updated Labels.

To start with, and to keep things simple, all I have is an UpdatePanel with a DataList and two buttons: EditButton and CancelButton (CancelButton is hidden by default). The DataList‘s ItemTemplate has two Panels: ViewPanel and EditPanel (EditPanel is hidden by default). When EditButton is clicked, I hide EditButton and the DataList‘s Items‘ ViewPanel, and show CancelButton and the DataList‘s Items‘ EditPanel.
Not a problem. Once this is done however, the CancelButton button will not work, throwing a PageRequestManagerServerErrorException.

Through some fiddling, I worked out this happens because there are databound text boxes on the EditPanel. If I don’t bind data to the text boxes, everything works perfectly. Why doesn’t this work?

Here’s my code:

UpdatePanelTest.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpdatePanelTest.aspx.cs" Inherits="WebLetterViewer.UpdatePanelTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>
    <asp:SqlDataSource ID="AllLettersDataSource" runat="server" 
        ConnectionString="<%$ ConnectionStrings:ORMSTestConnectionString %>" 
        SelectCommand="SELECT * FROM [Letters] WHERE ([id] = @id)">
        <SelectParameters>
            <asp:ControlParameter ControlID="HiddenLetterID" DefaultValue="1" Name="id" PropertyName="Value" Type="Int32" />
        </SelectParameters>
    </asp:SqlDataSource>
    <asp:HiddenField ID="HiddenLetterID" runat="server" Value="1" />
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
            <ContentTemplate>
                <asp:DataList ID="LettersDataList" runat="server" DataSourceID="AllLettersDataSource">
                    <ItemTemplate>
                        <asp:Panel ID="ViewPanel" runat="server">
                            <h2>Data1:</h2>
                            <asp:Label ID="data1Label" runat="server" BorderStyle="Solid" BorderWidth="1px" Height="100px" Text='<%# Eval("data1") %>' Width="500px" />
                            <h2>data2:</h2>
                            <asp:Label ID="data2Label" runat="server" BorderStyle="Solid" BorderWidth="1px" Height="100px" Text='<%# Eval("data2") %>' Width="500px" />
                            <h2>data3:</h2>
                            <asp:Label ID="data3Label" runat="server" BorderStyle="Solid" BorderWidth="1px" Height="100px" Text='<%# Eval("data3") %>' Width="500px" />
                        </asp:Panel>
                        <asp:Panel ID="EditPanel" runat="server" Visible="False">
                            <h2>data1:</h2>
                            <asp:TextBox ID="data1TextBox" runat="server" Height="100px" Text='<%# Eval("data1", "{0}") %>' TextMode="MultiLine" Width="500px"></asp:TextBox>
                            <h2>data2:</h2>
                            <asp:TextBox ID="data2TextBox" runat="server" Height="100px" Text='<%# Eval("data2", "{0}") %>' TextMode="MultiLine" Width="500px"></asp:TextBox>
                            <h2>data3:</h2>
                            <asp:TextBox ID="data3TextBox" runat="server" Height="100px" Text='<%# Eval("data3", "{0}") %>' TextMode="MultiLine" Width="500px"></asp:TextBox>
                        </asp:Panel>
                    </ItemTemplate>
                </asp:DataList>
                <asp:Button ID="EditButton" runat="server" onclick="EditButton_Click" Text="Edit" />
                <asp:Button ID="CancelButton" runat="server" onclick="CancelButton_Click" Text="Cancel" Visible="False" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

UpdatePanelTest.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebLetterViewer{
    public partial class UpdatePanelTest : System.Web.UI.Page{
        protected void Page_Load(object sender, EventArgs e){
        }

        protected void EditButton_Click(object sender, EventArgs e){
            foreach (DataListItem item in LettersDataList.Items){
                item.FindControl("ViewPanel").Visible = false;
                item.FindControl("EditPanel").Visible = true;
            }
            EditButton.Visible = false;
            CancelButton.Visible = true;
            UpdatePanel1.Update();
        }

        protected void CancelButton_Click(object sender, EventArgs e){
            foreach (DataListItem item in LettersDataList.Items){
                item.FindControl("ViewPanel").Visible = true;
                item.FindControl("EditPanel").Visible = false;
            }
            EditButton.Visible = true;
            CancelButton.Visible = false;
            UpdatePanel1.Update();
        }
    }
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Put your EditPanel in a EditItemTemplate and use Commands , you are not using this control the way it was designed to be used:

    How to: Allow Users to Edit Items in DataList Web Server Controls

    Markup:

    <asp:SqlDataSource ID="AllLettersDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:ORMSTestConnectionString %>"
        SelectCommand="SELECT * FROM [Letters] WHERE ([id] = @id)">
        <SelectParameters>
            <asp:ControlParameter ControlID="HiddenLetterID" DefaultValue="1" Name="id" PropertyName="Value"
                Type="Int32" />
        </SelectParameters>
        <!--change this -->
        UpdateCommand="UPDATE [Categories] SET [CategoryName] = @CategoryName, [Description]
        = @Description WHERE [CategoryID] = @original_CategoryID">
        <UpdateParameters>
            <asp:Parameter Name="CategoryName" Type="String" />
            <asp:Parameter Name="Description" Type="String" />
            <asp:Parameter Name="original_CategoryID" Type="Int32" />
        </UpdateParameters>
    </asp:SqlDataSource>
    <asp:DataList ID="LettersDataList" runat="server" DataSourceID="AllLettersDataSource"
        OnEditCommand="LettersDataList_EditCommand" OnCancelCommand="LettersDataList_CancelCommand"
        OnUpdateCommand="LettersDataList_UpdateCommand">
        <ItemTemplate>
            <asp:Panel ID="ViewPanel" runat="server">
                <h2>
                    Data1:</h2>
                <asp:Label ID="data1Label" runat="server" BorderStyle="Solid" BorderWidth="1px" Height="100px"
                    Text='<%# Eval("data1") %>' Width="500px" />
                <h2>
                    data2:</h2>
                <asp:Label ID="data2Label" runat="server" BorderStyle="Solid" BorderWidth="1px" Height="100px"
                    Text='<%# Eval("data2") %>' Width="500px" />
                <h2>
                    data3:</h2>
                <asp:Label ID="data3Label" runat="server" BorderStyle="Solid" BorderWidth="1px" Height="100px"
                    Text='<%# Eval("data3") %>' Width="500px" />
            </asp:Panel>
            <asp:Button ID="EditButton" runat="server" CommandName="edit" Text="Edit" />
        </ItemTemplate>
        <EditItemTemplate>
            <asp:Panel ID="EditPanel" runat="server">
                <h2>
                    data1:</h2>
                <asp:TextBox ID="data1TextBox" runat="server" Height="100px" Text='<%# Eval("data1", "{0}") %>'
                    TextMode="MultiLine" Width="500px"></asp:TextBox>
                <h2>
                    data2:</h2>
                <asp:TextBox ID="data2TextBox" runat="server" Height="100px" Text='<%# Eval("data2", "{0}") %>'
                    TextMode="MultiLine" Width="500px"></asp:TextBox>
                <h2>
                    data3:</h2>
                <asp:TextBox ID="data3TextBox" runat="server" Height="100px" Text='<%# Eval("data3", "{0}") %>'
                    TextMode="MultiLine" Width="500px"></asp:TextBox>
            </asp:Panel>
            <asp:LinkButton ID="LinkButton1" runat="server" CommandName="update">
                    Save
            </asp:LinkButton>
            &nbsp;
            <asp:Button ID="CancelButton" runat="server" CommandName="cancel" Text="Cancel" Visible="False" />
        </EditItemTemplate>
    </asp:DataList>

    Code-behind:

        protected void LettersDataList_EditCommand(object source, DataListCommandEventArgs e)
    {
        LettersDataList.EditItemIndex = e.Item.ItemIndex;
        LettersDataList.DataBind();
    }

    protected void LettersDataList_CancelCommand(object source,
        DataListCommandEventArgs e)
    {
        LettersDataList.EditItemIndex = -1;
        LettersDataList.DataBind();
    }

    protected void LettersDataList_UpdateCommand(object source,
        DataListCommandEventArgs e)
    {
        //change this to your database needs

        //String categoryID =
        //     LettersDataList.DataKeys[e.Item.ItemIndex].ToString();
        //String categoryName =
        //     ((TextBox)e.Item.FindControl("textCategoryName")).Text;
        //String description =
        //     ((TextBox)e.Item.FindControl("textDescription")).Text;

        //SqlDataSource1.UpdateParameters["original_CategoryID"].DefaultValue
        //    = categoryID;
        //SqlDataSource1.UpdateParameters["categoryName"].DefaultValue
        //    = categoryName;
        //SqlDataSource1.UpdateParameters["Description"].DefaultValue
        //    = description;
        //SqlDataSource1.Update();

        LettersDataList.EditItemIndex = -1;
        LettersDataList.DataBind();
    }
    • 0