您的位置：首页 > 数据库

knockout+MVC+webapi+sqlserver完成增删查改

2016-01-25 15:11 465 查看

快过年了，公司的事情较少，想着开始学习点新东西。这段时间一个项目用到了mvc和webapi，然后一直对knockout比较感兴趣，就想着用这个框架做一个小实例。数据库采用的是sqlserver。话不多说，开始进行项目的步骤。

第一步：数据库的表创建。创建一个Employees员工表，具体字段见下图：

@{
ViewBag.Title = "Create";
}

@section scripts{
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<script src="~/Scripts/knockout-2.2.0.js"></script>
<script type="text/javascript">
var maxbh = '@ViewBag.MaxBh';
var EmpViewModel = function () {
var self = this;
self.EmployeeID = ko.observable(maxbh);
self.EmployeeName = ko.observable("");
self.Salary = ko.observable("");
self.DeptName = ko.observable("");
self.Address = ko.observable("");
var EmpData = {
EmployeeID: self.EmployeeID,
EmployeeName: self.EmployeeName,
Salary: self.Salary,
DeptName: self.DeptName,
Address: self.Address
};

//生成一个ObservableArray来存储返回的所有数据
self.Employees = ko.observableArray([]);
GetEmployees(); //通过ajax请求返回所有数据
//保存数据
self.save = function () {
//Ajax 提交到webapi保存数据
$.ajax({
type: "POST",
url: "/api/EmployeeApi",
data: ko.toJSON(EmpData),
contentType: "application/json",
success: function (data) {
alert("记录保存成功");
self.EmployeeID(data.EmployeeID);
window.location.reload();
GetEmployees();
},
error: function () {
alert("提交失败");
}
});
};

self.update = function () {
var url = "/api/EmployeeApi/" + self.EmployeeID();
$.ajax({
type: "PUT",
url: url,
data: ko.toJSON(EmpData),
contentType: "application/json",
success: function (data) {
alert("修改成功");
GetEmployees();
},
error: function (error) {
alert(error.status + "<!----!>" + error.statusText);
}
});
};

//删除操作
self.deleterec = function (employee) {
$.ajax({
type: "DELETE",
url: "/api/EmployeeApi/" + employee.EmployeeID,
success: function (data) {
alert("Record Deleted Successfully");
GetEmployees();//Refresh the Table
},
error: function (error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
};

//获取所有Employee
function GetEmployees() {
//Ajax 获取所有Employee记录
$.ajax({
type: "GET",
url: "/api/EmployeeApi",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
self.Employees(data);
},
error: function (error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
};
//点击右侧列表某一行左侧编辑赋值
self.getselectedemployee = function (employee) {
self.EmployeeID(employee.EmployeeID),
self.EmployeeName(employee.EmployeeName),
self.Salary(employee.Salary),
self.DeptName(employee.DeptName),
self.Address(employee.Address)
};
};
//激活knockout
ko.applyBindings(new EmpViewModel());
</script>
}

<body class="easyui-layout">
<form>
<table>
<tr>
<td>
<!--将textbox监控属性的值与ViewModel绑定 -->
<table id="tbldml">
<tr>
<td>编号</td>
<td>
<input type="text" id="txteno" data-bind="value: $root.EmployeeID" readonly="readonly"/></td>
</tr>
<tr>
<td>名称</td>
<td>
<input type="text" id="txtename" data-bind="value: $root.EmployeeName" /></td>
</tr>
<tr>
<td>薪资</td>
<td>
<input type="text" id="txtsal" data-bind="value: $root.Salary" /></td>
</tr>
<tr>
<td>部门</td>
<td>
<input type="text" id="txtdname" data-bind="value: $root.DeptName" /></td>
</tr>
<tr>
<td>籍贯</td>
<td>
<input type="text" id="txtdesig" data-bind="value: $root.Address" /></td>
</tr>
<tr>
<!--ko控制的保存和修改按钮-->
<td>
<button data-bind="click: $root.save" style="width: 100px;">保存</button></td>
<td>
<button data-bind="click: $root.update" style="width: 100px;">修改</button></td>
</tr>
</table>
</td>
<td>
<div class="FixedContainer">
<!--控制有数据的时候显示表格-->
<table data-bind="visible: Employees().length > 0">
<thead>
<tr>
<td style="width: 100px;">编号</td>
<td style="width: 100px;">名称</td>
<td style="width: 100px;">薪资</td>
<td style="width: 100px;">部门</td>
<td style="width: 100px;">籍贯</td>
<td style="width: 100px;"></td>
</tr>
</thead>
<!--遍历所有数据-->
<tbody data-bind="foreach: Employees">
<tr style="border: solid" data-bind="click: $root.getselectedemployee" id="updtr">
<td><span data-bind="text: EmployeeID" style="width: 100px;"></span></td>
<td><span data-bind="text: EmployeeName" style="width: 100px;"></span></td>
<td><span data-bind="text: Salary"></span></td>
<td><span data-bind="text: DeptName"></span></td>
<td><span data-bind="text: Address"></span></td>
<td>
<button data-bind="click: $root.deleterec">删除</button></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</form>
</body>

View Code
使用knockout绑定值需要引用两个js，knockout.mapping-latest.js和knockout-2.2.0.js。

第七步：修改RouteConfig.cs路由配置文件， defaults: new { controller = "Employee", action = "Create", id = UrlParameter.Optional }。这样基本的项目就完成了，运行可以查看效果。

以上就是所有的项目内容。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航