access_time 13 years ago language中文
more_vert

【asp.net Ajax 】在GridView的buttonField中按钮触发 UpdatePanel局部更新

visibility 1,533 comment 0

今天帮人解决这样一个问题:他要在GridView中的模板列或者ButtonField列中实现点击按钮局部更新一个updatePanel。

解决方法:在GridView的RowDataBind中添加通过ButtonField或者TemplateField中的按钮的UniqueID和Click事件名实例化的AsyncPostBackTrigger对象添加到UpdatePanel的Triggers里

实现代码:

default.aspx

<%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs"
   Inherits="WebApplication2._Default" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
   Namespace="System.Web.UI" TagPrefix="asp" %>
<!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">
      <div>
         <asp:ScriptManager ID="ScriptManager1" runat="server">
         </asp:ScriptManager>
         <asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound"
            AutoGenerateColumns="false">
            <Columns>
               <asp:TemplateField>
                  <ItemTemplate>
                  <asp:Button ID="button" runat="server" Text="更新" UseSubmitBehavior="false" />
                     </ItemTemplate>
               </asp:TemplateField>
               <asp:BoundField DataField="test" HeaderText="test" />
            </Columns>
         </asp:GridView>
         <asp:UpdatePanel runat="server" ID="myUpdatePanel" UpdateMode="Conditional">
            <ContentTemplate>
               <%=DateTime.Now.ToString() %>
            </ContentTemplate>
            <Triggers>
               <asp:AsyncPostBackTrigger ControlID="myButton" />
            </Triggers>
         </asp:UpdatePanel>
         <asp:Button ID="myButton" UseSubmitBehavior="false" Text="异步更新时间"
            runat="server" />
      </div>
   </form>
</body>
</html>

default.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

namespace WebApplication2
{
   public partial class _Default : System.Web.UI.Page
   {
      protected void Page_Load(object sender, EventArgs e)
      {
         if (!Page.IsPostBack)
         {
            this.ScriptManager1.RegisterAsyncPostBackControl(this.myButton);
         }

//通过这里可以得知是否是局部刷新的
         this.GridView1.DataSource = this.GetDataTable().DefaultView;
         this.GridView1.DataBind();
        
      }

      private DataTable GetDataTable()
      {
         DataTable table = new DataTable();
         table.Columns.Add("test");
         table.Rows.Add("test1");
         table.Rows.Add("tetst2");
         table.Rows.Add(DateTime.Now.ToString());
         return table;
      }

      protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
      {
         if (e.Row.RowType == DataControlRowType.DataRow)
         {

            Button button = e.Row.Cells[0].FindControl("button") as Button;
            if (button != null)
            {
               AsyncPostBackTrigger trigger = new AsyncPostBackTrigger();
               trigger.ControlID = button.UniqueID;
               trigger.EventName = "Click";
               this.myUpdatePanel.Triggers.Add(trigger);
            }
         }
      }
   }
}

最终在页面上点击那几个更新按钮或者异步更新按钮都可以实现异步局部更新:

info Last modified by Raymond 13 years ago copyright This page is subject to Site terms.
Like this article?
Share on

Please log in or register to comment.

account_circle Log in person_add Register

Log in with external accounts

Follow Kontext

Get our latest updates on LinkedIn.

Want to contribute on Kontext to help others?

Learn more