ASP.NET 3.5에서 공식적으로 지원되기 시작한 jQuery
ASP.NET에서 이미 오픈 소스로 유명한 자바스크립트 프레임웍인 jQuery를 공식적으로 지원하기 시작했습니다. VisualStudio 2008에 ASP.NET MVC RC1을 설치하면 압축이 풀린 *.js파일들을 발견할 수 있습니다. jQuery사이트에서 다운로드 받거나 아니면 MVC 프레임웍에 포함된 jquery-1.2.6.js파일을
아래와 같이 참조하면 됩니다.
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.2.6.js" />
</Scripts>
</asp:ScriptManager>
직접 링크를 걸어도 됩니다.
<script type="text/javascript" src="jquery-1.1.js">
아래와 같은 코드를 추가하면 HTML로 렌더링된 ASP.NET의 서버컨트롤 태그에 적용되는
스타일을 볼 수 있습니다.
<style type="text/css">
.heading { background-color=yellow }
</style>
<script>
function pageLoad() {
$("#grd tr:first").addClass("heading");
}
</script>
아래의 코드를 실행하면 화면에서 데이터가 출력된 그리드를 토글해서 Show/Hide하는 효과를
볼 수 있습니다. 약간의 스크립트와 태그를 연결추가해서 사용하면 된다. 그리드와 SqlDataSource컨트롤은 자동 생성된 코드 블럭을 사용했습니다.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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">
.heading { background-color=yellow }
</style>
<script>
function fn() {
$("#grd").slideUp('slow');
}
function fn2() {
$("#grd").slideDown('slow');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.2.6.js" />
</Scripts>
</asp:ScriptManager>
<asp:GridView ID="grd" runat="server" AllowPaging="True"
AutoGenerateColumns="False" DataKeyNames="ProductID"
DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="ProductID" HeaderText="ProductID"
InsertVisible="False" ReadOnly="True" SortExpression="ProductID" />
<asp:BoundField DataField="ProductName" HeaderText="ProductName"
SortExpression="ProductName" />
<asp:BoundField DataField="CategoryID" HeaderText="CategoryID"
SortExpression="CategoryID" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice"
SortExpression="UnitPrice" />
<asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock"
SortExpression="UnitsInStock" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [ProductID], [ProductName], [CategoryID], [UnitPrice], [UnitsInStock] FROM [Products]"></asp:SqlDataSource>
<br />
<input type="button" id="btn" value="모양" onclick="fn()" />
<input type="button" id="Button1" value="모양2" onclick="fn2()" />
</div>
</form>
</body>
</html>