在浏览器界面，通过服务器实现数据库的增删改查

陈不诺

已于 2023-11-08 17:43:06 修改

阅读量146

点赞数

文章标签：数据库

于 2023-11-08 17:36:24 首次发布

本文链接：https://blog.csdn.net/NUO1357589842/article/details/134294259

版权

通过代码生成器搭建三层，注意引用，和添加需要的类

添加ASP.Net.Web应用程序的UI新项目,在UI层中添加数据HTMl界面

<body>
    <table id="tb">
        <tr>
            <th>编号</th>
            <th>用户名</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <tbody id="tbody"></tbody>
    </table>
    <div id="panl"></div>
    <div id="EditDiv">
        <form id="fm">
            <table>
                <input type="hidden" name="id" id="id"/>
                <tr>
                    <th>用户名</th>
                    <td><input type="text" name="name" id="name"></td>
                </tr>
                <tr>
                    <th>年龄</th>
                    <td><input type="text" name="age" id="age"></td>
                </tr>
                <tr>
                    <th></th>
                    <td><input type="button" value="提交" onclick="Sub();">|<input type="button" value="取消" onclick="closee()"></td>
                </tr>
            </table>
        </form>
    </div>
</body>

设计数据表的样式

<style>
        table {
            border: 1px solid #0094ff;
            border-collapse: collapse;
            margin: 0 auto;
        }

        th, td {
            border: 1px solid #0094ff;
        }
        #panl {
            position: absolute; /*设置成为绝对定位*/
            left: 0; /*这个div靠左边框的距*/
            top: 0;
            width: 100%; /*面板的宽（占屏幕的全部）*/
            height: 100%;
            background-color: black;
            z-index: 2; /*定位层数*/
            opacity: 0.5; /*透明度*/
            display: none; /*不显示*/
        }
        #EditDiv {
            position: absolute;
            left: 570px;
            top: 260px;
            display: none;
            z-index: 999;
            background-color: white;
        }
    </style>

在UI层添加一个js的文件夹，里面添加Js的插件

引用插件以及写js代码

 <script src="js/Ajaxhelp.js"></script>
    <script src="js/jquery-1.8.3.js"></script>
    <script src="js/jquery.tmpl.min.js"></script>
    <!--定义一个模板-->
    <script type="text/x-jquery-tmpl" id="tmpl">
        <tr>
            <td>${UserId}</td>
            <td>${UserName}</td>
            <td>${UserAge}</td>
            <td><a href="javascript:void(0)" onclick="Del(${UserId})">删除</a>|<a href="javascript:void(0)" onclick="Edit(${UserId})">修改</a></td>
        </tr>
    </script>
    <script>
        window.onload = function () {
            GetList();
        }
        //获得集合数据
        function GetList() {
            //调用Ajaxhelp的parcessGet属性
            ajaxHelp.ProcessGet("/ProcessAjax.ashx?type=GetList", function (AjaxObj) {
                if (AjaxObj.Status == 0) {
                    //1.0使用模板来生成
                    var trs = $("#tmpl").tmpl(AjaxObj.Datas);
                    //将tbody清空
                    $("#tbody").html("");
                    //2.0添加到tbody中
                    $("#tbody").append(trs);
                } else {
                    alert(AjaxObj.Msg);
                }
            });
        }
        //删除操作,传入参数
        function Del(UserId) {
            //通过异步请求完成操作
            ajaxHelp.ProcessGet("/ProcessAjax.ashx?type=Del&UserId="+UserId,function (AjaxObj) {
                //判断返回的对象的状态属性
                if (AjaxObj.Status == 0) {
                    //提示返回的信息属性
                    alert(AjaxObj.Msg);
                    //重新加载数据
                    GetList();
                }
                else {
                    //提示返回的信息属性
                    alert(AjaxObj.Msg);
                }
            });
        }
        //打开修改页面操作，传入参数
        function Edit(UserId) {
            ajaxHelp.ProcessGet("/ProcessAjax.ashx?type=GetModel&UserId=" + UserId, function (AjaxObj) {
                //判断返回对象的状态属性
                if (AjaxObj.Status == 0) {
                    //得到对象的数据属性
                    var data = AjaxObj.Datas;
                    //将对象属性的值赋值给文本框
                    $("#name").val(data.UserName);
                    $("#age").val(data.UserAge);
                    $("#id").val(data.UserId);
                    openn();
                }
                
            });
           
        }
        //打开修改面板
        function openn() {
            $("#panl,#EditDiv").show();
        }
        //关闭修改面板
        function closee() {
            $("#panl,#EditDiv").hide();
        }
        //提交的方法
        function Sub() {
            var params = $("#fm").serialize();
            //通过异步请求完成操作
            ajaxHelp.ProcessPost("/ProcessAjax.ashx?type=Edit",params,function (AjaxObj) {
                if (AjaxObj.Status == 0) {
                    alert(AjaxObj.Msg);
                    closee();
                    GetList();
                }
                else {
                    alert(AjaxObj.Msg);
                    closee();
                }
            });
        }
    </script>

封装服务器返回对象类

