ajax页面布局

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Model;
using Dapper;
using System.Data.SqlClient;

namespace DAL
{
    public class Dal
    {
        //显示
        public List<XinXi> Show()
        {
            using (SqlConnection conn = new SqlConnection("Data Source=.;Initial Catalog=Month01;Integrated Security=True"))
            {
                return conn.Query<XinXi>("select * from XinXi x join BanJi b on x.XId=b.BId").ToList();
            }
        }

        //绑定下拉
        public List<BanJi> SelBen()
        {
            using (SqlConnection conn = new SqlConnection("Data Source=.;Initial Catalog=Month01;Integrated Security=True"))
            {
                return conn.Query<BanJi>("select * from BanJi").ToList();
            }
        }

        //添加
        public int Add(XinXi x)
        {
            using (SqlConnection conn = new SqlConnection("Data Source=.;Initial Catalog=Month01;Integrated Security=True"))
            {
                return conn.Execute(string.Format("insert into XinXi values('{0}','{1}','{2}','{3}','{4}')", x.Name, x.XId, x.RTime, x.Age, x.Sex));
            }
        }

        //删除
        public int Del(int id)
        {
            using (SqlConnection conn = new SqlConnection("Data Source=.;Initial Catalog=Month01;Integrated Security=True"))
            {
                return conn.Execute(string.Format("delete from XinXi where Id = '{0}'",id));
            }
        }
    }
}

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Show</title>

    <script src="~/Scripts/jquery-3.3.1.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Content/My97DatePicker/WdatePicker.js"></script>
    <script>
        $(function () {
            Show();
            SelBen();
        })

        function Show() {
            $.ajax({
                url: "http://localhost:59189/api/Default/Show",
                type: "Get",
                dataType: "json",
                success: function (data) {
                    $("#List").empty();
                    $(data).each(function () {
                        var str = "<tr>"
                            + "<td>" + this.Id + "</td>"
                            + "<td>" + this.Name + "</td>"
                            + "<td>" + this.XId + "</td>"
                            + "<td>" + this.RTime + "</td>"
                            + "<td>" + this.Age + "</td>"
                            + "<td>" + (this.Sex ? "女" : "男") + "</td>"
                            + "<td><a onclick='Del(" + this.Id + ")'>删除</a></td>"
                            + "</tr > ";
                        $("#List").append(str);
                    })
                }
            })
        }

        //function SelBen() {
        //    $.ajax({
        //        url: "http://localhost:59189/api/Default/SelBen",
        //        type: "GET",
        //        dataType: "json",
        //        success:
        //            function (d) {
        //                var i = "";
        //                $(d).each(function () {
        //                    var sql = "<option value='" + this.BId + "'>" + this.BName + "</option>";
        //                    i += sql;
        //                });
        //                $("#Select1").append(i);
        //            }
        //    })
        //}

        //退票
        function Del(id) {
            if (confirm("确定要退票吗？")) {
                $.ajax({
                    url: "http://localhost:59189/api/Default/Del/{id}=" + id,
                    type: "post",
                    dataType: "json",
                    success: function (res) {
                        if (res > 0) {
                            alert("删除成功");
                            location.href = "/Default/Show";
                        } else {
                            alert("删除失败");
                        }
                    }
                })
            }
        }


/**/</script>

</head>
<body>
    <div>
        学生姓名：<input id="Text1" type="text" /><input id="Button1" type="button" value="查询" onclick="Show()" />
        <input id="Button1" type="button" value="添加" onclick="javascript: location.href='/Default/Add'" />
    </div>
    <div>
        <table class="table table-bordered">
            <tr>
                <td>学生编号</td>
                <td>学生姓名</td>
                <td>所在班级</td>
                <td>入学时间</td>
                <td>年龄</td>
                <td>性别</td>
                <td>操作</td>
            </tr>
            <tbody id="List"></tbody>
        </table>

    </div>
</body>
</html>

@{
    ViewBag.Title = "Add";
}

<h2>Add</h2>

<table class="table-bordered">
    <tr>
        <td>学生姓名：</td>
        <td><input id="txt_Name" type="text" /></td>
    </tr>
    <tr>
        <td>所在班级：</td>
        <td>
            <select id="Select1">
                <option>请选择</option>

            </select>
        </td>
    </tr>
    <tr>
        <td>入学时间：</td>
        <td><input id="txt_StartTime" type="text"  /></td>
    </tr>
    <tr>
        <td>年龄：</td>
        <td><input id="txt_Age" type="text" /></td>
    </tr>
    <tr>
        <td>性别：</td>
        <td>
            <input id="txt_Sex" type="radio" name="sex" checked/>男<input id="txt_Sex_n" type="radio"name="sex" />女
        </td>

    </tr>
    <tr>
        <td colspan="2">
            <input id="btn_Save" type="button" value="添加" onclick="addst()" />
            <input id="btn_Back" type="button" value="返回列表" onclick="javascript:location.href='/Default/Show'" />
        </td>
    </tr>
</table>

<script src="~/Scripts/jquery-3.3.1.min.js"></script>




<script>
    $(function () {
        Sele();
    })
    function Sele() {
        $.ajax({
            url: "http://localhost:59189/api/Default/SelBen",
            type: "GET",
            dataType: "json",
            success:
                function (d) {
                    var opti = "";
                    $(d).each(function () {
                        var op = "<option value='" + this.BId + "'>" + this.BName + "</option>";
                        opti += op;
                    });
                    $("#Select1").append(opti);
                }
        })
    }


    function addst() {

        var name = $("#txt_Name").val();
        var age = $("#txt_Age").val();
        var rtime = $("#txt_StartTime").val();
        var sex = $("#txt_Sex").val();
        var sele = $("#Select1").val();
     

        $.ajax({
            url: "http://localhost:59189/api/Default/Add",
            type: "post",
            data: {
                Name: name,
                XId: sele,
                RTime: rtime,
                Age:age,
                Sex: sex
            },
            dataType: "text",
            success:
                function (d) {
                    if (d > 0) {
                        alert("添加成功");
                        location.href='/Default/Show'
                    } else {
                        alert("添加失败");
                    }
                }
        })
    }
</script>

posted @ 2020-07-08 14:36 小马の阅读(190) 评论(0) 收藏举报

刷新页面返回顶部

代码大神

ajax页面布局

公告