WebCamp

시삽: 레드플러스 님 
게시판 이동:
 제목 : 5. ASP.NET Web API + jQuery: MaximCrudWithJavaScriptQuery.html
글번호: 33
작성자: Administrator ( 레드플러스 / redplus@live.com )
작성일: 2015/04/14 오전 6:49:21
조회수: 1914
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="/Scripts/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        // ASP.NET Web API와 jQuery Ajax를 사용한 CRUD 기능 구현

        // Web API 주소
        var API_URL = "/api/maximservice/";

        // 상태 클리어
        function clearStatus() {
            $("#status").html('');
        }
        function clearField() {
            $("#name").val('');
            $("#content").val('');
        }

        function displayData() {
            $('#lstMaxims').html('');
            // cRud : Read
            // 전체 명언 리스트를 읽어서 출력
            $.getJSON(API_URL, function (data) {
                $.each(data, function (key, val) {
                    var str = val.id + ", " + val.name + ", " + val.content;
                    $("<li/>", { html: str }).appendTo("#lstMaxims");
                });
            });
        }

        // Page_Load
        $(function () {

            // 전체 레코드 출력
            displayData();

            // Crud : Create
            $("#btnAdd").click(function () {
                clearStatus();
                //[a] 데이터 받기
                var name = $('#name').val();
                var content = $('#content').val();
                //[b] JSON 개체로 묶기 : " + 변수 + "
                var json =
                    "{name:\"" + name + "\", content:\"" + content + "\"}";
                //[c] 전송
                $.ajax({
                    url: API_URL,
                    cache: false,
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    data: json,
                    statusCode: {
                        201: function (data) {
                            var str =
                                data.id + ", " + data.name + ", " + data.content;
                            $("<li/>", { html: str }).appendTo("#lstMaxims");
                        }
                    }
                });
                clearField();
            });

            // cRud : Retrieve(조회)
            $("#btnFind").click(function () {
                clearStatus();
                clearField();
                // id값 가져오기
                var id = $("#id").val();
                // 특정 번호에 해당하는 명언 정보를 읽어서 출력
                $.getJSON(API_URL + id, function (data) {
                    $("#name").val(data.name);
                    $("#content").val(data.content);
                }).fail(function (xhr, textStatus, err) {
                    $("#status").html("에러 : " + err);
                });
            });


            // crUd : PUT
            $("#btnUpdate").click(function () {
                clearStatus();
                //[!] ID 값 받기
                var id = $("#id").val();
                //[a] 데이터 받기
                var name = $('#name').val();
                var content = $('#content').val();
                //[b] JSON 개체로 묶기 : " + 변수 + "
                var json =
                    "{id:\"" + id + "\", name:\"" + name + "\", content:\"" + content + "\"}";
                //[c] 전송
                $.ajax({
                    url: API_URL + id, // /api/maximservice/3
                    cache: false,
                    type: 'PUT',
                    contentType: 'application/json; charset=utf-8',
                    data: json,
                    success: function () {
                        displayData(); // 데이터가 수정되었으면 다시 출력
                    }
                }).fail(function (xhr, textStatus, err) {
                    $('#status').html("에러 : " + err);
                });
                clearField();
            });



            // cruD : DELETE
            $("#btnDelete").click(function () {
                clearStatus();
                //[!] ID 값 받기
                var id = $("#id").val();
                //[c] 전송
                $.ajax({
                    url: API_URL + id, // /api/maximservice/3
                    cache: false,
                    type: 'DELETE',
                    contentType: 'application/json; charset=utf-8',
                    data: {},
                    success: function () {
                        displayData();
                    }
                }).fail(function (xhr, textStatus, err) {
                    $("#status").html("에러 : " + err);
                });
                clearField();
            });


        });
    </script>
