Knockout.js-111

最新推荐文章于 2021-04-11 09:32:05 发布

moshenkk

最新推荐文章于 2021-04-11 09:32:05 发布

阅读量184

点赞数

本文链接：https://blog.csdn.net/moshenkk/article/details/107182258

版权

<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();
        }