asp ajax 前台和后台结合

#abtitle {
    height: 30px;
    background-color: #0094ff;
    color: white;
    font-size: 18px;
    line-height: 30px;
    padding-left: 15px;
}

#ablist {
    border: dashed 1px #000;
    min-height: 500px;
    overflow: auto;
    height: 500px;
}

    #ablist .abldiv {
        height: 170px;
        width: 165px;
        display: inline-block;
        margin-left: 3px;
        border: solid 1px #000;
    }

        #ablist .abldiv li {
            text-align: center;
            margin-top: 5px;
            padding: 3px;
        }

.abldiv img {
    cursor: pointer;
}


#edit {
    display: none;
    position: absolute;
    top: 200px;
    left: 300px;
}

    #edit td {
        background-color:#ddc2c2;
    }

<%@ Page Title="" Language="C#" MasterPageFile="~/Masterpage/Site1.Master" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="Blog.Site.Alb.index" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="/css/alb.css" rel="stylesheet" />
    <script src="/js/common.js"></script>
    <script src="/js/jquery-1.9.1.js"></script>
    <script src="/js/jquery.tmpl.min.js"></script>
    <script src="/js/msgBox.js"></script>
    <script type="text/javascript">

        var isEdit = false;
        var msgbox;


        $(function () {

            //实例化msgbox控件（漂亮提示框）的实例
            msgbox = new MsgBox({ imghref: "/img/" });

            //调用获取列表方法
            getlist();

            //负责从表Enumeration 获取状态数据
            getStatusList();
        });

        //1.0 负责从表Enumeration 获取状态数据
        function getStatusList() {
            ajaxHelper.ajaxGet("/actions/albopt.ashx?type=getstatuslist", function (jsobj) {
                //将数据填充到select 标签中
                var arr = jsobj.datas;
                var selobj = document.getElementById("status");
                for (var i = 0; i < arr.length; i++) {
                    var item = arr[i];
                    var opt = new Option(item.e_cname, item.e_id);
                    selobj.options.add(opt);
                }
            });
        }

        //2.0 负责获取相册的列表
        function getlist() {
            // 利用ajax请求后台一般处理程序，得到相册的json格式数据，开始利用模板生成页面
            ajaxHelper.ajaxGet("/actions/albopt.ashx?type=getalllist", function (jsobj) {
                //此时jsobj一定是一个js的对象，其中jsobj.datas 才是正常要取得的逻辑数据，它有可能是一个js对象或者数组
                if (jsobj.status == "error") {
                    alert(jsobj.msg);
                } else if (jsobj.status == "sucess") {
                    //正常处理逻辑。利用jquery.tmpl.min.js中的tmpl方法 将jsobj.datas中的数据一一替换到id为ablTmpl的模板中的${}等占位符
                    //最终返回生成好的html代码追加到id=ablist的div中
                    $("#ablist").html($("#ablTmpl").tmpl(jsobj.datas));
                }
            });
        }

        //2.0.1 负责根据图片名称返回图片的完整虚拟路径，如果图片为null.jpg则直接显示默认图片，此方法会被模板
        //jquery.tmpl.min 来调用
        function getimgpath(imgname) {
            if (imgname == "null.jpg") {
                return "/images/null.jpg"
            } else {
                return "/upload/thum/" + imgname;
            }
        }

        //3.0 负责将老数据加载到面板中，并且弹出编辑面板
        function editload(paid) {
            isEdit = true;
            // 1.0 ajax 请求paid对应的数据
            ajaxHelper.ajaxGet("/actions/albopt.ashx?type=getmodelbyid&id=" + paid, function (jsobj) {
                var entity = jsobj.datas;
                $("#id").val(entity.PaId);
                $("#title").val(entity.PaTitle);
                $("#remark").val(entity.PaRemark);
                $("#status > option[value='" + entity.PaStatu + "']").attr("selected", "selected");
            });
            //2.0 打开面板
            openPanel(true);
        }

        //3.0.1 负责打开（isopen=true）或者关闭(isopen=false)新增编辑面板  
        function openPanel(isopen) {
            if (isopen) {
                $("#edit").show(); //打开面板
            } else {
                $("#edit").hide();//关闭面板
            }
        }

        //4.0 负责提交数据到服务器页面，进行新增或者编辑操作
        function submitData() {
            if (isEdit) {
                //做编辑逻辑
                edit();
            }
            else {
                //新增逻辑
                add();
            }
        }

        //4.0.1 编辑操作
        function edit() {
            //1.0 获取当前编辑面板中所有的值
            //遍历id=f1的form表单中带有name属性的元素，将其序列化成参数格式的字符串。例如：//title=a&remark=b&status=4
            var pamrs = $("#f1").serialize();
            pamrs += "&type=edit";

            //2.0 利用ajax的post请求将参数提交给服务器页面
            ajaxHelper.ajaxPost("/actions/albopt.ashx", pamrs, function (jsobj) {
                msgbox.showMsgOk(jsobj.msg, function () {
                    //刷新自己
                    window.location = window.location;
                    //window.location.reload();
                });
            });
        }

        //负责将isedit赋值为false，并且打开面板，同时将文本框中的内容清空
        function addOpt() {
            isEdit = false;
            $("#id").val("");
            $("#title").val("");
            $("#remark").val("");
            $("#status > option").removeAttr("selected");

            openPanel(true);
        }

        //4.0.2 新增功能
        function add() {
            var pamrs = $("#f1").serialize();
            pamrs += "&type=add";

            ajaxHelper.ajaxPost("/actions/albopt.ashx", pamrs, function (jsobj) {
                msgbox.showMsgOk(jsobj.msg, function () {
                    window.location = window.location;
                });
            });
        }

        //负责删除相册
        function del(paid,t) {
            if (confirm("你是否删除数据")) {
                ajaxHelper.ajaxGet("/actions/albopt.ashx?type=del&id=" + paid, function (jsobj) {
                    msgbox.showMsgOk(jsobj.msg, function () {
                        //找到当前删除按钮所在的div，将其remove掉
                        //$(t).parent().parent().parent().remove();

                        getlist();
                    });
                });
            }
        }


    </script>
    <script id="ablTmpl" type="text/x-jquery-tmpl">
        <div class="abldiv">
            <ul>
                <li>
                    <img src="${getimgpath(PaCoverSrc)}" height="100px" width="120px" /></li>
                <li>${PaTitle}</li>
                <li><a href="javascript:void(0);" onclick="editload(${PaId})">编辑</a>
                    | <a href="javascript:void(0);" onclick="del(${PaId},this)">删除</a></li>
            </ul>
        </div>
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="abtitle">
        相册管理
        <input type="button" value="新增相册" onclick="addOpt()" />
    </div>
    <div id="ablist">
    </div>
    <%--新增和编辑的面板--%>
    <div id="edit">
        <form id="f1">
            <input type="hidden" id="id" name="id" />
            <table class="list">
                <tr>
                    <th>相册名称</th>
                    <td>
                        <input id="title" name="title" type="text" />
                    </td>
                </tr>
                <tr>
                    <th>备注</th>
                    <td>
                        <textarea id="remark" name="remark"></textarea>
                    </td>
                </tr>
                <tr>
                    <th>状态</th>
                    <td>
                        <select id="status" name="status"></select>
                    </td>
                </tr>
                <tr>
                    <th></th>
                    <td>
                        <input type="button" value="提交" onclick="submitData()" />
                        <input type="button" value="关闭" onclick="openPanel(false)" />
                    </td>
                </tr>
            </table>
        </form>
    </div>
