【ASP.NET】利用.ashx、Ajax、Session优化Repeater的使用

分类：Ajax作者：佚名

在《【ASP.NET】利用Repeater完成对SQL Server数据库的增删改查》（点击打开链接）展示了如果纯粹地利用ASP.NET完成对SQL Server的增删改查操作，但是，缺点很明显，原本简单的网页编程引入了许多ASP.NET独有的概念，并且所有增删改查的处理停留在一个页面不易维护，最重要的是，大量使用服务器组件，注定导致网页的加载与处理的速度下降。

还是同一个功能，对数据库某张表进行增删改查，只是下面提供另一个方案完成ASP.NET对数据库的增删改查，就是Repeater仅作为一个foreach的遍历器来使用，其余部分完全使用客户端组件来实现。


而数据的处理全部利用《【ASP.NET】利用jQuery与.ashx完成简单的Ajax》（点击打开链接）中的形式，先将数据以表单或者Ajax提交到.ashx文件中，处理完再重定向会主页面，并且以Session的形式传回提示信息，提示信息一显示则销毁这个Session，以此说明在.ashx使用Session。

首先，解决方案的目录结构如下图所示：


数据库查询类DB.cs不用说了，这个文件，在我之前的文章出现多次了，具体可以看《【C#】利用C#窗体与SQL Server的连接、Treeview制作SQL Server数据库查看器》（点击打开链接），代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;//DataTable用到
using System.Data.SqlClient;//一系列的数据库操作类用到
using System.Configuration;

namespace RepeaterAjax
{
    class DB : IDisposable
    {
        private SqlConnection sqlConnection;

        // 以下代码，保证该类只能有一个实例        

        // 在自己内部定义自己的一个实例，只供内部调用  
        private static DB db = null;

        // 这个类必须自动向整个系统提供这个实例对象  
        // 这里提供了一个供外部访问本class的静态方法，可以直接访问  
        public static DB getInstance()
        {
            if (db == null)
            {
                db = new DB();
            }
            return db;
        }

        private DB()// 私有无参构造函数
        {
            sqlConnection = new SqlConnection(@"server=.\SQLEXPRESS;database=test;Trusted_Connection=SSPI;");
            sqlConnection.Open();
        }

        //单例化结束

        public DataTable getBySql(string sql,Object[] param)
        {//查询
            sql = String.Format(sql,param);//用字符串参数替换的形式防止注入
            SqlDataAdapter sqlDataAdapter = new SqlDataAdapter(new SqlCommand(sql,sqlConnection));
            DataTable dataTable = new DataTable();
            sqlDataAdapter.Fill(dataTable);
            return dataTable;
        }
        public DataTable getBySql(string sql)
        {//无参数的查询
            SqlDataAdapter sqlDataAdapter = new SqlDataAdapter(new SqlCommand(sql,sqlConnection));
            DataTable dataTable = new DataTable();
            sqlDataAdapter.Fill(dataTable);
            return dataTable;
        }

        public void setBySql(string sql,Object[] param)
        { //无查询结果的修改
            sql = String.Format(sql,param);//用字符串参数替换的形式防止注入            
            new SqlCommand(sql,sqlConnection).ExecuteNonQuery();
        }
        public void setBySql(string sql)
        { //无参数，无查询结果的修改
            new SqlCommand(sql,sqlConnection).ExecuteNonQuery();
        }

        public void Dispose()
        {//相当于析构函数
            sqlConnection.Close();
            //在C#中关闭数据库连接不能在类的析构函数中关，否则会抛“内部 .Net Framework 数据提供程序错误 1”的异常
            //通过实现C#中IDisposable接口中的Dispose()方法主要用途是释放非托管资源。
        }
    }
}

