그러냐

ASP.NET 3.5에서 공식적으로 지원되기 시작한 jQuery 본문

asp.net

ASP.NET 3.5에서 공식적으로 지원되기 시작한 jQuery

관절분리 2016. 1. 28. 11:20
반응형

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>

반응형
저작자표시

'asp.net' 카테고리의 다른 글

SOAP 메세지 암호화 하기 & ASP.NET Web Service  (0) 2016.01.28
IIS에 ASP.NET 설치하기  (0) 2016.01.28
asp.net 2,0 페이지 이동방법  (0) 2016.01.27
IIS 메타베이스에 액세스하지 못했습니다.  (0) 2016.01.27
'asp.net' Related Articles more