</head>
<body>


    <h2>명언 리스트</h2>



    <div>
        <h3>명언 리스트</h3>
        <ul id="lstMaxims"></ul>
    </div>

    <div>
        <h3>명언 상세</h3>
        <div>
            <label for="id">번호: </label>
            <input type="text" name="id" id="id" value="" />
        </div>
        <div>
            <label for="name">이름: </label>
            <input type="text" name="name" id="name" value="" />
        </div>
        <div>
            <label for="content">내용: </label>
            <input type="text" name="content" id="content" value="" />
        </div>
        <div>
            <input type="button" name="btnAdd" id="btnAdd" value="추가" />
            <input type="button" name="btnFind" id="btnFind" value="찾기(번호검색)" />
            <input type="button" name="btnUpdate" id="btnUpdate" value="수정" />
            <input type="button" name="btnDelete" id="btnDelete" value="삭제" />
        </div>
    </div>

    <div>
        <p id="status"></p>
    </div>

</body>
</html>

 

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


관련 아티클 리스트
  제       목 파일 작성자 작성일 조회
이전글 8. 데모 소스 다운로드 링크 - Administrator 2015-03-19 1974
  7. 미니 프로젝트: Build, Deploy, Scale - Administrator 2015-02-17 1658
  7-Conclusion.pdf 7-Conclusion.pdf(733 KB) Administrator 2015-04-02 1812
  1. 클래스 설계 : Maxim - Administrator 2015-04-14 1843
  2. EF Code First - Administrator 2015-04-14 1629
  3. MaximServiceRepository.cs - Administrator 2015-04-14 1658
  4. MaximServiceController.cs - Administrator 2015-04-14 1624
현재글 5. ASP.NET Web API + jQuery: MaximCrudWithJavaS... - Administrator 2015-04-14 1914
  6. ASP.NET Web API + AngularJS + Bootstrap: Max... - Administrator 2015-04-14 1752
