[ResponseText.aspx.cs]



using System;

using System.Web.Services;

using System.Collections.Generic;

using System.Web.Script.Services;

 

public partial class Ajax_AspNet_ResponseText : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        // Empty

    }

 

    // List<T> 형태를 JSON 형태로 출력

    [WebMethod]

    [ScriptMethod(ResponseFormat=ResponseFormat.Json)]

    public static List<Memo> GetMemos()

    {

        List<Memo> lst = new List<Memo>() {

            new Memo(){Num=1,Name="홍길동"},

            new Memo(){Num=2,Name="백두산"},

            new Memo(){Num=3,Name="한라산"}

        };

        return lst;

    }

}

 

public class Memo

{

    public int Num { get; set; }

    public string Name { get; set; }

}

 

 



-------------------------------------------------------------------------------------




[04.ListToJSON.htm]




<!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>

    <title>리스트값 반환</title>

    <script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $.ajax({

                type: "post",

                url: "ResponseText.aspx/GetMemos",

                data: "{}",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success:displayData, // displayData함수로 외부에 출력코드 작성

                error: function (data) { alert('에러 발생'); }

            });

        });

        function displayData(data, status) {

            $('#ctlMemoList').empty();

            var table = "<table><tr><td>번호</td><td>이름</td></tr>";

            // Microsoft Ajax에서는 보안목적으로 data.d로 실제 데이터를 감싸놓음.

            $.each(data.d, function (index, entry) {

                table += '<tr><td>' + entry["Num"] + '</td><td>' + entry["Name"] + '</td></tr>';

            });

            table += "</table>";

            $('#ctlMemoList').append(table);

        }

    </script>

</head>

<body>

    <div id="ctlMemoList"></div>

</body>

</html>

 




-------------------------------------------------------------------------------------




[실행결과]








Posted by holland14
:




[ResponseText.aspx.cs]




using System;

using System.Web.Services;

 

public partial class Ajax_AspNet_ResponseText : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        // Empty

    }

 

    // 날짜값 반환 : 03.DateTimeValueReturn.htm에서 테스트

    [WebMethod]

    public static DateTime GetTime()

    {

        return DateTime.Now.ToUniversalTime();

    }

}




-------------------------------------------------------------------------------------





[03.DateTimeValueReturn.htm]




<!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>

    <title>날짜값 반환</title>

    <script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">       

        // unix time 형태의 시간 문자열을 JavaScript 날짜형으로 변환

        function DateDeserialize(dateStr) {

            return eval('new' + dateStr.replace(/\//g, ' '));

        }

        $(document).ready(function() {

            $.ajax({

                type: "post",

                url: "ResponseText.aspx/GetTime",

                data: "{}",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (data) {

                    var result = data.d;

                    document.write(result); // /Date(1259306350000)/

                    document.write("<br />");

                    var time = DateDeserialize(data.d); // 자바스크립트 날짜형으로 출력

                    document.write(time);

                    var today = new Date(time); // 자바스크립트에서 원하는 형태로 사용 가능

                    document.write("<br />" + today.getFullYear() + "년 입니다.");

                    //return; debugger;

                },

                error: function (data) { alert('에러 발생'); }

            });

        });

    </script>

</head>

<body>

 

</body>

</html>

 




-------------------------------------------------------------------------------------





[실행결과]






 

 


Posted by holland14
:


* 엔터티 타입/Person 형태로 만들어 봄.




[ResponseText.aspx.cs]




using System;

using System.Web.Services;

 

public partial class Ajax_AspNet_ResponseText : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        // Empty

    }

 

    // 개체값 반환 : 02.ObjectValueReturn.htm에서 테스트

    [WebMethod]

    public static Person GetRedPlus()

    {

        // 아래와 같이 했을 때

        // {"d":{"__type":"Person","Name":"홍길동","Age":120,"Male":true}}로 변환됨
        // Ajax쪽에서는 data.d.Name, data.d.Age 식으로 가져감

        return new Person() { Name = "홍길동", Age = 21, Gender = true };

    }

}

 

public class Person

{

    public string Name { get; set; }

    public int Age { get; set; }

    public bool Gender { get; set; }

}

 



-------------------------------------------------------------------------------------

 



[02.ObjectValueReturn.htm]




<!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>

    <title>개체값 반환</title>

    <script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $.ajax({

                type: "post",

                url: "ResponseText.aspx/GetRedPlus",

                data: "{}",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (data) {

                    var result = data.d;

                   

                    var type = result.__type; // "Person"

                    var name = result.Name; // "홍길동"

                    var age = result.Age; // 21

                    var male = result.Gender; // true

                   

                    debugger; // IE : 여기서 멈춤, 디버깅 창 출력(옵션에서 디버깅 사용시)

                },

                error: function (data) { alert('에러 발생'); }

            });

        });

    </script>

</head>

<body>

 

</body>

