本文将介绍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的静态网页代码:

 <!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>
<title>首页</title>
<style type="text/css">
body
{
width: 1000px;
}
table
{
width: 300px;
text-align: center;
}
table th
{
text-align: center;
}
button
{
background-color: Transparent;
}
</style> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script>
function select(obj){
var $btn=$(obj);
$("#col1").val($btn.parent().prev().prev().html());
$("#col2").val($btn.parent().prev().html());
}
</script> </head>
<body>
$header
<table class="table table-hover" border="1" cellpadding="0px" cellspacing="0px">
<tr>
<th>
col1
</th>
<th>
col2
</th>
<th>
col3
</th>
</tr>
$content
</table>
<br />
<input id="col1" type="text" />
<input id="col2" type="text" />
$footer
</body>
</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:

 <h2>
Title
</h2>

footer.htm:

 <hr />
CopyRight &copy; XXX

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

3、最后是Index.ashx:

 using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.IO; namespace AshxTest
{
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Index : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
//定义最终响应的文本内容的显示方式,这里使用html,所以是"text/html"
context.Response.ContentType = "text/html"; //分别把Index.htm,header.htm,footer.htm中的文本内容赋值给3个string变量,是完整的文本内容
//AppDomain.CurrentDomain.BaseDirectory则是指项目的根目录,由于本例的网页都放在根目录下,没有文件夹
string html = File.ReadAllText(AppDomain.CurrentDomain.BaseDirectory + "Index.htm");
string header = File.ReadAllText(AppDomain.CurrentDomain.BaseDirectory + "header.htm");
string footer = File.ReadAllText(AppDomain.CurrentDomain.BaseDirectory + "footer.htm"); //定义table主体内容的string变量为content
string content = "";
//简单的for循环10次,把i与abc组合,填入到table的tr td标签中
for (int i = 1; i <; i++)
{
content += string.Format("<tr><td>{0}</td><td>{1}</td><td><button value='select' onclick='select(this);'>选择</button></td></tr>", "a" + i, "b" + i);
} //以Index.htm的文本内容为基础,根据标记$header,$content,$footer分别替换上面的3个变量
html = html.Replace("$header", header).Replace("$content", content).Replace("$footer", footer); //最终得到的html是完整的html前端代码,通过context.Response.Write输出到浏览器中
context.Response.Write(html);
} public bool IsReusable
{
get
{
return false;
}
}
}
}

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

调试Index.htm:

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

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

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

结语:

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

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

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

  1. Visual Studio 2013 添加一般应用程序(.ashx)文件到SharePoint项目

    默认,在用vs2013开发SharePoint项目时,vs没有提供一般应用程序(.ashx)的项目模板,本文解决此问题. 以管理员身份启动vs2013,创建一个"SharePoint 201 ...

  2. Dynamics CRM 之ADFS 使用 WID 的独立联合服务器

    ADFS 的使用 WID 的独立联合服务器适用于自己的测试环境,常用的就是在虚机中使用. 拓扑图如下: wID:联合身份验证服务配置为使用 Windows 内部数据库

  3. Dynamics CRM 之ADFS 使用 WID 的联合服务器场

    使用 WID 的联合服务器场 默认拓扑 Active Directory 联合身份验证服务 (AD FS) 是联合服务器场,使用 Windows 内部数据库 (WID). 在这种拓扑, AD FS 使 ...

  4. ashx中Response.ContentType的常用类型

    ashx中Response.ContentType的常用类型: text/plaintext/htmltext/xmlapplication/jsonimage/GIFapplication/x-cd ...

  5. Hibernate(5)—— 联合主键 、一对一关联关系映射(xml和注解) 和 领域驱动设计

    俗话说,自己写的代码,6个月后也是别人的代码……复习!复习!复习!涉及的知识点总结如下: One to One 映射关系 一对一单向外键(XML/Annotation) 一对一双向外键关联(XML/A ...

  6. Federated Identity Pattern 联合身份模式

    Delegate authentication to an external identity provider. This pattern can simplify development, min ...

  7. 一种开发模式:ajax + ashx + UserControl

    一.ajax+ashx模式的缺点     在web开发过程中,为了提高网站的用户体验,或多或少都会用到ajax技术,甚至有的网站全部采用ajax来实现,大量使用ajax在增强用户体验的同时会带来一些负 ...

  8. [占位-未完成]scikit-learn一般实例之十一:异构数据源的特征联合

    [占位-未完成]scikit-learn一般实例之十一:异构数据源的特征联合 Datasets can often contain components of that require differe ...

  9. SQL联合查询:子表任一记录与主表联合查询

    今天有网友群里提了这样一个关于SQL联合查询的需求: 一.有热心网友的方案: 二.我的方案: select * from ( select a.*,(select top 1 Id from B as ...

随机推荐

  1. Solr总结

    http://www.cnblogs.com/guozk/p/3498831.html Solr调研总结 开发类型 全文检索相关开发 Solr版本 4.2 文件内容 本文介绍solr的功能使用及相关注 ...

  2. mysql视图的作用(详细)

    测试表:user有id,name,age,sex字段 测试表:goods有id,name,price字段 测试表:ug有id,userid,goodsid字段 视图的作用实在是太强大了,以下是我体验过 ...

  3. Jvm工作原理学习笔记(转)

    一.         JVM的生命周期 1.       JVM实例对应了一个独立运行的java程序它是进程级别 a)     启动.启动一个Java程序时,一个JVM实例就产生了,任何一个拥有pub ...

  4. 经典的单例模式c3p0来控制数据库连接池

    package com.c3p0.datapools; //数据库连接池  单例模式 import java.sql.Connection; import java.sql.SQLException; ...

  5. Monkey ‘mk_request_header_process’函数输入验证漏洞

    漏洞名称: Monkey ‘mk_request_header_process’函数输入验证漏洞 CNNVD编号: CNNVD-201308-003 发布时间: 2013-08-22 更新时间: 20 ...

  6. 【转】VMware 11安装Mac OS X 10.10 及安装Mac Vmware Tools.

    原文网址:http://www.cnblogs.com/Anand/p/4483727.html 先上一张效果图兴奋一下,博主穷屌丝一个,只能通过虚拟黑苹果体验下高富帅的生活,感觉超爽的,废话不多说的 ...

  7. Android Studio下载及离线升级方法

    由于众所周知的原因,android官网无法访问,所以我们要用到翻.墙.工具,我用的是自.由.门,大家自行搜索下载. android studio下载地址: https://dl.google.com/ ...

  8. zabbix 飞信集成配置

    1.环境说明: (Gentoo Linux环境) # uname -a Linux Crob 2.6.34-gentoo #1 SMP Mon May 31 15:45:25 CST 2010 x86 ...

  9. MongoDB简单操作

    Hadoop核心技术厂商Cloudera将在2014/06推出hadoop Ecosystem与MongoDB的整合产品,届时MongoDB与ipmala及hbase,hive一起用; 开源linux ...

  10. 宁波Uber优步司机奖励政策(1月25日~1月31日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...