C# ashx与html的联合使用

本文将介绍ashx和html的联合使用方法,尽管目前流行mvc,但handler一般处理程序还是ASP.NET的基础知识,结合html页面,做出来的网页绝对比WebForm的简洁和效率高。

首先,概要说明一下:

html是过去非常老的一种网页格式,属于静态网页,要想在html上呈现SQL Server上的数据,只能依靠ashx了。

大概的方法是,利用html作为模板,使用ashx读取数据库,替换html中的部分内容,最终显示已替换的html内容。

先给个效果图:

下面开始上代码:

首先做用visual studio,新建一个项目,项目下再新建有footer.htm,header.htm,Index.ashx,Index.htm

另外我已做了一个简单的选取表格信息,显示在input标签中的功能,所以我也用到了jquery.min.js

(屏蔽部分请忽略,是我做的另一个静态页面,与本例无关)

1、首先看的是Index.htm的静态网页代码:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>首页</title>
 5     <style type="text/css">
 6         body
 7         {
 8             width: 1000px;
 9         }
10         table
11         {
12             width: 300px;
13             text-align: center;
14         }
15         table th
16         {
17             text-align: center;
18         }
19         button
20         {
21             background-color: Transparent;
22         }
23     </style>
24
25     <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
26
27     <script>
28     function select(obj){
29         var $btn=$(obj);
30         $("#col1").val($btn.parent().prev().prev().html());
31         $("#col2").val($btn.parent().prev().html());
32     }
33     </script>
34
35 </head>
36 <body>
37     $header
38     <table class="table table-hover" border="1" cellpadding="0px" cellspacing="0px">
39         <tr>
40             <th>
41                 col1
42             </th>
43             <th>
44                 col2
45             </th>
46             <th>
47                 col3
48             </th>
49         </tr>
50         $content
51     </table>
52     <br />
53     <input id="col1" type="text" />
54     <input id="col2" type="text" />
55     $footer
56 </body>
57 </html>

上图中,第5行至23行<style>是简单样式,

第27行至33行<script>是javascript代码,用于把table中选中的内容填入到input中,
第37行$header和第55行$footer是页头和页尾的标记,后续会使用另外2个html网页替换之,

中间的table创建了3个列头,分别是col1,col2,col3,$content是table的主体部分,后续会在Index.ashx中替换之。

2、接着是header.htm:

1 <h2>
2     Title
3 </h2>

footer.htm:

1 <hr />
2 CopyRight &copy; XXX

非常的简单,就是标题和版权信息。

3、最后是Index.ashx:

 1 using System;
 2 using System.Collections;
 3 using System.Data;
 4 using System.Linq;
 5 using System.Web;
 6 using System.Web.Services;
 7 using System.Web.Services.Protocols;
 8 using System.Xml.Linq;
 9 using System.IO;
10
11 namespace AshxTest
12 {
13     /// <summary>
14     /// $codebehindclassname$ 的摘要说明
15     /// </summary>
16     [WebService(Namespace = "http://tempuri.org/")]
17     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
18     public class Index : IHttpHandler
19     {
20
21         public void ProcessRequest(HttpContext context)
22         {
23             //定义最终响应的文本内容的显示方式,这里使用html,所以是"text/html"
24             context.Response.ContentType = "text/html";
25
26             //分别把Index.htm,header.htm,footer.htm中的文本内容赋值给3个string变量,是完整的文本内容
27             //AppDomain.CurrentDomain.BaseDirectory则是指项目的根目录,由于本例的网页都放在根目录下,没有文件夹
28             string html = File.ReadAllText(AppDomain.CurrentDomain.BaseDirectory + "Index.htm");
29             string header = File.ReadAllText(AppDomain.CurrentDomain.BaseDirectory + "header.htm");
30             string footer = File.ReadAllText(AppDomain.CurrentDomain.BaseDirectory + "footer.htm");
31
32             //定义table主体内容的string变量为content
33             string content = "";
34             //简单的for循环10次,把i与abc组合,填入到table的tr td标签中
35             for (int i = 1; i < 10; i++)
36             {
37                 content += string.Format("<tr><td>{0}</td><td>{1}</td><td><button value=‘select‘ onclick=‘select(this);‘>选择</button></td></tr>", "a" + i, "b" + i);
38             }
39
40             //以Index.htm的文本内容为基础,根据标记$header,$content,$footer分别替换上面的3个变量
41             html = html.Replace("$header", header).Replace("$content", content).Replace("$footer", footer);
42
43             //最终得到的html是完整的html前端代码,通过context.Response.Write输出到浏览器中
44             context.Response.Write(html);
45         }
46
47         public bool IsReusable
48         {
49             get
50             {
51                 return false;
52             }
53         }
54     }
55 }

注释都已经加上了,下面看一下运行的效果。

调试Index.htm:

打开后,只有模板的内容:

此时,修改地址栏的后缀名,改为Index.ashx,就会显示本文开篇时的效果图了。

(图中点击了a8、b8行末端的“选择”按钮,在下方的input标签中显示"a8"和"b8")

结语:

这种制作网页的方法是最原生态的,是编程人员必须掌握的。

