通过代码生成器搭建三层,注意引用,和添加需要的类
添加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);
}
}
}