개발자.. 너란놈..

오랜만에 찾아 뵙습니다.

현재 회사에서는 Ajax 파리미터를 단일건으로만 보내고 있었습니다.

Object 형식으로 DataTable 형태로 파라미터를 던져 중요한 데이터만 가지고 쿼리를 조지는 형태로만 사용중이였는데

MASTER / DETAIL 형태로 데이터를 가져가야만 하는 로직이 생겨서 아래와 같이 정리합니다.

1. JAVASCRIPT (Json 형태 만들기)

var array_mst = new Array();
        var array_dtl = new Array();
        var final_vJsonData = new Object();
        var vJsonData_MST = new Object;
        vJsonData_MST.MST_A = "";
        vJsonData_MST.MST_B = "";
        vJsonData_MST.MST_C = "";
        vJsonData_MST.MST_D = "";
        array_mst.push(vJsonData_MST);

        $.each($("#PutAway_Result_Area tr"), function (i) {

            var vJsonData_DTL = new Object;

            vJsonData_DTL.DTL_A = "";
            vJsonData_DTL.DTL_B = "";
            vJsonData_DTL.DTL_C = "";
            vJsonData_DTL.DTL_D = "";

            array_dtl.push(vJsonData_DTL);
        });

        final_vJsonData.MST = array_mst;
        final_vJsonData.DTL = array_dtl;

2. AJAX

$.ajax({
    type: "POST",
    url: "",
    async: true,
    dataType: "json",
    data: { "vJsonData": _fnMakeJson(final_vJsonData) },
    success: function (result) {
        alert();
    }, error: function (xhr, status, error) {
        console.log(error);
    }
});

//C#의 JsonConvert.DeserializeObject<DataSet> 쓰기위해서는 양쪽의 대괄호를 빼야됨
function _fnMakeJson(data) {
    if (data != undefined) {
        var str = JSON.stringify(data);
        if (str.indexOf("[") == -1) {
            str = "[" + str + "]";
        }
        return str;
    }
}

3. C#

DataSet ds = JsonConvert.DeserializeObject<DataSet>(JSON파라미터);

이와같이 Dataset으로 데이터를 가져와서 조지면 되는것을 2시간이나 허비하면서 삽질 하여 적어둡니다.

다음엔 이런 실수 안하길..

JavaScript에서 C#으로 데이터를 넘길 때 보통은 FormData를 생성하여 데이터를 이동시켜서 파싱하는 방법이나

Object에 담아서 던지는 방법 2가지를 채택하여 저는 사용합니다.

그 중에서 제일 간편하게 사용하는 방법은 Javascript에서 Json형식으로 데이터를 가공하여 사용하는 편인데요

하지만 오늘 설명 할 것은 Object로 바로 넘겨서 데이터를 파싱 및 해당 Object를 다시 넘겨서 다시 파싱하는 방법을 찾아서 정리 하려고 합니다.

다른 좋은 방법이 더 있다면 댓글로 남겨주세요 ㅎㅎ

JavaScript

※Object로 데이터를 묶어서 C#으로 보냅니다.
=======자바스크립트 예제======

var callObj = new Object();

callObj.Option = "데이터";
callObj.Type = "데이터";
callObj.SearchText = "데이터";
callObj.Page = "데이터";

$.ajax({
	type: "POST",
	url: "url",
	async: false,
	dataType: "json",
	data: callObj,
success: function (result) {
	결과
}, error: function (xhr)
	에러
}
});

=====C# 예제======
//C# Object 파라미터를 받을 수 있게 만든 매개변수 함수

public class ParamsData
{
	//JavaScript에서 보낼때 key값과 동일하게 맞춰야됩니다.
	public string Option { get; set; }
	public string Type { get; set; }
	public string SearchText { get; set; }
	public int Page { get; set; }
}

//예제 데이터 ParamsData rtnVal(매개변수명)

public string example(ParamsData rtnVal)
{
	string rtnJson = "";
	try
	{
		if (rtnVal != null)
		{
			string strOpt = rtnVal.Option; //JavaScript에서 만든 Key값 으로 데이터 받을 수 있음.
			string strType = rtnVal.Type;
			string strText = rtnVal.SearchText;
			int pageIndex = rtnVal.Page;

       	 	//다른 함수로 Object 데이터를 넘길 때.
       		Another_function(rtnVal); //다른 메소드로 데이터를 한번에 옮길때 Object 형식으로 보내면 됩니다.
    	}
    	return rtnJson;
	}
	catch (Exception e)
	{
	    return rtnJson;
	}
}