</html>





-------------------------------------------------------------------------------------




[실행결과]













--> 체크박스 '체크해제'함.






















 

* 위의 그림처럼 "스크립트 디버깅 사용 안함"을 "체크해제"하면 프로그램 개발시에 매번 디버깅 동작이 수행되어 번거로우므로, "스크립트 디버깅 사용 안함"을 체크하여 '스크립트 디버깅'이 매번 수행되는 것을 방지한다.(여기서도 실행 후에 다시 "스크립트 디버깅 사용 안함"을 체크하여 '스크립트 디버깅'이 매번 수행되는 것을 해제한다.)







Posted by holland14
:



** 단일값 반환은 (int / string / bool 타입의 데이터를) "data.d"로 받는다.



--> 아래 그림과 같이 '솔루션 탐색기'에서 '웹폼(WebForm)'형식의 파일인 "ResponseText.aspx"와 'HTML'형식의 파일인 "01.SingleValueReturn.htm"을 생성하고,  "ResponseText.aspx"의 '코드비하인드 페이지'인  "ResponseText.aspx.cs"와 "01.SingleValueReturn.htm"에 아래와 같이 코드를 작성한다.









[ResponseText.aspx.cs]




using System;

using System.Web.Services;

 

public partial class Ajax_AspNet_ResponseText : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        // Empty

    }

 

    // 단일값 반환 : 01.SingleValueReturn.htm에서 테스트

    [WebMethod]

    public static string GetMessage()

    {

        return "닷넷코리아";

    }

}




-------------------------------------------------------------------------------------

 


[01.SingleValueReturn.htm]




<!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>

    <title>단일값 반환 예제</title>

    <script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $.ajax({

                type: "post",

                url: "ResponseText.aspx/GetMessage",

                data: "{}",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (data) {

                    alert(data.d); // 단일값 : {d:'닷넷코리아'}

                },

                error: function (data) { alert('에러 발생'); }

            });

        });

    </script>

</head>

<body>

 

</body>

</html>

 



-------------------------------------------------------------------------------------





[실행결과]







 

 


Posted by holland14
:

jQuery 수업 자료 PPT 파일

2009. 11. 27. 09:22

보호되어 있는 글입니다.
내용을 보시려면 비밀번호를 입력하세요.



[Validate.htm]

<!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>

    <title>회원가입</title>

    <script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script src="jquery.validate-vsdoc.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            //$('#myForm').validate(); // 유효성 검사

            $('#myForm').validate({

                rules: {

                    txtID: { required: true, minlength: 3, remote:"Validate.aspx" },

                    txtPassword: { required: true },

                    txtName: { required: true },

                    txtEmail: { email: true },

                    txtPasswordConfirm: { equalTo: "#txtPassword" },

                    txtAge: { range: [1, 150] }

                },

                messages: {

                    txtID: {

                        required: "아이디를 입력하시오.",

                        minlength: jQuery.format("아이디는 {0}자 이상"),

                        remote : jQuery.format("{0}는 이미 있는 아이디")

                    },

                    txtPassword: { required: "암호를 입력하시오." },

                    txtName: { required: "이름을 입력하시오." },

                    txtEmail: { email: "올바른 이메일을 입력하시오." },

                    txtPasswordConfirm: { equalTo: "암호를 다시 확인하세요." },

                    txtAge: { range: "나이는 1~150" }

                },

                // 아래 코드는 버그

                //submitHandler: function () {

                //    $('#myForm').submit(); // 통과시 전송

                //},

                submitHandler: function (frm) {

                    frm.submit(); // 통과시 전송

                },

                success: function (e) {

                    //

                }               

            });

        });

    </script>

</head>

<body>

<form id="myForm" method="post" action="Validate.aspx">

    아이디 : <input type="text" id="txtID" name="txtID" class="required" /><br />

    암호 : <input type="text" id="txtPassword" name="txtPassword" class="required" /><br />

    암호확인 : <input type="text" id="txtPasswordConfirm" name="txtPasswordConfirm" class="required" /><br />

    이름 : <input type="text" id="txtName" name="txtName" class="required" minlength="2" /><br />

    이메일 : <input type="text" id="txtEmail" name="txtEmail" class="required email" /><br />

    나이 : <input type="text" id="txtAge" name="txtAge" /><br />

   

    <input type="submit" value="전송" />

</form>

</body>

</html>

 



-------------------------------------------------------------------------------------




[Validate.aspx]


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Validate.aspx.cs" Inherits="Module_Validate_Validate" %>

 

<!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>

   

    </div>

    </form>

</body>

</html>

 




-------------------------------------------------------------------------------------





[Validate.aspx.cs]

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

 

public partial class Module_Validate_Validate : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if (Request["txtID"] == "RedPlus")

        {

            Response.Write("false"); // 이미 있는 아이디

        }

        else

        {

            Response.Write("true"); // validation 통과

            }

        Response.End();

    }

}

 




