更新 AJAX 手风琴内的 DataGrid

Posted 2023-02-22

【中文标题】更新 AJAX 手风琴内的 DataGrid

【英文标题】：Update DataGrid inside AJAX accordion

【发布时间】：2011-01-10 22:06:47

【问题描述】：

我在一个页面上有一个来自 ajax 控制工具包的 AJAX 手风琴，面板上有一个数据网格。当我单击行上的编辑时，我有一个用于一列的自定义项目模板来创建一个多行文本框。当我单击行上的更新时，文本框的原始内容会呈现到文本框中。它应该更新并返回到文字而不是文本框。当我将 DataBind() 放入 !IsPostBack 时，当我单击手风琴窗格时，它不会被渲染。有任何想法吗？

代码：

    protected void Page_Load(object sender, EventArgs e)
        
            announ.HeaderStyle.CssClass = "header";
                        announ.Width = Unit.Percentage(100);
                        announ.GridLines = GridLines.None;
                        announ.AutoGenerateColumns = false;
                        announ.CellPadding = 10;
                        announ.CellSpacing = 0;
                        announ.HorizontalAlign = HorizontalAlign.Center;
                        announ.HeaderStyle.Font.Bold = true;
                        announ.EnableViewState = false;
                        announ.AlternatingItemStyle.BackColor = System.Drawing.Color.GhostWhite;
                        //announ.DeleteCommand += AnnounDeleteCommand;
                        announ.EditCommand += announ_EditCommand;
                        announ.UpdateCommand += announ_UpdateCommand;
                        announ.CancelCommand += announ_CancelCommand;
                        announ.DataKeyField = "id";
                        var tc1 = new TemplateColumn
                                      
                                          HeaderTemplate = new
                                              DataGridTemplate(ListItemType.Header, "Announcement"),
                                          ItemTemplate = new DataGridTemplate(ListItemType.Item, "announcement_text"),
                                          EditItemTemplate = new
                                              DataGridTemplate(ListItemType.EditItem, "announcement_text")
                                      ;



                    var editColumn = new EditCommandColumn
                                         
                                             ButtonType = ButtonColumnType.PushButton,
                                             HeaderText = "Edit",
                                             EditText = "Edit",
                                             UpdateText = "Update",
                                             CancelText = "Cancel"
                                         ;
    var dateColumn = new BoundColumn HeaderText = "Posted On", DataField = "date", ReadOnly = true;
                    var expirationColumn = new BoundColumn HeaderText = "Expiration Date", DataField = "expiration_date";
    announ.Columns.Add(tc1);
                    announ.Columns.Add(dateColumn);
                    announ.Columns.Add(expirationColumn);
    announ.DataSource = myAnnouncements;
                    announ.DataBind();

var deptMgtaccord = new Accordion
                                        
                                            ID = "deptMgtaccord",
                                            HeaderCssClass = "accordion-header",
                                            HeaderSelectedCssClass = "accordion-headerSelected",
                                            AutoSize = AutoSize.None,
                                            SelectedIndex = 0,
                                            FadeTransitions = true,
                                            TransitionDuration = 250,
                                            FramesPerSecond = 40,
                                            RequireOpenedPane = false,
                                            SuppressHeaderPostbacks = true
                                        ;
                if (IsPostBack)
                
                    deptMgtaccord.SelectedIndex = selected;
                

                var announcementPane = new AccordionPane ID = "announcementPane";
                announcementPane.HeaderContainer.Attributes.Add("onmouseover", "this.style.backgroundColor='#e3e2e2';");
                announcementPane.HeaderContainer.Attributes.Add("onmouseout", "this.style.backgroundColor='#ffffff';");
                announcementPane.HeaderContainer.Controls.Add(new LiteralControl("Announcements >>"));
                announcementPane.ContentContainer.Controls.Add(announ);
                deptMgtaccord.Panes.Add(announcementPane);
                var statsPane = new AccordionPane ID = "statsPane";
                statsPane.HeaderContainer.Attributes.Add("onmouseover", "this.style.backgroundColor='#e3e2e2';");
                statsPane.HeaderContainer.Attributes.Add("onmouseout", "this.style.backgroundColor='#ffffff';");
                statsPane.HeaderContainer.Controls.Add(new LiteralControl("Statistics >>"));
                statsPane.ContentContainer.Controls.Add(new LiteralControl("Stats"));
                deptMgtaccord.Panes.Add(statsPane);
