자바스크립트 호출로Ajax 판넬의 데이터 업데이트
“자바스크립트로 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)%>; 이것만 알면 끝~