之后，主页面Default.aspx的代码如下，可以看到这次的Repeater没有添加各种ASP.NET独有的事件与属性，完完全全作为一个简单的循环组件来使用的。里面的数据完全是客户端的内容，这里设置修改、添加通过表单的形式来实现，而删除数据则通过Ajax的方式去实现，理论上，全部用Ajax或者表单去完成都可以，反正利用.ashx、Ajax、Session优化Repeater之后，网页编程就变得灵活起来。 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RepeaterAjax._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Repeater与Ajax的综合运用</title>
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
</head>
<body>
    <%--
        删去：
        <form id="form1" runat="server">
        <div>
        删去自带的ASP.NET服务端的表单，此表单不影响功能的显示，但会影响到IE的样式
        因为理论上，这个服务端表单还是要被编译成普通的表单
        而表单中不应该嵌套表单
    --%>
    <asp:Repeater ID="Repeater1" runat="server">
        <%--不循环的部分--%>
        <HeaderTemplate>
            <table border="1">
                <tr>
                    <th>
                        用户名
                    </th>
                    <th>
                        密码
                    </th>
                    <th colspan="2">
                        操作
                    </th>
                </tr>
        </HeaderTemplate>
        <%--根据数据绑定循环部分--%>
        <ItemTemplate>
            <tr>
                <form action='update.ashx' method="post">
                <input type="hidden" name="id" value='<%#Eval("id")%>' />
                <td>
                    <input type="text" name="username" value='<%#Eval("username")%>' />
                </td>
                <td>
                    <input type="text" name="password" value='<%#Eval("password")%>' />
                </td>
                <td>
                    <input type="submit" value="修改" />
                </td>
                </form>
                <td>
                    <input type="button" onclick='del(<%#Eval("id")%>)' value="删除" />
                </td>
            </tr>
        </ItemTemplate>
        <%--不循环的部分--%>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>
    <b>插入用户：</b><br />
    <form action="insert.ashx" method="post">
    用户名：<input type="text" name="username" />密码：<input type="text" name="password" /><input
        type="submit" value="添加" />
    </form>
</body>
<script type="text/javascript">
    //删除数据的Ajax处理
    function del(id) {
        if (confirm("确定删除？")) {
            $.ajax({
                type: 'post',url: 'del.ashx',dataType: "html",data: {
                    id: id
                },success: function (data) {
                    window.history.go(0);
                },error: function (data) {
                    alert("出错了！请稍候再试！");
                }
            });
        }
    }
</script>
</html>

Default.aspx需要注意的是一些影响样式小地方，譬如HTML中表单不得镶嵌表单，也就是<form>中不应该再有<form>节点，无论这个form是服务端的form还是客户端的form。同时还有《【HTML】表单form中一单回车就提交的text、一点击就提交的button》（ 点击打开链接）的问题。

Default.aspx的后端编程也变得简单起来了，Default.aspx.cs的代码如下所示，就做两件事：一、将数据库的数据加载到Repeater，让其循环，二、判断各个处理的.ashx是否有提示信息返回，有就加载，提示信息的载体就是Session中的info key。各个操作的处理代码，分别写在不同的.ashx这样好管理。

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

namespace RepeaterAjax
{
    public partial class _Default : System.Web.UI.Page
    {
        DB db;
        protected void Page_Load(object sender,EventArgs e)
        {
            db = DB.getInstance();
            if (!Page.IsPostBack)
            {
                Repeater1.DataSource = db.getBySql("select * from [user_info]");
                Repeater1.DataBind();
            }
            if (Session["info"] != null)
            {
                Response.Write(Session["info"]);
                Session.Remove("info");//用完就销毁，减轻服务器的负担，相当于jsp的request容器
            }
        }
    }
}

接下来，则是各个.ashx，首先是简单的删除数据的处理del.ashx，进行完简单的数据库处理之后，压一个提示信息到Session的info中，Default.aspx在Ajax处理完，则刷新一下页面即可读到这个Session与更新Repeater数据，刷新页面Default.aspx.cs的Page_Load(object sender,EventArgs e)方法会再运行一次。 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;//要在ashx文件中使用session就必须加这个

namespace RepeaterAjax
{
    /// <summary>
    /// 删除数据库数据
    /// </summary>
    public class del : IHttpHandler,IRequiresSessionState//要在ashx文件中使用session就必须调用这个接口
    {