ph1.Controls.Add(deptMgtaccord);
    

           protected void announ_CancelCommand(object source, DataGridCommandEventArgs e)
            
                announ.EditItemIndex = -1;
                announ.DataBind();
            

            protected void announ_UpdateCommand(object source, DataGridCommandEventArgs e)
            
                var dc = new MTCDataDataContext();
                var announText = (TextBox) e.Item.Cells[1].Controls[1];
                int announId = (int)announ.DataKeys[e.Item.ItemIndex];
                var currentAnnoun = (from a in dc.announcements
                                     where a.id == announId
                                     select a).SingleOrDefault();
                currentAnnoun.announcement_text = announText.Text;
                dc.SubmitChanges();

                announ.EditItemIndex = -1;
                announ.DataBind();
            

            protected void announ_EditCommand(object source, DataGridCommandEventArgs e)
            
                announ.EditItemIndex = e.Item.ItemIndex;
                announ.DataBind();
            


public class DataGridTemplate : ITemplate
    
        ListItemType templateType;
        string columnName;
        public DataGridTemplate(ListItemType type, string colname)
        
            templateType = type;
            columnName = colname;
        

        public void InstantiateIn(Control container)
        
            Literal lc = new Literal();
            TextBox tb = new TextBox();
            switch (templateType)
            
                case ListItemType.Header:
                    lc.Text = "<B>" + columnName + "</B>";
                    container.Controls.Add(lc);
                    break;
                case ListItemType.Item:
                    lc.DataBinding += lc_DataBinding;
                    container.Controls.Add(lc);
                    break;
                case ListItemType.EditItem:
                    tb.TextMode = TextBoxMode.MultiLine;
                    tb.Rows = 6;
                    tb.Columns = 57;
                    tb.DataBinding += tb_DataBinding;
                    container.Controls.Add(tb);
                    break;
                case ListItemType.Footer:
                    lc.Text = "<I>" + columnName + "</I>";
                    container.Controls.Add(lc);
                    break;
            
        
        void tb_DataBinding(object sender, EventArgs e)
        
            TextBox tb = (TextBox)sender;
            DataGridItem row = (DataGridItem)tb.NamingContainer;
            tb.ID = "txt_" + row.ItemIndex;
            tb.Text = DataBinder.Eval(row.DataItem, columnName).ToString();
        
        void lc_DataBinding(object sender, EventArgs e)
        
            Literal lc = (Literal)sender;
            DataGridItem row = (DataGridItem)lc.NamingContainer;
            lc.ID = "txt_" + row.ItemIndex;
            lc.Text = DataBinder.Eval(row.DataItem, columnName).ToString();
        
    

【参考方案1】：

您需要在每次请求时在 PreInit 中添加动态控件，以便控件返回 ControlTree 并引发事件。

页面事件： 预初始化

典型用途： 在启动阶段完成后和初始化阶段开始之前引发。

将此事件用于以下目的：

检查 IsPostBack 属性以确定这是否是第一个 处理页面的时间。这 IsCallback 和 IsCrossPagePostBack 属性也设置在这个 时间。 创建或重新创建动态控件。 动态设置母版页。 动态设置 Theme 属性。

读取或设置配置文件属性值。

注意：如果请求是回发，则控件的值尚未从视图状态恢复。如果您在此阶段设置控件属性，则其值可能会在下一个事件中被覆盖。