ASP.NET Core .NET DataConnector를 사용하여 Salesforce 데이터 위에 웹 API 만들기
페이지 정보
작성자 GrapeCity
작성일 2022-05-26 16:54 조회 706회
댓글 0건
본문
관련링크
를 사용하면 OData, Kintone, Salesforce, Dynamics365Sales, GoogleAnalytics 등을 비롯한 다양한 데이터 소스 유형에 바인딩할 수 있습니다. 이 블로그에서는 를 사용하여 웹 API를 만들고 이를 다양하게 활용해 보겠습니다. 예를 들어, 브라우저를 사용하여 API 메서드 호출하기, Excel에서 차트 만들기, Javascript를 사용하여 FlexGrid에서 CRUD 연산 수행하기 등이 가능합니다.
이 블로그에서는 위에 언급한 각 작업에 대해 아래 섹션을 통해 자세히 설명하겠습니다.
이제 Salesforce 데이터에서 웹 API를 만드는 것부터 시작하겠습니다.
Salesforce에서 웹 API 만들기
Visual Studio 2019를 열고 새 프로젝트 만들기 선택
사용 가능한 프로젝트 템플릿 목록에서 ASP.NET Core Web API 템플릿을 선택한 후 다음 클릭
구성 프로젝트 창에서 프로젝트 이름을 SalesforceAPI로 설정하고 적절한 위치를 지정한 후 만들기 클릭
다음에 나타나는 추가 정보 대화 상자에서 대상 프레임워크가 .NET Core 3.1로 설정되었는지 확인한 후 만들기 클릭
2단계: NuGet 패키지 설치
프로젝트를 성공적으로 만든 후에는 를 사용하여 Salesforce 데이터로 작업할 필수 NuGet 패키지를 추가할 것입니다. 구체적으로는 를 사용하게 됩니다.
시작하려면 NuGet의 웹 API 프로젝트에 다음 NuGet 패키지를 설치해야 합니다.
C1.AdoNet.Salesforce
C1.EntityFrameworkCore.Salesforce
Microsoft.EntityFrameworkCore.Tools
3단계: 모델 클래스 및 데이터베이스 컨텍스트 추가
이제 웹 API를 통해 상호 작용하려는 각 표에 대한 모델 클래스와 데이터베이스 컨텍스트를 생성하겠습니다. ComponentOne DataConnectors는 에서 설명하는 것처럼 모델 및 데이터베이스 컨텍스트 클래스를 생성하기 위한 스캐폴딩을 지원합니다.
동일한 스캐폴딩 접근 방법을 사용하여 Customer__c 표에 대한 모델 및 데이터베이스 컨텍스트 클래스를 자동으로 생성하겠습니다. 앞의 단계는 모델 및 데이터베이스 컨텍스트 클래스를 생성 및 등록하는 과정을 안내할 것입니다.
솔루션 탐색기에서 프로젝트를 마우스 오른쪽 버튼으로 클릭합니다. 추가 > 새 폴더를 선택합니다. 새 폴더 이름을 Models로 지정하고 다음 스캐폴드 명령을 실행하여 Models 폴더에 모델 및 컨텍스트 클래스를 생성합니다. 아래 명령은 연결 문자열 특성의 실제 값을 지정하지 않는다는 점에 유의하십시오. 이는 자리 표시자를 true 값으로 바꾼 경우에 유용합니다.
Scaffold-DbContext "Username = *****; Password = *****; Security Token = *****; OAuth Client Id = *****; OAuth Client Secret = *****; OAuth Token Endpoint = https://ap16.salesforce.com/services/oauth2/token; Url=https://ap16.salesforce.com/services/data/v42.0; Use Cache = 'true'; Cache provider = 'Microsoft.Data.SqlClient'; Cache connection = 'Server=*****;Database=*****;User Id=*****;Password=*****;'" C1.EntityFrameworkCore.Salesforce -OutputDir "Models" -Context CustomerContext -Tables Customer__c
위 명령에서 SQL Server Cache를 사용하여 데이터베이스에 연결하면 DataConnector 성능을 더 높일 수 있습니다. Salesforce DataConnector 캐싱에 대한 자세한 내용은 를 참조하세요.
다음에는 ConfigureServices 메서드에서 다음 코드를 추가하여 Startup.cs 파일에 데이터베이스 컨텍스트를 등록하겠습니다.
public void ConfigureServices(IServiceCollection services) { services.AddControllers(); string connectionString = @"Username = ******; Password = ******; Security Token = ******; OAuth Client Id = ******; OAuth Client Secret = ******; OAuth Token Endpoint = https://ap16.salesforce.com/services/oauth2/token; Url=https://ap16.salesforce.com/services/data/v42.0; Use Cache = 'true'; Cache provider = 'Microsoft.Data.SqlClient'; Cache connection = 'Server=******;Database=******;User Id=******;Password=******;'"; services.AddDbContext<CustomerContext>(opt => opt.UseSalesforce(connectionString)); }
4단계: CRUD 메서드로 컨트롤러 스캐폴딩
이 단계에서는 표준 VS 스캐폴더를 사용하여 API 컨트롤러에서 CRUD 메서드를 정의합니다. 앞의 단계는 동일한 과정을 안내할 것입니다.
Controllers 폴더를 마우스 오른쪽 버튼으로 클릭하고 추가 > 새 스캐폴드 항목 선택
동작이 있는 API 컨트롤러, Entity Framework 사용을 선택한 다음 추가 선택
동작이 있는 API 컨트롤러 추가, Entity Framework 사용 대화 상자의 모델 클래스에서는 CustomerC (SalesforceAPI.Models), 데이터 컨텍스트 클래스에서는 CustomerContext (SalesforceAPI.Models)를 선택합니다.
Salesforce 데이터로 작업하려면 추가 버튼을 클릭하여 컨트롤러를 추가하고 모든 CRUD 메서드를 자동으로 생성합니다. 다음은 생성된 컨트롤러를 묘사하는 코드 조각입니다.
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using Microsoft.EntityFrameworkCore; using SalesforceAPI.Models; namespace SalesforceAPI.Controllers { [Route("api/[controller]")] [ApiController] public class CustomerCsController : ControllerBase { private readonly CustomerContext _context; public CustomerCsController(CustomerContext context) { _context = context; } // GET: api/CustomerCs [HttpGet] public async Task<ActionResult<IEnumerable<CustomerC>>> GetCustomerC() { return await _context.CustomerC.ToListAsync(); } // GET: api/CustomerCs/5 [HttpGet("{id}")] public async Task<ActionResult<CustomerC>> GetCustomerC(string id) { var customerC = await _context.CustomerC.FindAsync(id); if (customerC == null) { return NotFound(); } return customerC; } // PUT: api/CustomerCs/5 // To protect from overposting attacks, enable the specific properties you want to bind to, for // more details, see https://go.microsoft.com/fwlink/?linkid=2123754. [HttpPut("{id}")] public async Task<IActionResult> PutCustomerC(string id, CustomerC customerC) { if (id != customerC.Id) { return BadRequest(); } _context.Entry(customerC).State = EntityState.Modified; try { await _context.SaveChangesAsync(); } catch (DbUpdateConcurrencyException) { if (!CustomerCExists(id)) { return NotFound(); } else { throw; } } return NoContent(); } // POST: api/CustomerCs // To protect from overposting attacks, enable the specific properties you want to bind to, for // more details, see https://go.microsoft.com/fwlink/?linkid=2123754. [HttpPost] public async Task<ActionResult<CustomerC>> PostCustomerC(CustomerC customerC) { _context.CustomerC.Add(customerC); await _context.SaveChangesAsync(); return CreatedAtAction("GetCustomerC", new { id = customerC.Id }, customerC); } // DELETE: api/CustomerCs/5 [HttpDelete("{id}")] public async Task<ActionResult<CustomerC>> DeleteCustomerC(string id) { var customerC = await _context.CustomerC.FindAsync(id); if (customerC == null) { return NotFound(); } _context.CustomerC.Remove(customerC); await _context.SaveChangesAsync(); return customerC; } private bool CustomerCExists(string id) { return _context.CustomerC.Any(e => e.Id == id); } } }
컨트롤러는 GET, GET(ID), PUT, POST, DELETE 메서드를 구현하여 Salesforce 데이터에 대해 각각 읽기, 업데이트, 만들기, 삭제 연산을 수행합니다.
이것으로 Salesforce에 대한 웹 API 생성이 완료됩니다. 다음 단계에서는 응용 프로그램의 시작 경로를 설정하여 이 API의 작동을 실행 및 테스트하겠습니다.
5단계: launchUrl 업데이트
프로젝트를 실행할 때 웹 API를 실행하려면 아래 스크린샷과 같이 속성 > launchSettings.json 파일에서 launchUrl을 "weatherforecast"에서 "api/CustomerCs"로 업데이트해야 합니다.
이제 웹 API 프로젝트를 컴파일 및 실행할 준비가 되었습니다.
API의 GET 메서드를 호출하는 것에 해당하는 컨트롤러의 READ 메서드가 프로젝트 실행 시 호출됩니다. 이에 따라 아래 스크린샷과 같이 Customer__c 표에서 모든 레코드가 반환됩니다.
마찬가지로 브라우저 요청에서 특정 행의 ID 열 값을 매개 변수로서 전달하여 GET(id) 메서드를 호출할 수 있습니다. 동일한 과정을 묘사하는 아래 스크린샷을 참조하세요.
기타 모든 API 메서드(예: PUT, POST, DELETE)는 브라우저에서 직접 실행할 수 없습니다. API 플랫폼을 사용하여 브라우저에서 메서드를 테스트해야 하거나, JS 응용 프로그램을 만들어 메서드를 호출하고 결과를 표시할 수도 있습니다.
다음 섹션에서 API를 활용하기 위한 이 두 가지 접근 방법에 대해 상세히 설명할 것입니다.
Postman을 사용하여 브라우저에서 웹 API 활용하기
위의 설명과 같이 브라우저를 통해 직접 API의 GET 메서드를 호출할 수 있습니다. 그러나 다른 모든 메서드의 경우에는 브라우저에서 실행하려면 API 플랫폼이 필요합니다. 따라서 이 블로그 글에서는 브라우저에서 웹 API를 활용하기 위해 API를 빌드하고 사용하는 데 도움이 되는 API 플랫폼인 을 사용하겠습니다.
이 섹션은 POSTMAN을 통해 각 API 메서드를 호출하는 방법과 API 메서드를 호출할 때 예상되는 결과를 이해하는 데 도움이 될 것입니다.
앱을 설치하는 것으로 시작하겠습니다. 설치가 완료되면 POSTMAN 앱을 열고 아래 스크린샷과 같은 기본 화면을 확인합니다.
이제 웹 API 메서드를 호출하고 실행해 보겠습니다. 모든 웹 API 메서드를 POSTMAN을 통해 성공적으로 호출하려면 웹 API 프로젝트가 백그라운드에서 실행되고 있어야 합니다.
새 요청 만들기
메서드 호출을 계속하기 전에 POSTMAN에서 새 API 요청을 만드는 방법을 빠르게 배워 보겠습니다.
작업 영역 메뉴 모음 옵션을 클릭하여 "내 작업 영역"으로 전환합니다.
작업 영역 보기의 왼쪽에 있는 "+" 아이콘을 클릭하여 새 요청을 만듭니다.
이것은 새로 만든 요청의 모양입니다.
Salesforce Web API를 대상으로 GET 메서드 테스트
다음 두 GET 엔드포인트가 위에서 만든 웹 API에서 구현되었습니다. 이 엔드포인트를 호출하고 출력을 확인하는 방법을 다음 섹션에서 알아보겠습니다.
GET /api/customerCs
GET /api/customerCs/{id}
Postman을 사용하여 GET 테스트하기
새 요청 만들기
HTTP 메서드를 GET으로 설정
요청 URI를 https://localhost:<port>/api/CustomerCs로 설정합니다. (Ex> https://localhost:5001/api/CustomerCs) 이 URI는 기본적으로 Visual Studio에서 웹 API 프로젝트를 실행할 때 생성된 것을 참조합니다.
전송 선택
아래 스크린샷에서는 요청을 정의하고 전송 버튼을 클릭하여 전송하고 아래쪽 탭에 표시된 응답을 반환한 방법을 확인할 수 있습니다.
Postman을 사용하여 GET(ID) 테스트하기
다음에는 요청 URI를 https://localhost:<port>/api/CustomerCs/<id>로 설정합니다. 여기서 ID는 가져오려는 레코드의 ID 열 값입니다. 전송을 클릭하고 단 하나의 요청된 레코드만 포함하는 응답을 확인합니다.
Salesforce Web API를 대상으로 POST 메서드 테스트
새 요청 만들기
HTTP 메서드를 POST로 설정
요청 URI를 https://localhost:<port>/api/CustomerCs로 설정합니다. (Ex> https://localhost:5001/api/CustomerCs) 이 URI는 기본적으로 Visual Studio에서 웹 API 프로젝트를 실행할 때 생성된 것을 참조합니다.
본문 탭 선택
raw 라디오 버튼 선택
유형을 JSON (application/json)으로 설정
요청 본문에 고객 항목에 해당하는 JSON 입력:
{ "ownerId": "0052w000005wGkWAAU", "name": "a002w000008NmEA", "contactNameC": "Mary Jane" }
전송을 선택하고 새로 삽입된 레코드를 나타내는 하단의 RESPONSE 탭을 확인합니다.
Salesforce Web API를 대상으로 PUT 메서드 테스트
새 요청 만들기
HTTP 메서드를 PUT으로 설정
요청 URI를 https://localhost:<port>/api/CustomerCs/<id>로 설정합니다. 여기서 ID는 업데이트하려는 레코드의 ID 열 값입니다. 이 URI는 기본적으로 Visual Studio에서 웹 API 프로젝트를 실행할 때 생성된 것을 참조합니다.
본문 탭 선택
raw 라디오 버튼 선택
유형을 JSON (application/json)으로 설정
요청 본문에 고객 항목에 해당하는 JSON 입력:
{ "id": "a002w000008NmEAAA0", "ownerId": "0052w000005wGkWAAU", "isDeleted": false, "name": "a002w000008NmEA", "createdDate": "2020-08-18T19:02:42", "createdById": "0052w000005wGkWAAU", "lastModifiedDate": "2022-04-05T00:47:58", "lastModifiedById": "0052w000005wGkWAAU", "systemModstamp": "2022-04-05T00:47:58", "lastActivityDate": null, "lastViewedDate": "2022-04-05T00:47:58", "lastReferencedDate": "2022-04-05T00:47:58", "contactNameC": "Maria Janes", "regionC": null, "countryC": "UK", "contactTitleC": "Sales Representative", "addressC": "120 Hanover Sq.", "faxC": "(171) 555-6750", "cityC": "London", "companyNameC": "Around the Horn", "postalCodeC": "WA1 1DP", "phoneC": "(171) 555-7788", "customerIdC": "AROUT" }
첫 번째 스크린샷에서는 특정 레코드를 GET(ID) 메서드를 사용하여 가져왔으며 contactNameC 필드에 해당하는 "Maria Andrews" 값을 갖고 있음을 확인할 수 있습니다.
다음 스크린샷에는 성공적으로 실행된 PUT 명령이 표시되며, 응답 텍스트를 반환하지 않습니다.
마지막으로 업데이트된 레코드를 검증하기 위해 아래와 같이 GET(ID) 메서드를 다시 호출합니다.
Salesforce Web API를 대상으로 DELETE 메서드 테스트
새 요청 만들기
HTTP 메서드를 DELETE로 설정
요청 URI를 https://localhost:<port>/api/CustomerCs/<id>로 설정합니다. 여기서 ID는 삭제하려는 레코드의 ID 열 값입니다. 이 URI는 Visual Studio에서 웹 API 프로젝트를 실행할 때 생성된 것을 참조합니다.
아래 스크린샷은 성공적으로 실행된 DELETE 요청을 묘사하고 있습니다.
브라우저를 통해 이루어지는 모든 웹 API 메서드의 작동에 대한 검증을 완료하였습니다. 이제는 Excel 및 JS 응용 프로그램에서 이 API를 활용하는 방법을 알아보겠습니다.
웹 API를 활용하여 Excel에서 차트 만들기
이 섹션에서는 웹 API에서 Excel로 데이터를 가져오는 방법과 가져온 데이터를 사용하여 차트를 만드는 방법을 알아보겠습니다. 아래 단계를 통해 방법을 안내합니다.
Excel을 열고 새 통합 문서를 만듭니다.
데이터 탭으로 전환하여 데이터 가져오기 > 기타 소스에서 > 웹에서 를 선택합니다.
표시되는 프롬프트 창에서 API URL(Salesforce Web API 프로젝트를 실행하여 생성된 URL)을 붙여넣습니다.
결과 창 프롬프트의 메뉴에서 변환 > 테이블로 를 선택한 다음 확인을 클릭합니다.
열 헤더 셀(Column1 텍스트가 있는)에서 왼쪽 및 오른쪽 화살표 버튼을 클릭하고 대화 상자에서 "원본 이름을 접두사로 사용"을 선택 취소한 후 확인을 클릭합니다. 마지막으로 홈 메뉴에서 닫기 및 로드를 클릭합니다.
아래 스크린샷과 같이 새 워크시트에 로드된 웹 API에서 가져온 JSON 데이터가 표시됩니다.
데이터를 가져온 후에는 Excel 통합 문서에 추가된 임의의 데이터 시트와 유사합니다. 이것을 사용하여 PivotView 또는 차트를 만들 수 있습니다.
두 가지를 모두 만들어 보았습니다. 데이터 용량이 너무 크기 때문에 PivotView를 만들었으며, 피벗에서 집계된 데이터를 사용하여 아래 이미지와 같은 차트를 삽입했습니다.
웹 API를 활용하여 JavaScript를 사용해 FlexGrid에서 CRUD 연산 수행하기
이 섹션에서는 JavaScript의 웹 API를 활용하여 컨트롤에서 CRUD 연산을 수행하는 방법을 알아보겠습니다.
1단계: 보기 만들기
시작하기 위해, 최종 사용자가 데이터베이스 연산을 수행하는 데 사용할 FlexGrid 컨트롤 및 기타 버튼이 포함된 보기를 만듭니다. "index.html"이라는 HTML 페이지를 웹 API 프로젝트에 추가하여 이 보기를 만듭니다. 이 페이지는 프로젝트에서 폴더를 만들어 wwwroot 폴더 아래에 추가할 것입니다. 그러면 Startup.cs 파일의 Configure 메서드에 다음 코드 행을 추가하여 브라우저에서 페이지에 액세스하는 데 도움이 됩니다.
//Adding Static Files Middleware to serve the static files app.UseStaticFiles();
그런 다음 Properties\launchSettings.json의 launchUrl 속성을 "api/CustomerCs"에서 "index.html로 다시 설정합니다.
2단계: FlexGrid 추가 및 구성
아래 설명한 것처럼 index.html의 <HEAD> 섹션에서 FlexGrid 컨트롤 작업을 하는 데 필요한 Wijmo 참조를 추가하는 것으로 시작하겠습니다.
<!-- Wijmo --> <link href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet" /> <script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script> <script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script> <script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
index.html의 <BODY>섹션에 CREATE, UPDATE, DELETE 버튼과 FlexGrid 컨트롤 및 페이저 컨트롤을 호스팅할 요소를 추가합니다.
<button onclick="create()">Create</button> <button onclick="update()">Update</button> <button onclick="deleteRec()">Delete</button> <div id="flexGrid" style="height: 300px;"></div> <div id="thePager"></div>
index.html의 <HEAD>섹션 끝부분에 다음 JavaScript 코드를 추가하여 CollectionView 및 FlexGrid 컨트롤을 생성합니다.
<script> var cv = new wijmo.collections.CollectionView(); var flexGrid = new wijmo.grid.FlexGrid('#flexGrid'); flexGrid.itemsSource = cv; cview.trackChanges = true; flexGrid.allowAddNew = true; flexGrid.allowDelete = true; </script>
CollectionView는 아직 실제 데이터로 채워진 적이 없으므로, 프로젝트를 실행하면 빈 FlexGrid 컨트롤, 페이저 컨트롤, "CREATE", "UPDATE" 및 "DELETE" 버튼이 인덱스 페이지에 나타납니다. 아래 스크린샷은 동일한 과정을 묘사합니다.
3단계: GET 메서드를 사용하여 FlexGrid에 데이터 채우기
이 단계는 데이터베이스에서 데이터를 읽고 CollectionView를 채웁니다. 나중에 itemSource 속성을 사용하여 CollectionView를 FlexGrid에 바인딩하는 방법으로 FlexGrid에 데이터를 채울 것입니다.
웹 API를 호출(HTTP 요청을 전송)하는 데 사용되는 메서드로는 jQuery의 또는 등이 있지만, 여기서는 Wijmo의 메서드를 사용합니다. 이 메서드를 사용하면 jQuery를 사용하지 않더라도 XMLHttpRequest보다 훨씬 간단한 코드를 사용하여 HTTP 요청을 전송할 수 있습니다.
다음 JavaScript 코드를 추가하여 GET 요청을 웹 API에 전송합니다. 요청이 성공하면, 로드된 JSON 데이터를 JavaScript Array 객체로 변환하여 이를 CollectionView로 설정합니다. 그런 다음 FlexGrid를 위한 itemsSource로 설정됩니다.
아래 코드는 CollectionView의 pageSize 속성을 6으로 설정하고 CollectionView를 페이저 컨트롤에 할당하여 페이징을 가능하게 합니다.
<script>
var cview;
window.onload = function () {
cview = new wijmo.collections.CollectionView();
wijmo.httpRequest('/api/CustomerCs', {
success: function (xhr) {
// create a paged CollectionView with 6 data items per page
cview.sourceCollection = JSON.parse(xhr.response);
cview.pageSize = 6;
// navigate the pages
new wijmo.input.CollectionViewNavigator('#thePager', {
byPage: true,
headerFormat: 'Page {currentPage:n0} of {pageCount:n0}',
cv: cview
});
}
});
var flexGrid = new wijmo.grid.FlexGrid('#flexGrid', {
autoGenerateColumns: false,
columns: [
{ binding: 'id', header: 'Id', width: '2*' },
{ binding: 'contactNameC', header: 'Contact Name', width: '*' },
{ binding: 'countryC', header: 'Country', width: '*' }
],
itemsSource: cview
});
}
</script>프로젝트를 실행하면, 페이징된 FlexGrid 컨트롤이 데이터로 채워진 것을 확인하게 됩니다. 아래 스크린샷과 같이 FlexGrid 컨트롤 아래에 표시된 페이저 컨트롤을 사용하여 페이지를 탐색할 수 있습니다.
4단계: POST 메서드를 사용하여 새 레코드 삽입
데이터베이스에 새 레코드를 삽입하려면 먼저 FlexGrid에 새 행을 추가해야 합니다. 같은 작업을 위해 위에서 수행한 2단계와 같이 FlexGrid의 allowAddNew 속성을 true로 설정해야 합니다. 이 속성은 아래 스크린샷과 같이 FlexGrid의 끝부분에 별표를 포함한 빈 행을 추가합니다.
이 새로운 행을 직접 편집하여 새 데이터가 채워진 행을 FlexGrid에 추가할 수 있습니다.
이번에는 다음 JavaScript 코드를 CREATE 버튼의 클릭 이벤트에 추가합니다. 이 코드는 CollectionView의 itemsAdded 속성을 사용하여 추가된 데이터 목록을 가져오며 웹 API에 POST 요청을 전송합니다. POST 요청의 데이터 매개 변수에서 추가된 데이터를 지정합니다.
function create()
{
alert("Create begins \nNew items count: " + cview.itemsAdded.length);
for (var i = 0; i < cview.itemsAdded.length; i++)
{
wijmo.httpRequest('/api/CustomerCs/', {
method: 'POST',
data: cview.itemsAdded[i]
});
}
alert("Record created !!!");
}프로젝트를 실행하고 새 데이터 레코드를 추가한 후 CREATE 버튼을 클릭하여 데이터베이스에 레코드를 추가합니다. 페이지를 다시 로드하면 데이터베이스에서 추가된 데이터 레코드를 확인할 수 있습니다.
아래 GIF는 만들기/삽입 연산이 실행되는 모습을 묘사한 것입니다.
5단계: PUT 메서드를 사용하여 레코드 업데이트
다음에는 FlexGrid에서 편집한 데이터로 데이터베이스를 업데이트합니다.
여기서는 데이터 레코드를 편집할 때마다 데이터베이스가 업데이트되는 일반 업데이트 모드 대신, 여러 편집이 데이터베이스에서 한 번에 업데이트되는 일괄 업데이트를 사용합니다. 일괄 업데이트를 수행하려면 변경된 데이터를 계속 추적하고 변경 목록을 관리해야 합니다. 위의 2단계와 같이 CollectionView의 trackChanges 속성을 true로 설정하면 CollectionView가 그러한 연산을 자동으로 처리할 수 있습니다.
다음 JavaScript 코드를 업데이트 버튼의 클릭 이벤트에 추가합니다. 이 코드는 CollectionView의 itemsEdited 속성을 사용하여 업데이트된 데이터 목록을 가져오며 웹 API에 PUT 요청을 전송합니다. PUT 요청은 URL에서 업데이트된 데이터의 ID와 데이터 매개 변수에서 전송할 데이터를 지정합니다.
function update()
{
alert("Update begins \nEdited items count: " + cview.itemsEdited.length + "\n Edited item accountid: " + cview.itemsEdited[0].id);
for (var i = 0; i < cview.itemsEdited.length; i++)
{
wijmo.httpRequest('/api/CustomerCs/' + cview.itemsEdited[i].id, {
method: 'PUT',
data: cview.itemsEdited[i]
});
}
alert("Record updated !!!");
}프로젝트를 실행하고 데이터 레코드를 편집한 후 업데이트 버튼을 누릅니다. 페이지를 다시 로드하면 데이터베이스에서 업데이트된 데이터를 확인할 수 있습니다. 아래 GIF는 업데이트 연산이 실행되는 모습을 묘사한 것입니다.
6단계: DELETE 메서드를 사용하여 레코드 삭제
마지막으로 FlexGrid에서 삭제된 데이터를 데이터베이스에 반영하는 방법을 알아보겠습니다. 같은 작업을 위해 위 2단계와 같이 FlexGrid의 allowDelete 속성을 true로 설정해야 합니다. 그러면 사용자는 행을 선택하고 키보드의 DELETE 키를 눌러 행을 삭제할 수 있게 됩니다.
다음 JavaScript 코드를 삭제 버튼의 클릭 이벤트에 추가합니다. 이 코드는 CollectionView의 itemsRemoved 속성을 사용하여 삭제된 데이터 목록을 가져오며 웹 API에 삭제 요청을 전송합니다. 삭제 요청에서는 URL에서 삭제된 데이터의 ID를 지정합니다.
flexGrid.allowDelete = true;
function deleteRec()
{
alert("Delete begins \nDeleted items count: " + cview.itemsRemoved.length);
for (var i = 0; i < cview.itemsRemoved.length; i++)
{
wijmo.httpRequest('/api/CustomerCs/' + cview.itemsRemoved[i].id, {
method: 'DELETE'
});
}
alert("Record deleted !!!");
}프로젝트를 실행하고 레코드를 삭제한 후 삭제 버튼을 누릅니다. 페이지를 다시 로드하면 데이터 레코드가 데이터베이스에서 삭제된 것을 확인할 수 있습니다. 아래 GIF는 삭제 연산이 실행되는 모습을 묘사한 것입니다.
위의 구현을 통해, JavaScript 및 웹 API를 사용하여 FlexGrid에서 데이터베이스 CRUD 연산을 실행했습니다.
아래 링크를 통해 웹 API 및 JavaScript 함수를 구현하는 샘플을 다운로드하실 수 있습니다.
또한, DataConnectors에 대해 자세히 알고 싶다면 및 를 참조하십시오.
지금 바로 ComponentOne을 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