本文只是介绍一个简单的案例,实际上,在ashx中,可以编写平常我们写的C#代码(包括SQL的操作),在html中也能编写javascript,也能使用css样式,结合form提交和页面的跳转,可以完成大部分的网页功能,本人还没有学会mvc,所以只能介绍这种方法了,欢迎各位交流。

时间: 2024-11-29 01:32:45

C# ashx与html的联合使用的相关文章

Bootstrap + AngularJS+ Ashx + SQL Server/MySQL

去年年底12月,为适应移动端浏览需求,花了1个月时间学习Bootstrap,并将公司ASP网站重构成ASP.NET. 当时采取的网站架构: Bootstrap + jQuery + Ashx + SQL Server 时间紧,没人带,只能硬着头皮,最后如期完成,但是也遗留了几个问题. 问题: 1.页面查询条件太复杂,太多的checkbox,jQuery操作DOM虽然方便,但是组合成json提交给后端还是比较麻烦,有没有天然支持json的前端框架或者脚本语言? html控件做的任何修改,都自动保存

Intel DCM 携手DELL共同推出关于DCIM的联合调研

杰夫克劳斯 英特尔数据中心解决方案总经理 最近由英特尔数据中心管理解决方案DCM和戴尔共同进行的一项调查显示,几乎有一半的IT管理人员并不完全了解他们的数据中心正在发生的变化.数据中心基础设施管理(DCIM)解决方案是了解数据中心如何高效运行的关键,但仅有53%的IT管理者正在使用这种方法.DCIM解决方案可以提供数据中心内部关于热量和能耗使用情况的重要信息,并可以利用这些信息提供可行方案进一步节省数据中心的运营成本. 下面的资讯图表对本次联合调查进行了概括,阐述了与DCIM相关的最佳实践,包括

bootstrap table 服务器端分页--ashx+ajax

1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <meta charset="utf-8" /> 7 <link rel="

[NOIP2014]联合权值

描述 无向连通图G有n个点,n-1条边.点从1到n依次编号,编号为i的点的权值为Wi  ,每条边的长度均为1.图上两点(u, v)的距离定义为u点到v点的最短距离.对于图G上的点对(u, v),若它们的距离为2,则它们之间会产生Wu×Wv的联合权值. 请问图G上所有可产生联合权值的有序点对中,联合权值最大的是多少?所有联合权值之和是多少? 输入格式 输入文件名为link.in. 第一行包含1个整数n. 接下来n-1行,每行包含2个用空格隔开的正整数u.v,表示编号为u和编号为v的点之间有边相连.

asp、asp.net、.aspx、.ascx、.ashx的简单说明

ASP是动态服务器页面(Active Server Page)的英文缩写.[1]是微软公司开发的代替CGI脚本程序的一种应用,它可以与数据库和其它程序进行交互,是一种简单.方便的编程工具.ASP的网页文件的格式是.asp.现在常用于各种动态网站中. ASP.NET是由微软在·NETFramework框架中所提供,开发Web应用程序的类库,封装在System.Web.dll文件中,显露出System.Web命名空间,并提供ASP.NET网页处理.扩充以及HTTP通道的应用程序与通信处理等工作,以及

结合mysql查询优化器对联合索引的探讨

无陈述,直接开讲: babysitter_account表中的联合索引如下(开发小伙伴们自建的联合索引.您发现不妥了吗?): KEY `flag` (`flag`,`user_id`,`account_id`) 过去认为: 1.SELECT account_id,weibo_id,weibo_type FROM babysitter_account WHERE user_id BETWEEN 100 and 10000 AND flag=0; 2.SELECT account_id,weibo_

Jquery调用从ashx文件返回的jsonp格式的数据处理实例

开发环境:vs2010+jquery-1.4.min.js 解决问题:网上代码比较少,好多调试不通,返回数据不用json而用jsonp主要考虑解决跨域问题 开发步骤:打开VS2010,新建一web站点,保存位置选择D:\Website1;添加新项,选择一般处理程序,命名cmdHandler.ashx;添加新项,选择HTML页,命名为testAshx.htm;网上下载jquery-1.4.min.js拷贝到web站点中 项目相关网站源码和运行截图如下: 1.testAshx.htm代码如下: <!

融云联合ofo给大家送福利!

亲爱的老铁们,融云联合ofo给大家送福利了.即时起至9月15日,只要关注融云微信服务号"融云即时通讯云",即可免费领取两张ofo畅骑月卡(60天). 大家会在融云服务号里看到:技术干货.产品动态.案例分析.行业资讯.融云新闻等内容:服务号还会不定期为开发者们发放优惠券,开展线上活动,福利多多,欢迎关注.

数据库之联合查询和连接查询

http://blog.csdn.net/memgxingfeixiang/article/details/52765208 1.JOIN和UNION区别join 是两张表做交连后里面条件相同的部分记录产生一个记录集,union是产生的两个记录集(字段要一样的)并在一起,成为一个新的记录集. JOIN用于按照ON条件联接两个表,主要有四种:INNER JOIN:内部联接两个表中的记录,仅当至少有一个同属于两表的行符合联接条件时,内联接才返回行.我理解的是只要记录不符合ON条件,就不会显示在结果集