        public void ProcessRequest(HttpContext context)
        {
            DB db = DB.getInstance();
            context.Response.ContentType = "text/plain";
            db.setBySql("delete from [user_info] where [id]={0}",new Object[] { context.Request.Form["id"] });
            context.Session["info"] = "<b>已删除！</b>";
        }

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

唯一需要注意的是，在.ashx一旦使用到Session必须引入相应的头文件，实现相应的接口，它不想aspx.cs一齐都帮你搞好的，如果你不这样整，就会出现如下图的“未将对象引用设置到对象的实例”的错误：


接下来处理表单的插入数据insert.ashx与处理Ajax的del.ashx大同小异，只是处理完，要重定向会Default.aspx页面，重定向到Default.aspx页面Default.aspx.cs的Page_Load(object sender,EventArgs e)方法也会再运行一次的，完成Repeater的数据再绑定，也就是更新Repeater与读取Session的info操作。

需要注意的是重定向到Default.aspx，要在其方法后面补一个false，具体原因在《【ASP.NET】System.Threading.ThreadAbortException中第一次偶然出现的“mscorlib.dll”类型的异常》（点击打开链接）说过，这里不再赘述。

具体代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;//要在ashx文件中使用session就必须加这个

namespace RepeaterAjax
{
    /// <summary>
    /// 插入数据的处理
    /// </summary>
    public class insert : IHttpHandler,IRequiresSessionState//要在ashx文件中使用session就必须调用这个接口
    {

        public void ProcessRequest(HttpContext context)
        {
            DB db = DB.getInstance();
            context.Response.ContentType = "text/plain";
            string username = context.Request.Form["username"];
            string password = context.Request.Form["password"];

            if (username.Trim().Equals("") || password.Trim().Equals(""))
            {
                context.Session["info"] = "<b>用户名，密码不得为空！</b>";
            }
            else
            {
                if (db.getBySql("select * from [user_info] where [username]='{0}'",new Object[] { username }).Rows.Count == 0)
                {
                    db.setBySql("insert into [user_info]([username],[password]) values('{0}','{1}')",new Object[] { username,password });
                    context.Session["info"] = "<b>添加成功！</b>";
                }
                else
                {
                    context.Session["info"] = "<b>已有该用户名！</b>";
                }
            }
            context.Response.Redirect("Default.aspx",false);
        }

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

而数据的修改处理update.ashx完全与insert.ashx同理，就数据库的SQL语句不同而已，具体代码如下，不再赘述了： 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;//要在ashx文件中使用session就必须加这个

namespace RepeaterAjax
{
    /// <summary>
    /// 修改数据的处理
    /// </summary>
    public class update : IHttpHandler,IRequiresSessionState//要在ashx文件中使用session就必须调用这个接口
    {

