'2010/06/28'에 해당되는 글 1건

  1. 2010/06/28 AJAX + ASP.NET (1)
크리에이티브 커먼즈 라이선스
Creative Commons License

ASP.NET을 이용하여 AJAX 통신을 해보겠습니다.

먼저 아래의 그림과 같이 코딩을 합니다.


이미지를 보면 번호가 붙어 있는데요. 각 번호에 대한 설명은 아래와 같습니다.
1번 - AJAX 통신을 위해 ScriptManager를 이용합니다. ScriptManager는 참조경로로 CostService.svc 를 연결합니다.
2번 - HTML 콘트롤로 버튼을 하나 생성합니다. 클릭시 자바스크립트로 연결됩니다. Button1_onclick()를 호출합니다.
3번 - AJAX 통신으로 취합된 데이터를 출력하는 엘리먼트 입니다.


1번에 보여진 svc 설정을 위해 아래의 그림과 같은 절차를 이행합니다.
먼저 프로젝트에서 마우스 우클릭하고, Add > New Item 을 클릭합니다.
.svc 선택을 위해 AJAX-enabled WCF Service를 선택하고 Name CostService.svc 를 적어 줍니다.

Add 버튼을 클릭하고 svc를 추가합니다.
svc의 내용은 다음과 같습니다.
설명은 코드상에 주석으로 표기해 놓았습니다.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Configuration;
using System.Web.Configuration;
using System.Collections.Generic;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;
using System.Data.SqlClient;
using System.Data;
using System.Runtime.Serialization;
using System.Runtime.Serialization.Json;
using Pesta.Utilities.Helpers;

//네임스페이스는 SandwichServices 입니다.
namespace SandwichServices
{

    [ServiceContract(Namespace = "SandwichServices")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class CostService : BaseCode
    {
        [OperationContract]
        public string CostOfSandwiches()
        {
            //BaseCode에서 연결 문자열을 가져옵니다.
            //코드 내용은아래에 있습니다.
            BaseCode bc = new BaseCode();
            string strConnection = bc.strConnection;

            //데이터베이스에 연결하고 오픈합니다.
            SqlConnection con = new SqlConnection();
            con.ConnectionString = strConnection;
            con.Open();

            //데이터를 가져오기 위한 쿼리 문자열을 생성합니다.
            //운영할 때 편이성을 위해 이렇게 코드에 쿼리를 넣는 것 보다는 SP로 하는게 더 낫습니다.
            string Query = string.Empty;
            Query = "select * from leeho_test";

            SqlCommand cmd = new SqlCommand(Query, con);
            SqlDataAdapter adp = new SqlDataAdapter(cmd);
            DataSet ds = new DataSet();
            adp.Fill(ds);

            //데이터 셋을 JSONHelper 객체로 보내 JSON 문자열을 생성합니다.
            Pesta.Utilities.Helpers.JSONHelper jh = new Pesta.Utilities.Helpers.JSONHelper();
            string ss = jh.ToJSON(ds);

            return ss;
           
        }
    }
}

//아래는 JSON 헬퍼 입니다.
//헬퍼 클래스는 2개의 메서드를 가지는데 하나는 데이터 셋을 인자로 받고, 다른 하나는 데이터 테이블을 직접 전달할 수
//있게 되어 있습니다.
namespace Pesta.Utilities.Helpers
{

    public class JSONHelper
    {
        #region Made from datatable of dataset to JSON string
        /// <summary>
        /// WriteDate : 2010-06-14
        /// Author : Jonghyun, Park
        /// Content: Made from DataTable of DataSet to JSON
        /// </summary>
        /// <param name="obj">DataSet</param>
        /// <returns>jsonBuilder</returns>
        public string ToJSON(DataTable dt)
        {
            return MakeData(dt);
        }
        #endregion

        #region Made from DataSet of dataset to JSON
        /// <summary>
        /// WriteDate : 2010-06-14
        /// Author : Jonghyun, Park
        /// Content: Made from DataSet of dataset to JSON
        /// </summary>
        /// <param name="obj">DataSet</param>
        /// <returns>jsonBuilder</returns>
        public string ToJSON(DataSet obj)
        {
            DataTable dt = obj.Tables[0];
            return MakeData(dt);
        }
        #endregion

        #region Make Data
        /// <summary>
        /// WriteDate : 2010-06-14
        /// Author : Jonghyun, Park
        /// Content: Make Data
        /// </summary>
        /// <param name="dt">DataTable</param>
        /// <returns></returns>
        private static string MakeData(DataTable dt)
        {
            StringBuilder jsonBuilder = new StringBuilder();
            jsonBuilder.Append("[");
           
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                jsonBuilder.Append("{");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    jsonBuilder.Append("\""+ dt.Columns[j].Caption +"\":\"");
                    jsonBuilder.Append(dt.Rows[i][j].ToString());
                    jsonBuilder.Append("\",");
                }
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                jsonBuilder.Append("},");
            }
            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);

            jsonBuilder.Append("]");
            return jsonBuilder.ToString();
        }
        #endregion
    }
}


아래는 BaseCode.cs 입니다.

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Configuration;

namespace SandwichServices
{
    public class BaseCode
    {
        public string DBKEY = string.Empty;
        public string GETKey = tring.Empty;
        private string dbkey {
            get {
                return DBKEY;
            }
            set {
                dbkey = DBKEY;
            }
        }
        public string strConnection = ConfigurationManager.ConnectionStrings["ApplicationServices"].ToString();
    }
}

   

다 되었으면 2번 내용을 준비합니다.
Button1_onclick() 함수를 자바스크립트로 만들어야 하는데요. 코드는 아래와 같습니다.

설명을 하자면....
1번 Button1_onclick 함수는 svc에서 노출된 함수를 호출합니다. 호출된 json 문자열을 2번 onSuccess 함수에 값으로 전달하게 되고 onsuccess 함수는 전달된 json 문자열을 div 엘리먼트의 id가 dvPrintData 객체에 그 값을 전달하여 출력하게 합니다.

출력 결과는 아래와 같습니다.


이상으로 AJAX + ASP.NET의 가장 기초적인 작성을 해봤습니다.


저작자 표시 비영리 변경 금지
Posted by -세티-

TRACKBACK http://www.setisigns.net/trackback/385 관련글 쓰기

댓글을 달아 주세요

  1. 김상윤

    다음것을 하면은 SandwichServices이것을 찾을수 없다는에러메시지가 생성 됩니다. 무슨 문제인가요

    2010/10/26 16:09 [ ADDR : EDIT/ DEL : REPLY ]