616 views(since 2013/10/08)

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

前回

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

今回

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

以下はイメージです。

MVC5_VS2013_Knockout_WebAPI2_0010

Eidtボタンを押すと編集モードになります。

MVC5_VS2013_Knockout_WebAPI2_0020

Web Siteは以下です。

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

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

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

Knockout_WebAPI2.cshtml

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

@{
 ViewBag.Title = "";
}

<br>
<br>
<br>
<br>
<br>
<h2>Knockout demo with asp.net web forms and asp.net webapi</h2>

<div id="dvemplist" data-bind="template: { name: templateDisplayed, foreach: Emps }"></div>
@section scripts{
 <script src="~/Scripts/knockout-3.0.0.js"></script>
 <!--Templates-->
 <!--View Template-->
 <script type="text/html" id="viewtemplate">
 <table class="table table-hover">
 <tr>
 <td>Id</td>
 <td>
 <span data-bind="text: $data.Id"></span>
 </td>
 </tr>
 <tr>
 <td>Name</td>
 <td>
 <span data-bind="text: $data.Name"></span>
 </td>
 </tr>
 <tr>
 <td>Salary</td>
 <td>
 <span data-bind="text: $data.Salary"></span>
 </td>
 </tr>
 <tr>
 <td>Depertment</td>
 <td>
 <span data-bind="text: $data.Depertment"></span>
 </td>
 </tr>
 <tr>
 <td>Memo</td>
 <td>
 <span data-bind="text: $data.Memo"></span>
 </td>
 </tr>
 <tr>
 <td>
 <button data-bind="click: function () { objEmpViewModel.editRecordtemplate($data); }">Edit</button>
 </td>
 </tr>
 </table>
 </script>
 <!--Ends Here-->

&nbsp;

<!--Edit Template-->
 <script id="edittemplate" type="text/html">
 <table class="table table-hover">
 <tr>
 <td>Id</td>
 <td>
 <input type="text" data-bind="value: $data.Id" disabled="disabled"/>
 </td>
 </tr>
 <tr>
 <td>Name</td>
 <td>
 <input type="text" data-bind="value: $data.Name"/>
 </td>
 </tr>
 <tr>
 <td>Salary</td>
 <td>
 <input type="text" data-bind="value: $data.Salary"/>
 </td>
 </tr>
 <tr>
 <td>Depertment</td>
 <td>
 <input type="text" data-bind="value: $data.Depertment"/>
 </td>
 </tr>
 <tr>
 <td>Memo</td>
 <td>
 <input type="text" data-bind="value: $data.Memo"/>
 </td>
 </tr>
 <tr>
 <td>
 <input type="button" id="btnsave" value="Save" data-bind="click: objEmpViewModel.Save" />
 </td>
 <td>
 <input type="button" id="btncancel" value="Cancel" data-bind="click: function () { objEmpViewModel.resettemplate(); }" />
 </td>
 </tr>
 </table>
 <!--Ends Here-->
 </script>
 <!--Ends Here-->

<script type="text/javascript">
 function EmpViewModel() {
 var self = this;

self.Emps = ko.observableArray([]);
 self.viewRecordtemplate = ko.observable("viewtemplate");
 self.editRecordtemplate = ko.observable();

self.templateDisplayed = function (t) {
 return t === self.editRecordtemplate() ? 'edittemplate' :
 self.viewRecordtemplate();
 };

self.Save = function (t) {
 var Employee = {};
 Employee.Id = t.Id;
 Employee.Name = t.Name;
 Employee.Depertment = t.Depertment;
 Employee.Salary = t.Salary;
 Employee.Memo = t.Memo;
 $.ajax({
 type: "PUT",
 url: "/api/Employee/" + Employee.Id,
 data: Employee,
 success: function (data) {
 alert("Record Updated Successfully ");
 self.resettemplate();
 },
 error: function (err) {
 alert("Error Occured, Please Reload the Page and Try Again " + err.status);
 self.resettemplate(t);
 }
 });
 };

self.resettemplate = function (t) {
 self.editRecordtemplate("viewtemplate");
 };
 }

var objEmpViewModel = new EmpViewModel();
 ko.applyBindings(objEmpViewModel);
 //初期データ読み込み
 $(document).ready(function () {
 $.ajax({
 type: "GET",
 url: "/api/Employee",
 //contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (data) {
 //一度で全部設定する場合
 objEmpViewModel.Emps(data);
 },
 error: function (err) {
 alert("Error : " + err.status + " " + err.statusText);
 }
 });
 });
 </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

Filed Under: .NETJavaScript

Tags:

About the Author

野呂清二(ご連絡はこちらまで (http://www.exceedone.co.jp/inquiry/)

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.