//다른 함수 (오브젝트 파싱하여 받기)
※Object 형식을 Json으로 파싱 이후 Json데이터를 dictionary로 변환하여 사용한 예제 입니다.
DataTable로 변환 하려고 하였지만 실패하였고 JObject를 사용하여 Json을 파싱 하였지만 for문으로 돌려서 하나씩 가져와야되는 불편함이 있어서 dictionary를 사용하였습니다.
public string Another_function(object value)
{
//JsonConvert를 사용하기 위해서는 NewtonJson.dll을 Nuget에서 다운받아서 사용하여야 합니다.

var dictionary = JsonConvert.DeserializeObject<Dictionary<string, string>>(JsonConvert.SerializeObject(value).ToString());

	string stringOption = dictionary["Option"].ToString();
	string stringType = dictionary["Type"].ToString();
	string stringSearchText = dictionary["SearchText"].ToString();
	string nPage = dictionary["Page"].ToString();

	return "";

}

이상 JavaScript 데이터를 C#으로 C#의 Object 데이터를 다른 함수로 전달해서 사용하는 방법을 정리해 보았습니다.
C# 지식이 짧아 더 좋은 방법이 있는지 까지는 백방으로 찾아보았지만 아직까지는 더 좋은 방법을 찾지는 못하였습니다.

정리한 소스가 다른 분들에게 도움이 됐으면 하네요 ㅎㅎ

ajax로 파일업로드할떄

contentType: false

processData: false

이 없으면 illegal invocation Error가 뜸. 

결론: ajax로 파일 업로드할 때는 

contentType: false

processData: false

======================================================

2021.03.04 내용 추가

Form 데이터를 감싸서 파일로 던질때는 전부다 Name으로 HTML태그로 넣어야지 데이터를 보낼 수 있고.

Form ID로 아래와 같이 감싸서 data를 Ajax로 보내야지만 back단으로 보낼 수 있다.

var formData = new FormData(vForm[0]);

이때 vForm은 해당 form의 ID를 넣어주면 됩니다.

아래는 예시

var vForm;

if (matchMedia("screen and (min-width: 1025px)").matches) 
{
	//pc
	vForm = $("#SolutionQ_Form_pc");
} 
else 
{
	//mo
	vForm = $("#SolutionQ_Form_mo");
}

var formData = new FormData(vForm[0]);

$.ajax({
	type: "POST",
	url: "/HP_File/Upload_EmailFiles",
	async: true,
	dataType: "json",
	contentType: false, //Ajax로 이메일 보낼 때 필수 추가 하여야 합니다.
	processData: false, //Ajax로 이메일 보낼 때 필수 추가 하여야 합니다.
	data: formData,
	success: function (result) {

	}
});

$.ajax({
	type: "POST",
	url: 유알엘(Url),
	dataType: "json",
	data: 데이터,
	success: function (result, status, xhr) {
		//결과 값 
	},
	beforeSend: function (){  
		$("#Progress_Bar").show(); //프로그래스 바
	},
	complete : function (){
		$("#Progress_Bar").hide(); //프로그래스 바
	},
	error: function (xhr, status, error) {
		alert("[Error]관리자에게 문의 해 주세요. " + status);
		return;
	}
});

beforeSend는 Ajax를 보내기 전에 쓰는 함수

complete는 ajax 작업이 끝나고 나서 쓰는 함수.

ajax에 async: false 로 되어있다면 프로그래스는 되지 않을 것 입니다.

[2021.05.07]
Success의 데이터의 return의 결과를 보내고 싶을 때.
동기식으로 꼭 설정을 바꿔주고 보내야 됩니다.


꼭 async를 false로 해주고
return은 밖으로 빼 줘야지 defined가 나오지 않는다.

간략요약
비동기 , 동기 식의 데이터를 제대로 알지 못하였을 때 작성한 글인 것 같다.
동기식일때 async를 해두면 전체적으로 데이터를 처리하고나서 success를 타고 데이터가 넘어감.
비동기식일때는 async false로 두면 전체적으로 데이터를 전부 다 체크하고 success까지 체크한 다음에 로직으로 넘어감.
결국 return을 함수내에서 쓰려면 비동기식으로 무조건 써야되고 아니면 동기식으로 쓰고 return을 success 안에다가 넣아야 된다.

이제는 너무 잘 아는 ajax.. 그래도 모르는 기능들이 많겠지

$.ajax
    ({
        type: "GET",
        url: URL, 
        async: false, //동기식 , 비동기식 설정
        success: function (result) {					
            //값 없을 시
            if (result.MAIN.length == "0") {
                vResult = false;
            }
            else {
                vResult = true;
            }
        },
        error: function (xhr,status,error) {
            alert("[Error]"+error);
            return;
        }
    }); //end ajax

    return vResult; //아작스 밖
};