<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>联系人管理器</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!--当前联系人列表-->
<div id="content">
<table class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>联系电话</th>
<th>电子邮件</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: contacts">
<tr>
<td data-bind="text: Name"></td>
<td data-bind="text: PhoneNo"></td>
<td data-bind="text: EmailAddress"></td>
<td>
<a href="#" data-bind="click: $root.showDialog">修改</a>
<a href="#" data-bind="click: $root.remove">删除</a>
</td>
</tr>
</tbody>
</table>
<a href="#" class="btn btn-primary" data-bind="click: showDialog">添加新联系人</a>
</div>
<!--添加/修改联系人对话框-->
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">编辑联系人信息</h4>
</div>
<div class="modal-body form-horizontal" data-bind="with: contact">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">姓名:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="姓名" data-bind="value:Name">
</div>
</div>
<div class="form-group">
<label for="phoneNo" class="col-sm-2 control-label">联系电话:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="phoneNo" placeholder="联系电话" data-bind="value:PhoneNo">
</div>
</div>
<div class="form-group">
<label for="emailAddress" class="col-sm-2 control-label">电子邮箱:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="emailAddress" placeholder="电子邮箱" data-bind="value:EmailAddress">
</div>
</div>
<div class="form-group">
<label for="address" class="col-sm-2 control-label">地址:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="address" placeholder="地址" data-bind="value:Address">
</div>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default" data-dismiss="modal">关闭</a>
<a href="#" class="btn btn-primary" data-bind="click: save">保存</a>
</div>
</div>
</div>
</div>
<!--<script src="https://code.jquery.com/jquery.js"></script>-->
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/knockout-3.0.0.js"></script>
<!--<script src="Scripts/viewmodel.js"></script>-->
</body>
</html>
<script type="text/javascript">
function ViewModel() {
var self = this;
self.contacts = ko.observableArray(); //当前联系人列表
self.contact = ko.observable(); //当前编辑联系人
//获取当前联系人列表
self.load = function () {
alert("fk");
$.ajax({
url: "http://localhost:8613/manage/api/contacts",
type: "GET",
success: function (result) {
alert(result);
self.contacts(result);
}
});
};
//弹出编辑联系人对话框
self.showDialog = function (data) {
//通过Id判断"添加/修改"操作
if (!data.Id) {
data = { ID: "", Name: "", PhoneNo: "", EmailAddress: "", Address: "" }
}
self.contact(data);
$(".modal").modal('show');
};
//调用Web API添加/修改联系人信息
self.save = function () {
$(".modal").modal('hide');
if (self.contact().Id) {
$.ajax({
url: "http://localhost:8613/manage/api/contacts/" + self.contact.Id,
type: "PUT",
data: self.contact(),
success: function () {
self.load();
}
});
}
else {
$.ajax({
url: "http://localhost:8613/manage/api/contacts",
type: "POST",
data: self.contact(),
success: function () {
self.load();
}
});
}
};
//删除现有联系人
self.remove = function (data) {
$.ajax({
url: "http://localhost:8613/manage/api/contacts/" + data.Id,
type: "DELETE",
success: function () {
self.load();
}
});
};
self.load();
}
$(function () {
ko.applyBindings(new ViewModel());
});
</script>
扫一扫
3186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
