当前位置: 代码迷 >> ASP >> asp.net施用jbox插件,利用ajax(使用一般处理程序方式)执行撤销操作
  详细解决方案

asp.net施用jbox插件,利用ajax(使用一般处理程序方式)执行撤销操作

热度:116   发布时间:2013-01-26 13:47:03.0
asp.net使用jbox插件,利用ajax(使用一般处理程序方式)执行撤销操作

    

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


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


 

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


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

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

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

 

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

    1.准备工作

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



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


   

    撤销操作需要用到的函数

 <!--撤销课程类型弹出框jBox-->
      <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)

 <!--隐藏控件,保存课程类型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");
        }


    }

}


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



  相关解决方案