asp.net使用jbox插件，利用ajax（使用一般处理程序方式）执行撤销操作

向右看齐 2022-04-10 04:20 117阅读 0赞

在最近做的《教务\-基础系统》中有这样一个功能：为了防止用户误删数据，或者将数据删除后还想恢复，我们对数据的处理不是直接删除，而是允许用户撤销数据，如果用户想使用撤销的数据激活一下即可。这里说一下我撤销操作的实现，作为初学者，我说的可能有很多不到位的地方，还请高手指点！

**一、先看一下，课程类型撤销运行效果**

![1358739136_7776.gif][]

由于此处我上传的gif图片不动，我将《[**课程类型撤销展示**][Link 1]》上传空间了。

**二、然后说一下这部分使用的技术及插件**

1.这里我采用的是jbox插件，这个插件刚刚接触，感觉它的效果还是不错的。

2.撤销部分我采用ajax技术，利用一般处理程序将撤销的数据更新至数据库。

**三、最后介绍一下我制作过程及代码的编写**

**    1.准备工作**

因为使用jBox插件，于是首先需要导入jBox文件夹，在页面头部引入jBox CSS文件及js文件；在页面撤销后数据库数据也进行撤销，这里的操作使用一般处理程序处理，于是用到handler文件夹。

![1358737722_2248.jpg][]

**    2.页面头部引用各css文件及js文件，并编写用到的函数**

![1358738107_2979.jpg][]

**   **

**    撤销操作需要用到的函数**

<script type="text/javascript">
              // 调父窗口请用 parent 或 top，如果是多层iframe，需要调用多个parent
              var html = "<div style='padding:10px;'>输入撤销原因：<input type='text' id='courseTypeID' name='CourseType' /></div>";
              var submit = function (v, h, f) {
                  if (f.courseTypeID == '') {
                      // f.some 或 h.find('#some').val() 等于 top.$('#some').val()
                      $.jBox.tip("请输入撤销原因。", 'error', { focusId: "courseTypeID" }); // 关闭设置 some 为焦点
                      return false;
                  }
                  //显示你输入的原因
                  // top.$.jBox.info("撤销原因：" + f.some);
                  
                  //撤销课程类型，通过ajax基础，执行一般处理程序
                    $.ajax({
    //                    type: 'post',
                        url: '../handler/DeleteCourseTypeByID.ashx',
                        data: "data=" + escape(f.CourseType) + "&CourseTypeID=" + $("#hidd_valCrourseTypeId").val() + "&rnd=" + Math.random(),
                        //                    dataType: 'text',
                        dataType:'html',
    
    
                        success: function (mgs) {
                            alert(mgs);
                            if (Number(mgs) > 0) {
                                if (document.getElementById("t_" + $("#hidd_valCrourseTypeId").val()))
                                    $("#t_" + $("#hidd_valCrourseTypeId").val()).html("");
                            } else { alert("撤销失败！"); }
                        }, error: function () {
                            location.href = location.href;
                        }
                    })
    
                  return true;
              };
    
                            //top.$.jBox(html, { title: "撤销原因", submit: submit });
                            //根据课程类型ID撤销课程类型信息
                            function CancelCourseTypeById(CourseTypeID) { $("#hidd_valCrourseTypeId").val(CourseTypeID); top.$.jBox(html, { title: "撤销原因", submit: submit }); }
              //          }
    
          </script>

**    3.撤销按钮事件(使用隐藏控件保存课程类型ID)**

<input type="hidden" value="" id="hidd_valCrourseTypeId" />
                                                                         
                                                                        <td class="icon tail" width="100px">
                                                                            <a class="opt" title="撤销" href="javascript:CancelCourseTypeById('<%#Eval("CourseTypeID")%>')"><span class="icon-cancel">
                                                                            </span></a>
                                                                        </td>

**    4.一般处理程序(DeleteCourseTypeByID.ashx),与页面头部ajax操作处使用的一般处理程序名称相对应**

<%@ WebHandler Language="C#" Class="DeleteCourseTypeByID" %>
    
    /*
     * 创建人：马兆娟
     * 创建时间：2013年1月14日15:40:10
     * 版权所有：提高班
     * 此模块作用：撤销课程类型信息
     */
    
    using System;
    using System.Web;
    //引用命名空间及BLL层和实体层
    using System.Data;
    //引用课程BLL层
    using TeachSystem.BLL.CourseBLL;
    //引用课程实体层
    using TeachSystem.Entity.CourseEntity;
    
    
    public class DeleteCourseTypeByID : IHttpHandler {
    
        public void ProcessRequest(HttpContext context)
        {
            //context.Response.ContentType = "text/plain";
    
            string strData = "";
            string strCourseTypeID = "";
           
            //撤销理由
            strData = context.Request.QueryString["data"];
            //课程类型ID
            strCourseTypeID = context.Request.QueryString["CourseTypeID"];
            /*
             * 数据处理类
             * 
             * */
    
    
            //课程类型ID
            //string strCourseTypeID = context.Request.QueryString["strCourseTypeID"];
            //课程类型实体
            CourseTypeEntity enCourseType = new CourseTypeEntity();
            enCourseType.CourseTypeID = strCourseTypeID;
            
            enCourseType.ActionReason = strData;
            //操作人
            enCourseType.OperatorName = "zhang";
    
            //调用BLL层方法，根据课程类型ID撤销课程类型信息
            Boolean boolDeleteCourseType = new CourseTypeBLL().CancelCourseType(enCourseType);
            if (true == boolDeleteCourseType)
            {
                //成功，弹出1；失败，弹出0
                context.Response.Write("1");
            }
            else
            {
                context.Response.Write("0");
            }
    
    
        }
    
    }

**至此撤销操作就完成了，当然这样执行起来依然有瑕疵，需要我们探索改进。**

[1358739136_7776.gif]: https://img-my.csdn.net/uploads/201301/21/1358739136_7776.gif
[Link 1]: http://download.csdn.net/detail/mazhaojuan/5015341
[1358737722_2248.jpg]: https://img-my.csdn.net/uploads/201301/21/1358737722_2248.jpg
[1358738107_2979.jpg]: https://img-my.csdn.net/uploads/201301/21/1358738107_2979.jpg