namespace UI
{
    //封装返回对象类
    public class AjaxObj
    {
        //封装返回对象的属性
        //返回集合，用于页面加载查询操作
        public object Datas { get; set; }
        //返回提示信息，用于增 删 改
        public string Msg { get; set; }
        //返回状态枚举
        public EnumStatus Status { get; set; }
    }
    //创建状态枚举
    public enum EnumStatus
    {
        Ok = 0,//操作成功
        NoOk = 1//操作失败
    }
}

封装一个序列化对象的工具类

namespace UI
{
    public class Kits
    {
        //系列化静态方法
        public static string GetJSON(object obj)
        {
            //创建系列化对象
            JavaScriptSerializer js = new JavaScriptSerializer();
            return js.Serialize(obj);
        }
    }
}

封装统一返回对象的抽象类，实现IHttphander接口

namespace UI
{
    //封装统一返回的消息对象
    public abstract class BaseAjax:IHttpHandler
    {
        //创建返回的对象
        public AjaxObj obj = new AjaxObj();
        //针对查询成功的方法
        public void CheckSuccess(object datas)
        {
            //给返回的对象属性赋值
            obj.Datas = datas;
            obj.Status = EnumStatus.Ok;
            //将对象序列化后返回
            HttpContext.Current.Response.Write(Kits.GetJSON(obj));
        }
        //针对非查询成功的方法
        public void CheckSuccess(string str)
        {
            obj.Msg = str;
            obj.Status = EnumStatus.Ok;
            //将对象序列化后返回
            HttpContext.Current.Response.Write(Kits.GetJSON(obj));
        }
        //针对操作失败的方法
        public void OperateFail(string str)
        {
            obj.Msg = str;
            obj.Status = EnumStatus.NoOk;
            HttpContext.Current.Response.Write(Kits.GetJSON(obj));
        }
        //实现接口
        public  bool IsReusable 
        {
            get { return false; }
        }
        public  void ProcessRequest(HttpContext context)
        {
            //调用抽象方法
            PubPR(context);
        }
        //抽象pr方法
        public abstract void PubPR(HttpContext context);
     
    }
}

在UI层添加处理请求的一般处理程序，继承统一返回对象的父类

 public class ProcessAjax : BaseAjax
    {
        //请求的统一入口
        public override void PubPR(HttpContext context)
        {
            //获得传递过来的处理类型
            string type = context.Request.QueryString["type"];
            //对类型进行定值判断
            switch (type)
            {
                case "GetList":
                    GetList(context);
                    break;
                case "Del":
                    Del(context);
                    break;
                case "GetModel":
                    GetModel(context);
                    break;
                case "Edit":
                    Edit(context);
                    break;
                default:
                    break;
            }
        }
        //创建逻辑层对象
        UseInfoBll bll = new UseInfoBll();
        private void Edit(HttpContext context)
        {
            //获得传递过来的内容
            string UserId = context.Request.Form["id"];
            string  UserName = context.Request.Form["name"];
            string  UserAge = context.Request.Form["age"];
            try
            {
                //根据id获得对象
                UseInfo model = bll.GetModel(int.Parse(UserId));
                //将修改后的值赋值对象
                model.UserId =int.Parse(UserId);
                model.UserName = UserName;
                model.UserAge =int.Parse(UserAge);
                //执行逻辑层的修改操作
                if (bll.Update(model))
                {
                    //调用父类针对非查询成功的方法
                    base.CheckSuccess("修改成功");
                }
                else
                {
                    //调用父类针对操作失败的方法
                    base.OperateFail("修改失败");
                }
            }
            catch
            {
                base.OperateFail("修改异常");
            }
        }
        //获得修改页面的方法
        private void GetModel(HttpContext context)
        {
            //获得传递过来的id
            string UserId = context.Request.QueryString["UserId"];
            try
            {
                //调用逻辑层通过id获得对象的方法
                UseInfo model = bll.GetModel(int.Parse(UserId));
                //调用父类针对非查询成功的方法
                base.CheckSuccess(model);
            }
            catch
            {
                //调用父类操作失败的方法
                base.OperateFail("获得修改对象失败");
            }
        }

        //删除的方法
        private void Del(HttpContext context)
        {
            //获得要删除的UserId
            string UserId = context.Request.QueryString["UserId"];
            try
            {
                //调用获得对象的方法
                UseInfo model = bll.GetModel(int.Parse(UserId));
                //将EorrTime变为1
                model.ErrorTime = 1;
                //返回操作信息
                if (bll.Update(model))
                {
                    //调用父类非查询成功的返回对象方法
                    base.CheckSuccess("删除成功");
                }
                else
                {
                    //调用父类操作失败的返回对象的方法
                    base.OperateFail("删除失败");
                }
            }
            catch
            {
                //调用父类操作失败的返回对象方法
                base.OperateFail("删除异常，请联系工作人员");
            }
        }

        //查询的方法
        private void GetList(HttpContext context)
        {
            try
            {
                //调用逻辑层对象获得数据方法
                List<UseInfo> list = bll.GetModelList("ErrorTime=0");
                //调用父类的针对查询成功的方法
                base.CheckSuccess(list);
            }
            catch
            {
                string str = "查询过程出现异常，请联系工作人员";
                //调用父类的针对操作失败的方法
                base.OperateFail(str);
            }
        }
    }