</asp:Content>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Blog.Site.actions
{
    using Blog.BLL;
    using Blog.Common;
    using Blog.Model;

    /// <summary>
    /// 负责处理相册表的增，删，查，改逻辑
    /// </summary>
    public class albopt : BaseAshx
    {
        BlogPhotoAlblumBLL bll = new BlogPhotoAlblumBLL();
        EnumerationBLL ebll = new EnumerationBLL();
        #region 1.0 所有请求的入口
        public override void SubProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            try
            {

                //1.0 约定type为当前请求的类型（增，删，查，改）,此参数是由ajax请求传入
                string type = context.Request.Params["type"];
                switch (type)
                {
                    case "getalllist":
                        getalllist();
                        break;
                    case "getmodelbyid":
                        getmodelbyid();
                        break;
                    case "add":
                        add();
                        break;
                    case "edit":
                        edit();
                        break;
                    case "del":
                        del();
                        break;
                    case "getstatuslist":
                        getStatusList();
                        break;
                    default:
                        break;
                }
            }
            catch (Exception ex)
            {
                //Response.Write();
                //Response.Write(ex.Message); //未将对象引用到实例  {status:error,msg:未将对象引用到实例,datas:null}
                base.WriteError(ex.Message);
            }
        }

        #endregion

        #region 2.0 获取列表逻辑代码

        private void getalllist()
        {
            //1.0 获取相册列表数据集合
            List<BlogPhotoAlblum> list = bll.GetModelList(" PaIsDel = 0 ");

            //2.0 实例化ajaxobj的对象实例            
            obj.status = EStatus.sucess.ToString();
            obj.msg = "获取数据成功";
            obj.datas = list;

            base.Response.Write(Kits.ToJsonString(obj));//{status:ok,msg:获取数据成功,datas:[{},{}]}
        }
        #endregion

        #region 3.0 编辑操作
        private void edit()
        {
            //1.0 接收异步对象通过post操作提交过来的参数
            string id = Request.Form["id"];
            string title = Request.Form["title"];
            string remark = Request.Form["remark"];
            string status = Request.Form["status"];

            //2.0 参数合法性验证
            if (Kits.IsInt(id) == false || Kits.IsInt(status) == false)
            {
                base.WriteError("id和状态必须为整数");
                return;
                //由于End（）会产生一个子线程异常，所以推荐使用return;
                //Response.End();
            }
            if (string.IsNullOrEmpty(title) || string.IsNullOrEmpty(remark))
            {
                base.WriteError("标题和备注不能为空");
                return;
            }

            //3.0 开始将数据更新到db
            BlogPhotoAlblum entity = bll.GetModel(int.Parse(id));
            entity.PaTitle = title;
            entity.PaRemark = remark;
            entity.PaStatu = int.Parse(status);
            bll.Update(entity);

            //4.0 提示用户更新成功
            base.WriteSucess("数据更新成功", null);
        }

        private void getmodelbyid()
        {
            //1.0 获取id参数的值
            string id = Request.QueryString["id"];

            // 2.0 验证参数的合法性
            if (Kits.IsInt(id) == false)
            {
                //{status:error,msg:参数id不合法,datas:null}
                base.WriteError("参数id不合法");
                return;
            }

            // 3.0 根据id去db中获取数据实体
            BlogPhotoAlblum entity = bll.GetModel(int.Parse(id));

            //4.0 调用父类统一的输出方法，将json数据响应回异步对象
            base.WriteSucess("", entity);
        }

        /// <summary>
        /// 负责从表[Enumeration] 中获取e_type=3的数据集合
        /// 以json字符串响应会异步对象
        /// </summary>
        private void getStatusList()
        {
            // 1.0 从数据库查询出数据集合
            List<Enumeration> list = ebll.GetModelList(" e_type = 3 ");
            obj.status = EStatus.sucess.ToString();
            obj.msg = "";
            obj.datas = list;

            // 2.0 将list集合序列化成json字符串以后,响应回异步对象
            base.Response.Write(Kits.ToJsonString(obj));
        }

        #endregion

        #region 4.0 新增
        private void add()
        {
            //1.0 接收异步对象通过post操作提交过来的参数

            string title = Request.Form["title"];
            string remark = Request.Form["remark"];
            string status = Request.Form["status"];

            //2.0 参数合法性验证
            if (Kits.IsInt(status) == false)
            {
                base.WriteError("状态必须为整数");
                return;
                //由于End（）会产生一个子线程异常，所以推荐使用return;
                //Response.End();
            }
            if (string.IsNullOrEmpty(title) || string.IsNullOrEmpty(remark))
            {
                base.WriteError("标题和备注不能为空");
                return;
            }

            // 3.0 新增逻辑
            BlogPhotoAlblum entity = new BlogPhotoAlblum()
            {
                PaAuthor = 2,//UserManager.LogedUserInfo().Id,
                PaAddtime = DateTime.Now,
                PaCoverSrc = "null.jpg",
                PaIsDel = false,
                PaPhotoNum = 0,
                PaPLNum = 0,
                PaRemark = remark,
                PaTitle = title,
                PaStatu = int.Parse(status)
            };
            bll.Add(entity);

            //4.0 提示用户
            base.WriteSucess("数据新增成功");
        }

        #endregion

        #region 5.0 删除操作
        private void del()
        {
            string id = Request.QueryString["id"];
            if (Kits.IsInt(id) == false)
            {
                base.WriteError("id error");
                return;
            }
            BlogPhotoAlblum entity = bll.GetModel(int.Parse(id));
            entity.PaIsDel = true;
            bll.Update(entity);

            base.WriteSucess("删除数据成功");

        }
        #endregion

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

common。js

var ajaxHelper = {
    markXHR: function () {
        var xhr;
        //高版本浏览器才支持 new XMLHttpRequest() 操作
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else //适配低版本浏览器的异步对象创建工作
        {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xhr;
    },
    ajaxGet: function (url, callBackFun) {
        this.ajaxProcess("get", url, null, callBackFun);
    },
    ajaxPost: function (url, parms, callBackFun) {
        this.ajaxProcess("post", url, parms, callBackFun);
    },
    //通用的ajax请求包装方法，可以被ajaxGet和ajaxPost方法来调用
    //1、method：表示请求方法  2 url ：表示请求的服务器路径  3 parms:只有post才有参数，如果是get请求则为null
    //4 callBackFun:回调函数，其逻辑代码是在调用方法中实现好以后，传入ajaxProcess 方法中的
    ajaxProcess: function (method, url, parms, callBackFun) {
        // 将字符串统一转换成小写
        var httpMethod = method.toLowerCase();
        //1.0 实例化异步对象
        var xhr = this.markXHR();
        //2.0 设置请求相关参数
        xhr.open(httpMethod, url, true);

        //3.0 设置请求报文头
        if (httpMethod == "get") {
            xhr.setRequestHeader("If-Modified-Since", "0");
        } else {
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        }

        //4.0 设置回调函数
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 获取服务器响应回来的响应报文体的数据
                var result = xhr.responseText;
                //由于result 是一个json格式的字符串，所以在此处统一转换成js对象（数组），再传入回调函数
                var jsobj = JSON.parse(result);
                if (jsobj.status == "error") {
                    // alert(jsobj.msg);
                    msgbox.showMsgErr(jsobj.msg);
                } else {
                    // 调用回调函数，将js对象传入
                    callBackFun(jsobj);
                }
            }
        }

        //5.0 发送请求给服务器
        if (httpMethod == "get") {
            xhr.send(null);
        } else {
            xhr.send(parms);
        }

    }

}