ASP.NET 환경에서 Javascript 사용 방법
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ex54_Javascript.aspx.cs" Inherits="Ex54_Javascript" %>
<!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>
<style type="text/css">
#Button1
{
width: 177px;
}
</style>
<script language="javascript" type="text/javascript">
// <![CDATA[
function Button1_onclick()
{
//1.
document.getElementById("Text1").value = "테스트";
//2.
document.getElementById("TextBox1").value = "테스트";
}
// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>
Ex54_Javascript.aspx</h2>
<h2>
<br />
*.aspx = ASP.NET 태그 + C# + HTML + CSS + Javascript<br />
<br />
1. 서버측 : ASP.NET + C# 실행
<br />
<br />
2. 클라이언트측 : HTML + CSS + Javascript 실행<br />
<br />
<br />
<br />
Javascript 사용<br />
<br />
1. 순수 HTML 태그 접근<br />
<br />
<input id="Text1" type="text" /><br />
<br />
<br />
2. ASP.NET 태그의 랜더링 결과 접근<br />
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<br />
<input id="Button1" type="button" value="button" onclick="return Button1_onclick()" /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</h2>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ex55_Javascript.aspx.cs" Inherits="Ex55_Javascript" %>
<!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>
<script type="text/javascript">
function Init() {
document.getElementById("TextBox1").value = "초기값";
}
</script>
</head>
<body onload="//Init();">
<form id="form1" runat="server">
<div>
<h2>
Ex55_Javascript.aspx</h2>
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<br />
<br />
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Ex55_Javascript : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string txt = "홍길동";
if (!IsPostBack)
{
//자바스크립트를 c#에서 생성 -> 호출
//1. 자바스크립트를 c#의 문자열로 생성
// string script = @"
// <script type='text/javascript'>
// document.getElementById
// ('TextBox1').value = '" + txt + @"';
// </script>
// ";
//DB값을 읽어와 alert하려면 이방법밖에 없다.
string script = @"
<script type='text/javascript'>
alert('" + txt + @"');
</script>
";
//2. 스크립트 적용
//a. body onload 시점에 실행
// - 페이지를 다 읽고 난뒤에 실행
this.ClientScript.RegisterStartupScript(this.GetType(), "script", script);
//b. <head>안의 <script>시점에 실행
// - 페이지를 읽기 전에 초반에 실행
//this.getType 현제페이지의 타입
//this.ClientScript.RegisterStartupScript(this.GetType(), "script", script);
}
}
}
이동되는 페이지
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ex56_Javascript.aspx.cs" Inherits="Ex56_Javascript" %>
<!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:Button ID="Button1" runat="server" onclick="Button1_Click" Text="글쓰기"
Width="89px" />
<br />
<br />
<br />
<asp:Button ID="Button2" runat="server" onclick="Button2_Click"
style="height: 21px" Text="글쓰기" Width="87px" />
<br />
<br />
<br />
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Ex56_Javascript : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
//글쓰기 -> 완료메시지
//1. DB
//2. 완료메시지
string script = @"<script type='text/javascript'>
alert('글쓰기 완료!!');
</script>";
this.ClientScript.RegisterStartupScript(this.GetType(), "end", script);//스크립트 완성
//3. 페이지 이동(List.aspx)
Response.Redirect("List.aspx");
}
protected void Button2_Click(object sender, EventArgs e)
{
//글쓰기 -> 완료메시지
//1. DB
//2. 완료메시지
string script = @"<script type='text/javascript'>
alert('글쓰기 완료!!');
location.href = 'List.aspx';
</script>";
this.ClientScript.RegisterStartupScript(this.GetType(), "end", script);//스크립트 완성
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ex57_Javascript.aspx.cs" Inherits="Ex57_Javascript" %>
<!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>
<script type="text/javascript">
function Test() {
if (confirm("정말결제 하시겠습니까?"))
return true;
else
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>
Ex57_Javascript.aspx</h2>
<br />
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button"
onclientclick="return Test()" style="height: 21px" />
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<br />
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Ex57_Javascript : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//버튼1의 속성값은 onclick으로 지정한것뿐
Button1.Attributes["onclick"] = "confirm('하하');";
}
}
protected void Button1_Click(object sender, EventArgs e)
{
//결재 버튼
Label1.Text = "완료되었습니다.";
}
}