다음글 6. Microsoft Azure Website에 웹 프로젝트 배포 및 관리 - Administrator 2015-02-17 1744
관련 페이지 리스트
titlenamedateview
0. WebCamp 2015 소개 Administrator 2015-02-17 2334
0-Web Camp 2015 Keynote.pdf Administrator 2015-04-02 1913
Visual Studio Community 2013 소개 및 다운로드 그리고 설치 설... Administrator 2015-04-20 1899
Microsoft Azure - Azure Pass를 통한 Microsoft Azur... Administrator 2015-04-20 1750
WebCamp - 강의시 사용한 소스: DevCamp란 이름으로 Administrator 2015-08-12 1677
1. ASP.NET과 Visual Studio 2013을 활용한 최신 웹 개발 기법과... Administrator 2015-02-17 2439
01._Web 개발자들을 위한 Visual Studio 2015 확장 및 업데이트 기... Administrator 2015-03-13 1941
Visual Studio로 웹 개발시 도움이 되는 Web Essentials 확장 기... Administrator 2015-04-20 2231
Visual Studio 2013 확장 기능 jQuery Code Snippets 소... Administrator 2015-04-20 1701
02_WebCamp 웹 프로젝트 생성 및 기본 페이지 작성 그리고 Test 및 Dat... Administrator 2015-03-13 1868
- Microsoft SQL Server Data Tools 2013 설치(데이터베이... Administrator 2015-04-08 1872
03_Nuget을 사용하여 프로젝트에 jQuery, Bootstrap, Angular... Administrator 2015-03-13 1857
(영어) NuGet 사용에 대한 좋은 소개 동영상 Administrator 2015-04-08 1899
발표자료: 1-Visual Studio 2013.pdf Administrator 2015-04-02 1768
2. 최신 ASP.NET 기술로 웹 응용프로그램 만들기(One ASP.NET) Administrator 2015-02-17 2184
04. EF Scaffolding 기능을 사용하여 CRUD 기능 구현하기 Administrator 2015-03-15 1749
05. Micro ORM인 Dapper를 사용하여 데이터 조회하는 페이지 구현 Administrator 2015-03-15 2344
2-One ASP.NET.pdf Administrator 2015-04-02 1718
3. jQuery, AngularJS, Bootstrap 등을 활용한 모던 웹 클라이... Administrator 2015-02-17 2411
3-Modern Web Client Dev.pdf Administrator 2015-04-02 1578
4. REST와 Ajax를 위한 ASP.NET Web API Administrator 2015-02-17 2122
4-ASP.NET Web API.pdf Administrator 2015-04-02 1848
동영상 - Visual Studio 2015를 사용하여 초간단 Web API 만들고 ... Administrator 2015-04-10 1741
5. ASP.NET SignalR을 이용한 실시간 양방향 커뮤니케이션 구현 Administrator 2015-02-17 2090
실습: ASP.NET SignalR 초간단 채팅 만들기 Administrator 2015-03-08 2348
5-ASP.NET SignalR.pdf Administrator 2015-04-02 1688
6. Microsoft Azure Website에 웹 프로젝트 배포 및 관리 Administrator 2015-02-17 1744
6-Azure Website.pdf Administrator 2015-04-02 1666
(동영상) ASP.NET 웹 프로젝트 생성 후 Microsoft Azure 웹 앱에 ... Administrator 2015-04-21 1728
Azure WebApp 01: Microsoft 무료 Visual Studio Onl... Administrator 2015-05-14 1847
Azure WebApp 02: Azure에 웹앱 만들고 Visual Studio 20... Administrator 2015-05-14 1897
Azure WebApp 03: VSO와 Azure Web App을 함께 사용하기웹앱에... Administrator 2015-05-14 1829
Azure Web App 04: Azure Web App에 대한 환경 설정 소개하기 Administrator 2015-05-14 1826
Azure Web App 05: SQL Azure 데이터베이스 기반 Azure Web... Administrator 2015-05-14 1815
Azure 웹 앱 01: 01 Azure 웹 앱 처음으로 만들어 보기 Administrator 2016-01-13 1827
Azure 웹앱 02: 02 Azure 웹 앱을 오픈소스인 DNN Platform을 ... Administrator 2016-01-13 1938
7. 미니 프로젝트: Build, Deploy, Scale Administrator 2015-02-17 1658
7-Conclusion.pdf Administrator 2015-04-02 1812
1. 클래스 설계 : Maxim Administrator 2015-04-14 1843
2. EF Code First Administrator 2015-04-14 1629
3. MaximServiceRepository.cs Administrator 2015-04-14 1658
4. MaximServiceController.cs Administrator 2015-04-14 1624
5. ASP.NET Web API + jQuery: MaximCrudWithJavaS... Administrator 2015-04-14 1914
6. ASP.NET Web API + AngularJS + Bootstrap: Max... Administrator 2015-04-14 1752
8. 데모 소스 다운로드 링크 Administrator 2015-03-19 1974
데모 소스 실행 순서 Administrator 2015-06-03 1727
추천 경로 Administrator 2015-11-25 1687
ASP.NET 5 MVC 6 Administrator 2016-01-12 1815
ASP.NET 5 MVC6에서 제공하는 빈 템플릿을 사용하여 웹 사이트 만들고 실행하... Administrator 2016-01-12 1658
ASP.NET 5 MVC 6 빠르게 살펴보기 Administrator 2016-01-12 2390
SQL Server 데이터베이스 프로젝트 샘플: DotNetNote.Database Administrator 2016-01-20 1844
ASP.NET Core 1.0(ASP.NET 5) 게시판 및 데모 샘플 프로젝트: D... Administrator 2016-01-20 1942
Azure Camp 2018-08-24 Administrator 2018-08-20 1656
Azure HOL 2018-08-24 Administrator 2018-08-20 1455
Azure HOL Administrator 2018-10-08 1476
Azure Camp Slide Administrator 2018-10-08 1379
Azure Camp 20181211.pdf Administrator 2018-12-07 1472
Azure HOL 20181207.pdf Administrator 2018-12-07 1433
 
 
 
손님 사용자 Anonymous (손님)
로그인 Home