Knockout.js-111

<h2>Student</h2>
<body><table><thead><tr><td>序号</td><td>ID</td><td>名字</td><td>性别</td><td>操作</td></tr></thead><tbody data-bind="foreach: student"><tr><td data-bind="text: $index() + 1"></td><td data-bind="text: ID"></td><td data-bind="text: Name"></td><td data-bind="text: Sex"></td><td><button type="button" data-bind="click: $parent.Delete">删除</button><button type="button" data-bind="    click: $parent.xianshi1">修改</button></td></tr></tbody></table><button data-bind="click: xianshi">添加</button></body><div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="myModalLabel1">操作</h4></div><div class="modal-body"><div class="form-group"><label>学生姓名</label><input type="text" class="form-control" id="Name1"></div><div class="form-group"><label>性别</label><input id="sex1" type="radio" name="sex" value="男" checked="checked" />男<input id="sex2" type="radio" name="sex" value="女" />女</div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary" data-bind="click: Add">保存</button></div></div></div></div><div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="myModalLabel2">操作</h4></div><div class="modal-body"><div class="form-group"><label>学生姓名</label><input type="text" data-bind="value:details1" class="form-control" id="Name2"></div><div class="form-group"><label>性别</label><input id="sex3" type="radio" name="sex" value="男" />男<input id="sex4" type="radio" name="sex" value="女" />女</div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary" data-bind="click: Save">保存</button></div></div></div></div>
<script>var list1 = [];$(function IndexAjax() {view.ccss();})var view = {student: ko.observableArray(list1),details1: ko.observable(""),ccss: function () { $.ajax({url: '@Url.Action("Stulist")',type: 'get',data: {},success: function (data) {view.student(data.Student);}});},Delete: function () {$.ajax({type: 'post',url: '@Url.Action("S_Delete")',data: { ID: this.ID },success: function () {alert("删除成功"); view.ccss();}})},xianshi: function () {$('#myModal1').modal('show');},Add: function () {var Name = $("#Name1").val();var Sex = '男';if ($("#sex1").checked == true) {Sex = "男"}else { Sex = "女" }$.ajax({url: '@Url.Action("S_Add")',type: 'post',data: { Name: Name, Sex: Sex },success: function () {alert("成功添加"); view.ccss();}});},xianshi1: function () {$('#myModal2').modal('show');$.ajax({url: '@Url.Action("S_Detail")',type: 'post',data: { ID: this.ID },success: function (data) {view.details1(data.Name)if (data.Sex == "男") {$('#sex3').attr("checked", true);}else {$('#sex4').attr("checked", true);}sessionStorage.setItem('hp', data.ID);}});},Save: function () {var ID = sessionStorage.getItem('hp');var Name = $("#Name2").val();var Sex = '男';if ($("#sex3").checked == true) {Sex = "男"}else { Sex = "女" }$.get('@Url.Action("S_Save", "Stu")', { Name: Name, Sex: Sex, ID: ID},function (data) {$('#myModal2').modal('hide');alert("修改成功");view.ccss();});},};ko.applyBindings(view);
</script>

public ActionResult Stulist(){          StuF DD = new StuF();var list = hp.Stu.ToList();DD.Student = list.ToList();return Json(DD, JsonRequestBehavior.AllowGet);}public void S_Delete(string ID){Stu DD = hp.Stu.Find(ID);hp.Stu.Remove(DD);hp.SaveChanges();}[HttpPost]public void S_Add(string Name, string Sex){StuF DD = new StuF();Stu ss = new Stu();ss.ID = DateTime.Now.ToString("yyyyMMHHddmmss");ss.Name = Name;ss.Sex = Sex;ss.Time = DateTime.Now;hp.Stu.Add(ss);hp.SaveChanges();}public ActionResult S_Detail(string ID){var list = hp.Stu.Where(x => x.ID == ID).FirstOrDefault();return Json(list, JsonRequestBehavior.AllowGet);}public void S_Save(string Name, string Sex,string ID){var list = hp.Stu.Where(x => x.ID == ID).FirstOrDefault();list.Name = Name;list.Sex = Sex;hp.SaveChanges();}

Knockout.js-111相关推荐

MVVM(Knockout.js)的新尝试：多个Page，一个ViewModel
对于面向数据的Web应用来说,MVVM模式是一项不错的选择,它借助JS框架提供的"绑定"机制是我们无需过多关注UI(HTML)的细节,只需要操作绑定的数据源.MVVM最早被微软应用 ...
JQuery Ajax 与 Knockout.js的结合
项目中遇到太多JQuery Ajax 与 Knockout.js的结合来处理数据的情况,今天将这部分内容梳理一下.一来弄清楚二者结合处理数据的流程,二来是感觉二者结合在一起用的时候有点将二者搞混了,弄 ...
【ASP.NET Web API教程】2.3.5 用Knockout.js创建动态UI
[ASP.NET Web API教程]2.3.5 用Knockout.js创建动态UI 原文:[ASP.NET Web API教程]2.3.5 用Knockout.js创建动态UI 注:本文是[ASP ...
Knockout.Js案例一Introduction
在这第一个教程中,您将体验的一些基本知识构建的web UI Model-View-ViewModel使用knockout.js(MVVM)模式. 案例1:添加:data-bind <p>F ...
MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录...
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
Knockout.js 初探
Knockout.js是什么? Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的 ...
knockout.js的简介和简单使用
1.knockout简介 knockout是一个轻量级的UI类库,通过MVVM模式使JavaScript前端UI简单化 knockout有四大重要概念: 1)声明式绑定:使用简明移读的语法很容易地将模 ...
Knockout JS 示例
五个小例子,来自Knockout JS官方网站. //tutorial 1 //following codes uses to demonstrate observable values and ta ...
Knockout.js 整理
上个月做项目需要用到easyui和Knockout.js ,所以简单的整理了下,以便学习 Knockout.js 是一个JavaScript库,它可以让HTML控件很容易与数据进行绑定.使用的是&qu ...
Knockout.js的简单使用
1.Knockout是 MVVM 框架 2.使用Knockout.js给view赋值 var viewmodel = { name: ko.observable('name'), nametow: k ...

Knockout.js-111

Knockout.js-111相关推荐

最新文章

热门文章