ASP.NET AJAX

Javascript로 포스트백 발생시키기 (비하인드 메소드 호출)

스티커 2014. 2. 17. 09:53

자바스크립트 호출로Ajax 판넬의 데이터 업데이트

 

 

image

 

“자바스크립트로 DataList 업데이트” (Button1)를 클릭하면 
“숨김버튼 자바스크립트로 이버튼 클릭”"(Button2) 를 이벤트를 비하인드로 실행시킨다.
 
WebFrom1.aspx
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <script>
            function UpdateGrid() {
                alert("업데이트 호출");

                <%=Page.GetPostBackEventReference(Button2)%>;
                return false;
            }

        </script>
    <div>
    
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:DataList ID="DataList1" runat="server">
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                        <br />
                        <asp:Label ID="Label2" runat="server" Text='<%# Eval("RegDate") %>'></asp:Label>
                    </ItemTemplate>
                </asp:DataList>
                <asp:Button ID="Button2" runat="server" Text="숨김버튼 자바스크립트로 이버튼 클릭" OnClick="Button2_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
    
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" Text="자바스크립트로 DataList 업데이트"  OnClientClick="return UpdateGrid();" />
    
    </div>
    </form>
</body>
</html>

WebForm1.cs

    public partial class WebForm1 : System.Web.UI.Page
    {
        DataTable dt = new DataTable();

        protected void Page_Load(object sender, EventArgs e)
        {
            dt.Columns.Add("Name");
            dt.Columns.Add("RegDate");

            UpdateDatetime();
        }

        private void UpdateDatetime()
        {
            dt.Rows.Clear();
            for (int i = 0; i < 10; i++)
            {
                DataRow row = dt.NewRow();
                row["Name"] = i.ToString();
                row["RegDate"] = DateTime.Now.ToString();
                dt.Rows.Add(row);
            }

            this.DataList1.DataSource = dt;
            this.DataList1.DataBind();

        }

        protected void Button2_Click(object sender, EventArgs e)
        {
           //자바스크립트로 Button2클릭 이벤트를 호출해서 들어온 이벤트
            UpdateDatetime();
        }


    }



 
 
<%=Page.GetPostBackEventReference(Button2)%>; 이것만 알면 끝~