|
|
<script>
// XMLHttpRequest 객체를 생성하는 함수
// 현존하는 모든 브라우저에서 동작합니다.
function createRequest() {
var request;
try {
request = new XMLHttpRequest();
} catch (exception) {
try {
request = new ActiveXObject('Msxml2.XMLHTTP');
} catch (innerException) {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
}
return request;
}
// 페이지 로드시 수행
window.onload = function () {
// 객체를 생성
var request = new createRequest();
// 비동기화 처리
request.onreadystatechange = function (event) {
if (request.readyState == 4) { //모든 데이터를 받음
if (request.status == 200) { // 2XX 성공
document.body.innerHTML = request.responseText;
}
}
};
request.open('GET', '/HOME/ActionWithData?name=parkkwangho&age=31', true);
request.send(); //Ajax 를 수행
};
</script>
비동기 처리로 웹서비스 호출
결과 :
// 페이지 로드시 수행
window.onload = function () {
// 객체를 생성
var request = new createRequest();
// 비동기화 처리
request.onreadystatechange = function (event) {
if (request.readyState == 4) { //모든 데이터를 받음
if (request.status == 200) { // 2XX 성공
var json = eval('(' + request.responseText + ')');
var willIn = '';
for (var i in json) {
willIn += '<h1>' + i + ':' + json[i] + '</h1>';
}
document.body.innerHTML = willIn;
}
}
};
request.open('GET', '/HOME/MyFirstJSONAction', true);
request.send(); //Ajax 를 수행
};
수행결과
name:제시카
gender:여자
part:보컬
xml 데이타를 적절하게 받아서 처리하는 코드입니다.
Ajax 웹서비스 호출하기
ajax 호출을 합니다.
$(document).ready(function () {
$.ajax('/Home/MyFirstStringAction', {
success: function (data) {
$('body').append(data);
}
});
});
결과
Hello ASP.NET MVC
Ajax 호출 구조
$.ajax({
url: '/Home/ActionWithData',
data: { name: 'parkkwangho', age: 31 },
success: function (data) {
$('body').append(data);
}
});
DataBase 연결하기
실무에서 로컬데이타 베이스를 사용하지 않지만, 데모를 위해서 사용하였습니다. 데이타베이스를 추가하고 오른쪽 서버탐색기에서 DB에 Table을 추가 하여 줍니다.
People 테이블을 추가한 후 Id 컬럼은 기본키로 지정을 하여야 ASP.NTE MVC3에서 데이타를 가져오게 됩니다. 또한 ID사용 속성에서 "예"로 설정하여 데이타가 추가시 자동인데싱 되게 설정합니다.
그리고 Models 에 LINQ to SQL 를 추가하여 줍니다. PeopleDataClasses 라고 파일을 생성합니다. People 데이타베이스를 드래그 하여 추가하면 속성에 PeopleDataClassesDataContent 라고 나옵니다.
(Peopledataclasses 를 선택후 속성의 Name을 확인합니다.)
PeopleDataClassesDataContent 이름을 간편하게 PeopleDB 로 변경하여 사용합니다.
코드
public ActionResult GetPeopleJSON()
{
var peopleDB = new PeopleDB();
return Json(peopleDB.People, JsonRequestBehavior.AllowGet);
}
데이타의 내용을 JSON 형태로 리턴 받을 수 있습니다.
결과
[{"Id":1,"Name":"김연아","Gender":"여","Region":"미국 로스엔젤레스","BloodType":"B"},{"Id":2,"Name":"김아름","Gender":"여","Region":"서울 강서구","BloodType":"AB"},{"Id":3,"Name":"차인성","Gender":"남","Region":"서울 영등포","BloodType":"O"},{"Id":4,"Name":"김아링","Gender":"여","Region":"서울 서초구","BloodType":"B"},{"Id":5,"Name":"연수지","Gender":"여","Region":"부산 해운대","BloodType":"O"},{"Id":6,"Name":"김차성","Gender":"남","Region":"도쿄","BloodType":"AB"},{"Id":7,"Name":"아랑리","Gender":"여","Region":"일본","BloodType":"O"},{"Id":8,"Name":"아알안","Gender":"여","Region":"서울","BloodType":"B"},{"Id":9,"Name":"김타라","Gender":"남","Region":"서울","BloodType":"B"},{"Id":10,"Name":"차알아","Gender":"남","Region":"서울","BloodType":"B"},{"Id":11,"Name":"니라안","Gender":"남","Region":"서울","BloodType":"A"},{"Id":12,"Name":"앙갱나","Gender":"남","Region":"일본","BloodType":"A"},{"Id":13,"Name":"김알니","Gender":"여","Region":"중국","BloodType":"AB"},{"Id":14,"Name":"박앙라","Gender":"여","Region":"도쿄","BloodType":"O"},{"Id":15,"Name":"사하람","Gender":"남","Region":"큐슈","BloodType":"O"},{"Id":16,"Name":"김사랑","Gender":"남","Region":"서울 인사동","BloodType":"A"},{"Id":17,"Name":"짐케리","Gender":"여","Region":"서울 서초","BloodType":"A"},{"Id":18,"Name":"차랑니","Gender":"여","Region":"서울 강남","BloodType":"O"},{"Id":19,"Name":"소인르","Gender":"남","Region":"서울 강남","BloodType":"A"},{"Id":20,"Name":"소은미","Gender":"남","Region":"서울 영등포","BloodType":"O"},{"Id":21,"Name":"인성림","Gender":"여","Region":"서울 강서구","BloodType":"A"}]
데이타 입력처리
데이타 입력 수행하기
http://localhost:4474/Home/InsertPerson?name=o&gender=여®ion=o=bloodtype=ab
// 데이타를 가져옵니다.
public ActionResult GetPeopleJSON()
{
var peopleDB = new PeopleDB();
return Json(peopleDB.People, JsonRequestBehavior.AllowGet);
}
// 데이타추가
public ActionResult InsertPerson(string name, string gender, string region, string bloodType)
{
var willAdd = new People();
willAdd.Name = name;
willAdd.Gender = gender;
willAdd.Region = region;
willAdd.BloodType = bloodType;
try
{
var peopleDB = new PeopleDB();
peopleDB.People.InsertOnSubmit(willAdd);
peopleDB.SubmitChanges();
return Content("INSERT SUCCESS");
}
catch (Exception ex)
{
// 데이타 입력에 실패할 경우
return HttpNotFound();
}
}
//데이타 삭제
public ActionResult DeletePerson(int id)
{
try
{
var peopleDB = new PeopleDB();
var willDelete = peopleDB.People.Single(x => x.Id == id);
peopleDB.People.DeleteOnSubmit(willDelete);
peopleDB.SubmitChanges();
return Content("DELETE SUCCESS");
}
catch (Exception ex)
{
return HttpNotFound();
}
}
public ActionResult UpdataPerson(int id, string region)
{
try
{
var peopleDB = new PeopleDB();
var willUpdata = peopleDB.People.Single(x => x.Id == id);
willUpdata.Region = region;
peopleDB.SubmitChanges();
return Content("Update SUCCESS");
}
catch
{
return HttpNotFound();
}
}
|
|
