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

[js htmlscript=”true”]
@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>
}
[/js]

参考

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

コメントを残す

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

CAPTCHA