试卷详情: 试卷时间:

飞道的博客

使用ajax异步处理(添加,删除,查询)

268人阅读  评论(0)

控制器是自动生成的
以下是:视图的代码

<p>考试界面</p>
//新增
<div>
    试卷名称:<input id="PaperName" name="PaperName" type="text" />
    试卷详情:<input id="PaperExplain" name="PaperExplain" type="text" />
    试卷时间:<input id="PaperTime" name="PaperTime" type="text" />
    <button id="fore" onclick="Add()">新增</button>
</div>

@Html.TextBox("ID")
<button id="do" onclick="IDselect()">查找</button>
<div>
    <table id="tbPapers" class="table table-bordered table-striped table-hover">
        <thead>
            <tr>
                <th>试卷编号</th>
                <th>试卷名称</th>
                <th>试卷详情</th>
                <th>试卷时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

</div>

@section scripts{
//添加
    <script>
        $(function () {
            InitPapers();
        })
        function Add() {
            $.ajax({
                url: "/api/Papers",		  //请求的路径,获取数据源
                type: "post",			  //请求的方式
                dataType: "json",		  //请求返回的数据类型
                data: {
                    PaperName: $("#PaperName").val(),
                    PaperExplain: $("#PaperExplain").val(),
                    PaperTime: $("#PaperTime").val()
                },
                success: function (data) {
                    alert("添加成功");
                    InitPapers();

                }

            }
            )
        }
        $(function () {
            InitPapers();
            InitStu();
        })

        function InitPapers() {
            $.ajax({
                url: "/api/Papers",		  //请求的路径,获取数据源
                type: "get",			  //请求的方式
                dataType: "json",		  //请求返回的数据类型
                contentType: "application/json;charset=utf-8",
                success: function (data) {//请求成功做的事
                    var $tbod = $("#tbPapers tbody").empty();
                    //将data数据绑定到table
                    //创建tr td标签绑定到tbody
                    $.each(data, function (i, v) {
                        var $tr = $("<tr></tr>");//创建tr标签
                        $("<td>" + v.PaperID + "</td>").appendTo($tr);//创建td标签,并绑定数据,在绑到tr标签
                        $("<td>" + v.PaperName + "</td>").appendTo($tr);//创建td标签,并绑定数据,在绑到tr标签
                        $("<td>" + v.PaperExplain + "</td>").appendTo($tr);//创建td标签,并绑定数据,在绑到tr标签
                        $("<td>" + v.PaperTime + "</td>").appendTo($tr);//创建td标签,并绑定数据,在绑到tr标签
                        $("<td>" + "<button type='button'id='delete'  οnclick='DeletePapers(" + v.PaperID + ")'>删除</button>" + "</td>").appendTo($tr);//创建td标签,并绑定数据,在绑到tr标签
                        //将tr绑定到tbody上
                        $tr.appendTo($tbod);
                    })

                }
            })
        }
        //删除
        function DeletePapers(obj) {
            if (confirm("您确定删除吗")) {
                $.ajax({
                    url: "/api/Papers/"+obj,		  //请求的路径,获取数据源
                    type: "delete",			  //请求的方式
                    dataType: "json",		  //请求返回的数据类型
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {//请求成功做的事
                        alert("删除成功");
                        InitPapers();
                    }
                })
            }
        }
//根据id查询
        function IDselect() {
            $.ajax({
                url: "/api/Papers",		  //请求的路径,获取数据源
                type: "get",			  //请求的方式
                data: { id: $("#ID").val() },
                dataType: "json",		  //请求返回的数据类型
                contentType: "application/json;charset=utf-8",
                success: function (data) {//请求成功做的事
                    var $tbod = $("#tbPapers tbody").empty();
                    $.each(data, function (i, v) {
                        //将data数据绑定到table
                        //创建tr td标签绑定到tbody
                        var $tr = $("<tr></tr>");//创建tr标签
                        $("<td>" + v.PaperID + "</td>").appendTo($tr);//创建td标签,并绑定数据,在绑到tr标签
                        $("<td>" + v.PaperName + "</td>").appendTo($tr);//创建td标签,并绑定数据,在绑到tr标签
                        $("<td>" + v.PaperExplain + "</td>").appendTo($tr);//创建td标签,并绑定数据,在绑到tr标签
                        $("<td>" + v.PaperTime + "</td>").appendTo($tr);//创建td标签,并绑定数据,在绑到tr标签
                        $("<td>" + "<button type='button'id='delete'  οnclick='DeletePapers(" + v.PaperID + ")'>删除</button>" + "</td>").appendTo($tr);//创建td标签,并绑定数据,在绑到tr标签
                        //将tr绑定到tbody上
                        $tr.appendTo($tbod);

                    })

                }
            })
        }
//根据姓名查询
        function selectName() {
            $.ajax({
                url: "/api/Students",		  //请求的路径,获取数据源
                type: "get",			  //请求的方式
                data: { StuName: $("#StuName").val(), },
                dataType: "json",		  //请求返回的数据类型
                contentType: "application/json;charset=utf-8",
                success: function (data) {//请求成功做的事
                    var $tbod1 = $("#tbStu tbody").empty();
                    $.each(data, function (i, v) {
                        //将data数据绑定到table
                        //创建tr td标签绑定到tbody
                        var $tr = $("<tr></tr>");//创建tr标签
                        $("<td>" + v.StuID + "</td>").appendTo($tr);//创建td标签,并绑定数据,在绑到tr标签
                        $("<td>" + v.StuName + "</td>").appendTo($tr);//创建td标签,并绑定数据,在绑到tr标签
                        $("<td>" + v.StuLoginName + "</td>").appendTo($tr);//创建td标签,并绑定数据,在绑到tr标签
                        $("<td>" + v.StuLoginPwd + "</td>").appendTo($tr);//创建td标签,并绑定数据,在绑到tr标签
                        $("<td>" + v.StuSex + "</td>").appendTo($tr);//创建td标签,并绑定数据,在绑到tr标签
                        $("<td>" + v.StuPhone + "</td>").appendTo($tr);//创建td标签,并绑定数据,在绑到tr标签
                        $("<td>" + v.StuEmail + "</td>").appendTo($tr);//创建td标签,并绑定数据,在绑到tr标签
                        //将tr绑定到tbody上
                        $tr.appendTo($tbod1);
                    })
                }

            })
        }
    </script>
}

转载:https://blog.csdn.net/weixin_45683261/article/details/105683757
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场