MVVM范例：实现 用户列表绑定、编辑 、删除、添加及筛选功能

第一步：引入js文件

<script src="~/JavaScript/jquery-1.11.2.min.js"></script>
<script src="~/JavaScript/knockout-3.3.0.js"></script>

第二步：页面绑定语法

<div class="search clearfix">
<div class="title">年龄</div>
<div class="value">
<a href="javascript:void(0)" data-bind="click:function(){age('不限');}">不限</a>
<a href="javascript:void(0)" data-bind=" click:function(){age('20');}">20</a>
<a href="javascript:void(0)" data-bind=" click:function(){age('25');}">25</a>
<a href="javascript:void(0)" data-bind=" click:function(){age('30');}">30</a>
<a href="javascript:void(0)" data-bind=" click:function(){age('35');}">35</a>
</div>
</div>
<div class="search clearfix">
<div class="title">性别</div>
<div class="value">
<a href="javascript:void(0)" data-bind=" click:function(){sex('不限');}">不限</a>
<a href="javascript:void(0)" data-bind=" click:function(){sex('男');}">男</a>
<a href="javascript:void(0)" data-bind=" click:function(){sex('女');}">女</a>
</div>
</div>
<div>
<table class="table">
<thead>
<tr>
<th>用户名</th>
<th>性别</th>
<th>年龄</th>
<th>更新</th>
<th>删除</th>
</tr>
</thead>
<tbody data-bind="foreach:users">
<tr>
<td><input class="editinput" type="text" data-bind="value:Username" /></td>
<td><input class="editinput" type="text" data-bind="value:Sex" /></td>
<td><input class="editinput" type="text" data-bind="value:Age" /></td>
<td><input type="button" class="btn btn-default" data-bind="click:$root.UpdateUser" value="更新" /></td>
<td><input type="button" class="btn btn-default" data-bind="click:$root.RemoveUser" value="删除" /></td>
</tr>
</tbody>
</table>
</div>

<div>
<form class="form-inline" action="/User/AddUser" method="post">
<div class="form-group">
<label class="control-label">用户名：</label>
<input type="text" name="Username" class="form-control"/>
</div>
<div class="form-group">
<label class="control-label">密码</label>
<input type="text" name="Password" class="form-control" />
</div>
<div class="form-group">
<label class="control-label">年龄</label>
<input type="text" name="Age" class="form-control" />
</div>
<div class="form-group">
<label class="control-label">性别</label>
<input type="radio" class="form-control" value="男" checked="checked" name="Sex" /><label class="control-label">男</label>
<input type="radio" class="form-control" value="女" name="Sex" /><label class="control-label">女</label>
</div>
<div class="form-group">
<input type="submit" value="保存" class="btn btn-default"/>
</div>
</form>
</div>

第三步：js

<script type="text/javascript">
function UserViewModel(Username,Sex,Age) {
var self = this;
self.Username = Username;
self.Sex = Sex;
self.Age = Age;
}

function ViewModel() {
var self = this;
self.age = ko.observable("不限");
self.sex = ko.observable("不限");
self.users = ko.observableArray();
//删除用户
self.RemoveUser = function (user) {
$.post("/User/Delete", { user: user }, function (data) {
if (data == "True") {
self.users.remove(user);
}
else {
WarningDialog("删除失败！");
}
})
}
//更新用户
self.UpdateUser = function (user) {
$.post("/User/Update", { user: user }, function (data) {
if (data == "False") {
WarningDialog("更新失败");
}
})
}

ko.computed(function () {
$.getJSON("/User/GetUserLsit", { age: self.age(), sex: self.sex() }, function (data) {
self.users.removeAll();
$.each(data, function (index, value) {
self.users.push(data[index]);
})
});
});

}

$(function () {
ko.applyBindings(new ViewModel());
});

</script>

第四步：控制器处理

//查询信息列表
public ActionResult Index()
{
return View();
}

/// <summary>
/// 查询用户列表
/// </summary>
/// <returns></returns>
public JsonResult GetUserLsit()
{
using (var db = DbContext.CreateInstance())
{
var list = db.GetList<User>();
if (Request.QueryString["sex"] != null && Request.QueryString["sex"] != "不限")
{
list = list.Where(s=>s.Sex.Contains(Request.QueryString["sex"]));
}
if (Request.QueryString["age"] != null && Request.QueryString["age"] != "不限")
{
list= list.Where(a => a.Age <= Convert.ToInt16(Request.QueryString["age"]));
}
return Json(list, "application/json", Encoding.UTF8);
}
}

/// <summary>
/// 删除用户
/// </summary>
/// <param name="user"></param>
/// <returns></returns>
public bool Delete(User user)
{
bool isSuccess = false;
using (var db=DbContext.CreateInstance())
{
if (user != null) {
if (db.Delete(user))
{
isSuccess = true;
}
}
}
return isSuccess;
}

/// <summary>
/// 修改用户信息
/// </summary>
/// <param name="user"></param>
/// <returns></returns>
public bool Update(User user)
{
bool isSuccess = false;
using (var db = DbContext.CreateInstance())
{
if (db.Update(user))
{
isSuccess = true;
}
}
return isSuccess;
}

/// <summary>
/// 新增用户
/// </summary>
/// <param name="fc"></param>
/// <returns></returns>
public ActionResult AddUser(FormCollection fc)
{
using (var db = DbContext.CreateInstance())
{
var user = new User();
user.Password = fc["Password"].Trim();
user.Username = fc["Username"].Trim();
user.Age =Convert.ToInt32(fc["Age"]);
user.Sex = fc["Sex"].Trim();
db.Insert(user);
}
return RedirectToAction("Index");
}