-------------------------------------------------------------------------------------

 


[실행결과]


--> 첫 화면.






--> '전송'버튼을 눌렀을 때




























--> 바로위의 그림에서  텍스트박스에 '유효성 검사'에맞게 데이터를 입력한 후 '전송'버튼을 눌렀을 때의 화면.










Posted by holland14
:


 

    활용예제 : jQuery 사용한 한줄메모장

     

  1. jQuery 응용 프로그램
    • jQuery Ajax 사용해서 데이터 입출력 처리
    • Tooltip 사용하여 내용 표시
    • 기본적인 데이터 입력 출력

     

  2. 프로그램 제작 환경
    • Visual Studio 2010
    • SQL Server 2008 Express
    • ASP.NET 4.0 + Jquery 1.3.2

     

  3. 응용 프로그램 제작시 고려해야할 사항
    • 모든 것을 jQuery 만들려 하지 말자.
      • 기존 서버측 기능을 개선하는 차원에서 jQuery 사용




 

Posted by holland14
:

 

[Uploadify.htm]

<!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>

    <title>파일업로드 : jQuery + Uploadify + ASP.NET</title>

    <link href="uploadify.css" rel="stylesheet" type="text/css" />

    <script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script src="jquery.uploadify.v2.1.0.js" type="text/javascript"></script>

    <script src="swfobject.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

        // Uploadify 파일 업로드 컨트롤 : Flash가 설치가 되어있어야 함

            $('#fileInput').uploadify({

                'uploader' : 'uploadify.swf', // Uploadify 컨트롤 지정

                'script' : 'Uploadify.ashx', // 서버측 스크립트, ASP.NET, ASP, PHP, JSP

                'cancelImg': 'cancel.png', // 취소 이미지

                'auto' : false, // true면 파일선택시 바로 자동으로 업로드됨

                'folder': '/Uploads', // 업로드할 폴더 : 가상디렉터리 + 업로드폴더

                // 업로드 완료시 처리 :

                //      주요 속성은 http://www.uploadify.com/documentation/ 참고

                'onComplete': function (event, queueID, fileObj, response, data) {

                    $('#lblFile').append('<a href=/WebJQuery' + fileObj.filePath + '>'

                    + fileObj.name + '</a><br>');

                }

            });

            // 버튼 클릭시 업로드

            $('#btn').click(function () { $('#fileInput').uploadifyUpload(); });

        });

    </script>

</head>

<body>

    <input id="fileInput" name="fileInput" type="file" />

    <input type="button" id="btn" value="업로드" />

    <div id="lblFile"></div>

</body>

</html>

 




-------------------------------------------------------------------------------------


 

[Uploadify.ashx]


<%@ WebHandler Language="C#" Class="Uploadify" %>

 

using System;

using System.Web;

 

public class Uploadify : IHttpHandler {

   

    public void ProcessRequest (HttpContext context) {

        // Filedata로 넘겨온 파일 값 받기

        HttpPostedFile file = context.Request.Files["Filedata"];

        // 저장할 폴더

        string targetDirectory = System.IO.Path.Combine(

        context.Request.PhysicalApplicationPath,

        context.Request["folder"].Replace("/", ""));

        // 저장할 폴더 + 파일명

        string targetFilePath = System.IO.Path.Combine(

            targetDirectory, file.FileName);

        // 파일 저장(업로드)

        file.SaveAs(targetFilePath);

 

        context.Response.Write("RedPlus");

    }

 

    public bool IsReusable {

        get {

            return false;

        }

    }

 

}




-------------------------------------------------------------------------------------




[실행결과]







































Posted by holland14
:



[AutoComplete.htm]

<!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>

    <title>텍스트박스 자동 완성 기능</title>

    <link href="jquery.autocomplete.css" rel="stylesheet" type="text/css" />

    <script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script src="jquery.autocomplete.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            var data = "ASP JSP PHP Ajax Silverlight JAVA CSS".split(' ');

            $('#search').autocomplete(data);

        });

    </script>

</head>

<body>

   

상품검색 : <input type="text" id="search" />

   

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]









Posted by holland14
:

 

[Rotator.htm]

<!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>

    <title>로테이터 플러그인</title>

    <style type="text/css">

        .divHeight { height:130px; }

    </style>

    <script src="../../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script src="jquery.rotator.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $('#rotator1').rotator({ms:3000});

        });

    </script>

</head>

<body>

    <div id="rotator1" style="height: 130px; width: 100px; overflow: hidden; border:1px solid red;">

        <div class="divHeight">

            <img src="../../ProductImages/thumbs/BOOK-01.jpg" /><br />

            좋은 책

        </div>

        <div>

            <img src="../../ProductImages/thumbs/COM-01.jpg" /><br />

            좋은 컴퓨터

        </div>

    </div>

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]













Posted by holland14
: