jQuery 예제 모음

시삽: 레드플러스 님 
게시판 이동:
 제목 : jQuery UI datepicker를 ASP.NET Web Forms에서 사용하기 - 코드조각
글번호: 13
작성자: Administrator ( 레드플러스 / redplus@live.com )
작성일: 2015/02/07 오전 1:13:42
조회수: 9730
파일: 다운로드 (다운로드 권한이 없습니다.)

(1) /Site.master 페이지에 jQuery와 jQuery UI 자바스크립트 코드를 삽입합니다.

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MemoEngine.Site" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />

    <script src="<%= ResolveUrl("~/Scripts/jquery-2.1.3.min.js") %>"></script>
    <script src="<%= ResolveUrl("~/Scripts/bootstrap.min.js") %>"></script>
    <script src="<%= ResolveUrl("~/Scripts/jquery-ui-1.11.2.min.js") %>"></script>

    <asp:ContentPlaceHolder ID="HeaderContent" runat="server">

    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="MainContent" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    <asp:ContentPlaceHolder ID="FooterContent" runat="server">

    </asp:ContentPlaceHolder>
    </form>
</body>
</html>

 

 

(2) /Tests/FrmMasterPageTest.aspx 페이지에 아래와 같이 jQuery UI 관련 스크립트를 추가하고 datepicker-ko.js 한글 언어팩(?)을 검색 엔진을 통해서 검색 후 github를 통해서 다운로드 받습니다. 이때 아래 코드처럼, ASP.NET 서버 컨트롤 사용시 서버 컨트롤의 ClientID 속성을 통해서 실행되었을 때의 id 값을 읽어와야 정상적으로 실행됨을 알 수 있습니다.

 

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="FrmMaterPageTest.aspx.cs" Inherits="MemoEngine.Tests.FrmMaterPageTest" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeaderContent" runat="server">
    <link href="../Content/themes/base/all.css" rel="stylesheet" />
    <%--<link href="../Content/themes/base/datepicker.css" rel="stylesheet" />--%>
    <script src="../Scripts/jQueryUI/datepicker-ko.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    날짜선택기: <input type="text" name="txtDate1" id="txtDate1" value="" />
    <script>
        $(function () {
            $('#txtDate1').datepicker();
        });
    </script>

    <hr />

    만약, 서버 컨트롤을 사용한다면?
    <asp:TextBox ID="txtDate2" runat="server"></asp:TextBox>
    <script>
        $(function () {
            $('#<%= txtDate2.ClientID %>').datepicker();
        });
    </script>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="FooterContent" runat="server">
</asp:Content>

 

 
이전 글   다음 글 삭제 수정 답변 글쓰기 리스트


관련 아티클 리스트
  제       목 파일 작성자 작성일 조회
이전글 jQuery Ajax로 Web API의 JSON 데이터 출력하기 코드 샘플 - Administrator 2015-02-08 13352
현재글 jQuery UI datepicker를 ASP.NET Web Forms에서 사용하기 ... 다운로드 권한이 없습니다. Administrator 2015-02-07 9730
다음글 jQuery TextBox 엔터(Enter) 키 잡아내기 : 텍스트박스에서 엔터 입력... - Administrator 2014-04-05 9619
 
손님 사용자 Anonymous (손님)
로그인 Home