Knockout.js でSQL Azureに一覧表示、データ追加のサンプル(VisualStudio2013 MVC5 with Twitterbootstrap)

前回

VisualStudio2013 MVC5 with Twitterbootstrapにおいて、Knockout.js でTodos のサンプルを組み込んでみた。

今回

Knockout.js でSQL Azureへ一覧表示とデータ追加するサンプルをVisual Studio2013で作りました。

以下はイメージです。

MVC5_VS2013_Knockout_WebAPI1_0010

Web Siteは以下です。

http://vs-samples.azurewebsites.net/Home/Knockout_WebAPI1

サンプルコードは以下のGitHubに保存しました。

https://github.com/snoro/VS2013_MVC_Sample/tree/master/Backborn_Todos_WebAPI
Knockout_WebAPI1.cshtml

@section scriptsHead {
<link rel="stylesheet" href="/Content/Users/todos.css" />
}

@{
 ViewBag.Title = "";
}

<br>
<br>
<br>
<br>
<br>
<h2>Knockout.js WebAPI(SQL Azure) with Twitterbootsrap</h2>

<input id="button_DataAdd" class="btn btn-primary" type="button" value="データ登録ボタン" />

&nbsp;

<table class="table table-hover">
<thead>
 <tr>
 <td>Id</td>
 <td>Name</td>
 <td>Depertment</td>
 <td>Salary</td>
 <td>Memo</td>
 </tr>
</thead>
<tbody data-bind="foreach: employees">
 <tr >
 <td data-bind="text: Id"></td>
 <td data-bind="text: Name"></td>
 <td data-bind="text: Depertment"></td>
 <td data-bind="text: Salary"></td>
 <td data-bind="text: Memo"></td>
 </tr>
</tbody>
</table>
@section scripts {
 <script src="~/Scripts/knockout-3.0.0.js"></script>

<script type="text/javascript">
 var objViewModel =
 {
 employees: ko.observableArray([])
 }

$(document).ready(function () {
 $.ajax({
 url: "/api/Employee",
 contentType: "text/json",
 type: "GET",
 success: function (data) {
 $.each(data, function (index) {
 //Pushを使う場合
 objViewModel.employees.push(ToKnockOutObservable(data[index]));
 });
 ko.applyBindings(objViewModel);
 },
 error: function (err) {
 alert("error occured Error No=" + err.status);
 }
 });
 function ToKnockOutObservable(employee) {
 return {
 Id: ko.observable(employee.Id),
 Name: ko.observable(employee.Name),
 Depertment: ko.observable(employee.Depertment),
 Salary: ko.observable(employee.Salary),
 Memo: ko.observable(employee.Memo)
 };
 }
 $("#button_DataAdd").click(function(){
 var Employee = {};
 Employee.Id = 0;
 Employee.Name = "test";
 Employee.Depertment = "testdepert";
 Employee.Salary = 100;
 Employee.Memo = "memo";

$.ajax({
 url: "/api/Employee",
 //contentType: "text/json",
 //contentType: 'application/json; charset=utf-8',
 type: 'POST',
 cache: false,
 data: Employee,
 //data: JSON.stringify(Employee),
 success: function (data) {
 alert("Record Add Successfully ");
 objViewModel.employees.push(ToKnockOutObservable(data));
 },
 error: function (err) {
 alert("Error Occured, Error No" + err.status);
 }

});
 });
 });
</script>
}

参考

Simple data binding with Knockout, Web API and ASP.Net Web Forms

Building a Knockout.js based client for Web API services in an ASP.NET MVC app

Hello world, with Knockout JS and ASP.NET MVC 4!

Building Single Page Apps with ASP.NET MVC4 – Part 1 – Basic Desktop Application

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です