        public void ProcessRequest(HttpContext context)
        {
            DB db = DB.getInstance();
            context.Response.ContentType = "text/plain";
            string id = context.Request.Form["id"];
            string username = context.Request.Form["username"];
            string password = context.Request.Form["password"];
            if (username.Trim().Equals("") || password.Trim().Equals(""))
            {
                context.Session["info"] = "<b>用户名，密码不得为空！</b>";
            }
            else
            {
                if (db.getBySql("select * from [user_info] where [username]='{0}'",new Object[] { username }).Rows.Count == 0)
                {
                    db.setBySql("update [user_info] set [username]='{0}' where [id]={1}",id });
                    db.setBySql("update [user_info] set [password]='{0}' where [id]={1}",new Object[] { password,id });
                    context.Session["info"] = "<b>已修改！</b>";
                }
                else
                {
                    context.Session["info"] = "<b>已有该用户名！</b>";
                }
            }
            context.Response.Redirect("Default.aspx",false);

        }

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

$.AJAX()方法中的PROCESSDATA参数
$.AJAX()方法中的PROCESSDATA参数 在使用jQuery的$.ajax()方法的时候参数processData默认为true(该方法为jQuery独有的) 默认情况下会将发送的数据序列化以适应默认的内容类型application/x-www-form-urlencoded 如果想发送不
form表单提交的几种方式
form表单提交的几种方式 表单提交方式一：直接利用form表单提交 html页面代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot; /&gt; &lt;title&gt;Ins
AJAX应用之注册用户即时检测
文章浏览阅读1.3k次。AJAX的无刷新机制使得在注册系统中对于注册名称的检测能即时显示。常见的用户注册是用户输入用户名，后台程序检测数据库中用户名是否重复而做出注册的成功与失败之提示（当用户注册重名时将返回重新注册），或者稍微人性化一点就是在用户名文本框后添加一个检测按钮，让用户检测后再做注册。以上操作，对于用户体验方面来说是比较“差劲”的，一个很好的用户体验就是：当用户输入完注册用户名后，Web系统应能即时检查并即时_用户注册 实时异步检测
详谈基于JSON的高级AJAX开发技术
文章浏览阅读1.2k次。 本文将解释如何使用AJAX和JSON分析器在客户端和服务器之间创建复杂的JSON数据传输层。一、 引言毫无疑问，AJAX已经成为当今Web开发中一种强有力的用户交互技术，但是它的许多可能性应用仍然鲜为人知。在本文中，我们将来共同探讨如何 使用JavaScript对象标志(JSON)和JSON分析器在服务器和客户端AJAX引擎之间创建复杂而强有力的JSON数据传输层。我们将_ajax技术可行性
手写的ajax分页控件
文章浏览阅读2.2k次。/************************** 创建XMLHttpRequest对象 **************************/function CreateRequest(){ var xmlObj = null; try { xmlObj = new XMLHttpRequest(); } catch(e) {
AJAX中同时发送多个请求XMLHttpRequest对象处理方法
文章浏览阅读3.7k次。在ajax应用中，通常一个页面要同时发送多个请求，如果只有一个XMLHttpRequest对象，前面的请求还未完成，后面的就会把前面的覆盖 掉，如果每次都创建一个新的XMLHttpRequest对象，也会造成浪费。解决的办法就是创建一个XMLHttpRequset的对象池，如果池里有 空闲的对象，则使用此对象，否则将创建一个新的对象。下面是我最近写的一个简单的类：* XMLHttpReques_xmlhttprequest发送多个请求
Ajax 同一页面同时执行多个 XMLHTTP
文章浏览阅读3.1k次。Ajax 同一页面如何同时执行多个 XMLHTTP 呢，比如博客页，需要同时利用 Ajax 读取作者信息、文章信息、评论信息……我们的第一反应可能是创建多个全局 XMLHTTP 对象，但这并不现实。其实实现方式非常简单，就是给 onreadystatechange 对应的回调函数加上参数，以下代码是解决方案中一个函数中的一段代码。xmlhttp.open("GET", "ajax_proc_ajax响应多个mxl文件
简单介绍数据岛使用方法
文章浏览阅读1.5k次。数据岛指的是存在Html网页中的xml代码段，它在Html中形成了一个数据的集合，数据岛允许我们在Html网页中集成xml，对xml编写脚本.数据岛有它特有的形式，由标记xml开始，在开始标记中要有一个ID属性，用于指定该指定数据岛的名称。 (当然要以/xml结束).元素xml包含的内容就是xml代码。数据岛也分为2种：1）内嵌的数据岛形式2）外嵌的数据岛形式说了那么多废话，还_数据中岛计算模式
AJAX 框架 用 Asp.net ajax 还是 Jquery ?
文章浏览阅读2.1k次。AJAX 流行之后，总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NET AJAX 并不包括在 AJAX 框架之中。刚开始学了 JQuqery， 众多的 $get(),...等等符号早已把我搞晕了。暂时就放弃了。后来学习 ASP.NET AJAX ，在微软的领导下，逐渐由服务器端转向客户端编程。 激起我客户端编程的兴趣，才想起学习一下了 Jquery. 随着WEB2._jquery ajax asp.net 认证
轻便的XMLHttpRequest应用函数：downloadUrl()
文章浏览阅读1.7k次。前段时间在用google map api的函数库的时候，发现里面的downloadUrl函数非常好用，所以自己写了一个。用腻了那些什么框架什么池，到头来发现越简单的东西越是适合我这种懒人。downloadUrl(url, callback, data);参数说明： url不用说了; callback是回调函数，函数调用的时候会有两个参数：data, responseCode，data就_xmlhttprequest downloadurl
利用XMLHTTP无刷新自动实时更新数据
文章浏览阅读956次。前些时间写了几篇关于XMLHTTP运用的实例.(可以到http://dev.csdn.net/user/wanghr100看之前的几编关于XMLHTTP的介绍.)近来看论坛上经常有人提问关于如何无刷新,自动更新数据.传统上,我们浏览网页,如果加入最新的数据.只能是等我们重新向服务器端请求时才能显示出来.但是,对于一些时效性很强的网站.传统的这种做法是不能满足的.我们可以让程序自动刷新.定时_后端xml怎么实现数据有救新增,没有就更新
AJAX设计模式 XMLHttpRequest调用
文章浏览阅读3.3k次。 XMLHttpRequest调用XMLHttpRequest Call ●●●调用，回调，下载，抓取，实时，查询，远程通信（Remoting），远程通信脚本（RemoteScripting），同步，上传，XMLHttpRequest图6-2：XMLHttpRequest调用 目标故事Reta正在一个批发商网站上购买商品。每次她添加一个商品到购物车时，web站点发出_createxmlhttpre
用javascript动态更改DropDownList下拉项
文章浏览阅读1.3k次。function clearitem(){ var drp1 = document.getElementById("drp1"); while(drp1.options.length>0) { drp1.options.remove(0); } }//动态更改方法（根据城市代码取得该市商业区并添加到DropDownList中_dropdownlist根據動態變化
微調一下 Json.net ，讓他可以序列基本型別
文章浏览阅读1.9k次。因為 Json.net 是有附原始碼的，他也附了單元測試的專案，底下是我額外增加的UnitTest，我的目標就是讓底下的測試可以pass，而且原來的Test 也要都能通過。 ValueTypeTest.csusing System;using NUnit.Framework;namespace Newtonsoft.Json.Test { [TestFixture] public cl_vb 無效的 json 基本型別
利用XMLHTTP无刷新获取数据
文章浏览阅读844次。利用XMLHTTP无刷新获取数据. 客户端和服务器端数据的交互有几种方法.1.提交,通过提交到服务器端.也称"有刷新"吧.2.通过XMLHTTP无刷新提交到服务器端,并返回数据.也称"无刷新"吧.利用XMLHTTP我们可以实现很多很强大的应用.这文章主要介绍它的一些简单的应用.附:因为XMLHTTP是IE5.0+支持的对象.所以你必须要有IE5.0+才能看到效果.client.htm_xmlhttp取源码没有更新
.Net 底下，Json 相關套件的限制
文章浏览阅读1.8k次。Json.Net 無法序列基本型別(string, int)，Asp.Net Ajax 無法正確序列日期，AjaxPro序列出我不想要的_type字串 1. Json.Net 是我最常使用的序列/反序列json套件，標榜速度快，對於一對多關係的object 也都能正常運作, 己能滿足我平日的需要，但前幾天突然有個情況，我要序列的是一個泛型參數，該參數不一定是物object型別，有可能是st_token string in state start
编写组件，使用JavaScript更新UpdatePanel (转载)
文章浏览阅读1.3k次。转载自：http://www.cnblogs.com/JeffreyZhao/archive/2007/01/31/update_the_updatepanels_by_js.html众 所周知，UpdatePanel是通过Trigger来更新的。被设定为Trigger的控件在PostBack之后会被客户端所截获，并且使用 XMLHttpRequest对象发送内容，然后服务器端由ScriptMan_web.ui.updatepanel 和 updatepanel 的区别
无刷新网页——数据岛技术应用
文章浏览阅读1.9k次。有些时候，只是需要更新页面的一个部分甚至只是更新中间的几个数据却需要从服务器DOWN整个页面，导致各种资源的浪费。使用数据岛技术可以很好的解决这个问题：通过定时器或用户事件触发数据岛（XML对象）象服务器获取数据，在数据获取完成后，适时更新相关数据。示例HTML部分：http://localhost/WebService/LoadData/FeaturedService.asmx/GetScore_web数据岛
构建pool管理无刷新页面的xmlhttp对象
文章浏览阅读1k次。在页面上使用ActiveXObject的代价是很大的，如果我们的无刷新页面使用xmlhttp技术，我们或许需要频繁的建立xmlhttp对象，当然 我们也可以使用全局变量来cache一个xmlhttp对象实例。但是这样的方法适合于同步方式xmlhttp通信，而对于异步方式xmlhttp通信将 会出现问题。由于没有了进程的堵塞，用户可能再次调用同一个xmlhttp实例，如果这时前一个通信未完成，那么就
Lightbox JS v2.0
文章浏览阅读998次。 by Lokesh Dhakar 译: croc查看原文概要：Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.最新更新 Version 2.0 图片集: 分组相关的图片并且能轻松的导航它们 视觉特效: 奇特的自适应调整 向后兼容: yes! 点击这里查看实例_on lightbox 2 by lokesh dhakar
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot