<![CDATA[Theosoft.Blog]]> http://blog.theosoft.net/ zh-cn PBlog2 v2.4 Theosoft.Blog http://blog.theosoft.net/images/logos.gif http://blog.theosoft.net/ Theosoft.Blog http://blog.theosoft.net/default.asp?id=94 <![CDATA[利用JQuery+Ajax实现aspx页面无刷新的动态数据绑定]]> info@theosoft.net(Johnson) Sun,19 Oct 2008 14:20:15 +0800 http://blog.theosoft.net/default.asp?id=94         好长的名字啊！自己看得都觉得累了……废话到此为止，开始正文：

     我们在写asp.net网页的时候，会用到很多需要数据绑定的控件。Asp.net提供了数据绑定这一特性，确实方便了很多。但是这样的绑定都是在服务器端完成的，而我们有时会希望根据用户的选择来动态的更新其它一些控件的数据内容。例如用两个DropDownList来让用户选择所在的城市，一个绑定“省”一级的数据，如“浙江”、“吉林”等，另一个绑定用户选择的“省”下面的城市。要实现这样一个动态的数据绑定其实不难，可以把前一个DropDownList的autopostback属性设成true，然后在事件里绑定后一个DropDownList的数据就可以了。这样虽然是可以实现动态数据绑定，但是用户每选一个选项，网页就不得不刷新一次，内容一多，就很浪费时间。那有没有不刷新页面但又能动态绑定数据的方法呢？当然有！方法就是用现在十分流行的Ajax技术。

     Ajax的应用十分广泛，这里仅仅介绍利用JQuery来实现异步数据更新的方法。jQuery 是一个JavaScript 库，它有助于简化 JavaScript™ 以及 Asynchronous JavaScript + XML (Ajax) 编程。在JQuery中有一个Ajax的调用方法：

$.ajax({

type: "POST",

url: window.location.protocol + "//" + window.location.host + “a.aspx”,

data: postdata,

complete: function(msg){

ShowResult(msg.responseText);

} ,

dataType : "html"

});

     这里的url是目标页面，通常我们会专门处理这些Ajax请求，单独写一个页面，这里假定为ajax.aspx。data是你要post给目标页面的数据，例如“do=getcity&province=100”。Complete里的那个function：ShowResult(msg.responseText);是用来处理Ajax的返回结果的，结果会以html的形式保存在参数msg.responseText里。

        了解了这个Ajax的调用方法，我们来说说到底怎样实现数据的动态绑定。还是以刚才说的“选择城市”作为例子。首先在你要显示的页面（例如Selectcity.aspx）有一个空的DropDownList（这个是用来选择“城市”的，不是那个选择“省份”的），在其外面包一个<div>标签，id为city。这个是假的，只是在那里占个位子，真正的数据并不会绑定到这个控件上。然后我们在Ajax页面ajax.aspx里也放一个一模一样的DropDownList。然后我们绑定选择“省份”的那个DropDownList的onchange事件（以下所说的事件，都是javascript事件，而非asp.net事件），让其调用我们的ajax方法。然后，ajax会把用户选择的“省份”放在postdata里（如“do=getcity&province=100”）传到Ajax.aspx页面，页面获得这个参数后，为ajax.aspx上的DropDownList绑定数据。结果以html的形式保存到msg.responseText里。

      接下来要怎么做也许你已经想到了，对了，我们要用的就是“狸猫换太子”的手段。前面调用ajax方法的时候，不是还有一个ShowResult的方法吗？那个方法在获得了我们ajax页面的返回结果。我们知道，DropDownList最终生成的<select>空间，所以我们把返回结果里从“<select>”到“</select>”之间的部分提取出来，替换到那个id=city的div的innerHTML里，覆盖原来占位的那个DropDownList。于是，我们的动态数据绑定就完成了。

        不知道你听明白了没有，下面给出文中提到的各个文件的源码，如果你没有看明白，就自己捉摸捉摸吧^_^

Ajax.js

function GetCity(provinceID)

{

    $.ajax({

              type: "POST",

              url: window.location.protocol + "//" + window.location.host + "/Ajax.aspx",

              data:   "do=GetCity&ProvinceID=" + provinceID,

              complete: function(msg){

                                ShowCity(msg.responseText);

                       } ,

              dataType : "html"

             });   

}

function ShowCity(strCode)

{

    var obj = document.getElementByid("City");

    var start = strCode.indexOf("<select");

    var end = strCode.indexOf("</select>") + 9;

    var strHtml = strCode.substring(start,end);

        

    if (obj!=null)

    {       

        obj.innerHTML = strHtml;                         

    }

}

Selectcity.aspx

<%@ Page language="c#" Codebehind="Selectcity.aspx.cs" AutoEventWireup="false" Inherits="Selectcity" %>

<html>

  <head>

                   <title>Selectcity</title>

    <script language="JavaScript" src="/Ajax.js" type="text/javascript"></script>

    <script language="JavaScript" src="/jQuery.js" type="text/javascript"></script>

  </head>

         <body topmargin="0" marginwidth="0" marginheight="0">

                   <form id="Form1" method="post" runat="server">

                            <asp:DropDownList ID="province" runat="server"></asp:DropDownList>

                            <div id="city">

                                     <asp:DropDownList ID="oldcity" runat="server"></asp:DropDownList>

                            </div>

                   </form>

         </body>

</html>

Selectcity.aspx.cs

这个就不给了，随便给那个ID= province的DropDownList绑定点数据即可。

ajax.aspx

<%@ Page language="c#" Codebehind="Ajax.aspx.cs" AutoEventWireup="false" Inherits="Selectcity" %>

<html>

  <head>

                   <title>Selectcity</title>

    <script language="JavaScript" src="/Ajax.js" type="text/javascript"></script>

    <script language="JavaScript" src="/jQuery.js" type="text/javascript"></script>

  </head>

         <body topmargin="0" marginwidth="0" marginheight="0">

                   <form id="Form1" method="post" runat="server">

                            <asp:DropDownList ID="city" runat="server"></asp:DropDownList>

                   </form>

         </body>

</html>

Ajax.aspx.cs（只列出关键代码，其它的省略）

protected void Page_Load(object sender, EventArgs e)

{

    string strAction = Request.Form["do"] + String.Empty;

    switch (strAction)

    {

        case "GetCity":

            GetCity();

            break;

    }

}

protected void GetCity()

{

    string strProvinceID = Request.Form["ProvinceID"] ?? String.Empty;

    if (!String.IsNullOrEmpty(strProvinceID))

    {

        List<City> CityList = /*你要绑定的数据*/;

        this.City.DataTextField = "CityName";    //这里的city就是前面aspx的DropDownList

        this.City.DataValueField = "CityID";

        this.City.DataSource = CityList;

        this.City.DataBind();

    }

}

]]> http://blog.theosoft.net/default.asp?id=93 <![CDATA[在Web service和.Net服务页面中简单得对调用者进行跟踪]]> info@theosoft.net(Johnson) Tue,02 Sep 2008 14:59:04 +0800 http://blog.theosoft.net/default.asp?id=93 Web Service是微软在.Net Framework里提供的一个十分方便的机制。它允许你将一些实用的，需要被多人分享或者不方便在本地运行的一些功能发布到网站上，像dll一样随时在需要的时候加以调用。还有一些简单的服务页面，诸如本站的天气预报页面和IP查询页面。分别以图片形式输出当地的天气情况和以Javascript的形式输出一段返回IP地址查询结果的脚本。这样的页面功能简单、单一，可以像普通的图片（<img>）或脚本（<script>）的方式调用。但有时候，无论是出于日志记录、权限校验、性能分析或者别的什么应用的需要，你可能希望知道到底是哪些人调用了自己的这些服务。那么到底应该怎样记录下这些来访者呢？

        对于Web Service来说，虽然不能直接获得Request对象，但是还是可以通过Context.Request来得到。不过，如果你仅仅通过Context.Request.UserHostAddress来获得IP的话，你会发现所有的IP其实都是服务器自己的IP。这可不是因为那些请求都是你自己调用的，而是因为所有的请求其实都是通过服务器的代理来实现的，所以这些IP当然都是服务器自己。想要获得真正的调用者，就要透过代理服务器：

 if (Context.Request.ServerVariables["HTTP_VIA"] != null)

 {

     ip = Context.Request.ServerVariables["HTTP_X_FORWARDED_FOR"].ToString();

 }

 这样得道的就是真正调用你的Web Service的那些远程方法的“幕后黑手”。

        而对于那些可以在<img>、<script>这样的标签里直接引用的功能型页面来说，所有的调用都来自客户端的直接访问，通过Request.UserHostAddress只能得到客户端的IP，那么又该如何找到那个“幕后黑手”呢？这时候就需要Request.UrlReferrer对象来帮忙了。UrlReferrer通常是在超链接的页面里获得“来源”的父页面的，不过这里也同样可以用来获得引用这些<img>、<script>标签的页面。而且UrlReferrer获得的是URL，这可要比只知道对方的IP强多了。不过，值得注意的是，因为UrlReferrer在客户端的请求中是可以任意伪造的，所以如果想用这个作为权限审核的条件的话会很不安全哦！

 

 

 

 

 

 

 

]]> http://blog.theosoft.net/default.asp?id=92 <![CDATA[发布集成“IP地址查询”和“天气预报”的WebService项目，Beta1]]> info@theosoft.net(Johnson) Sat,23 Aug 2008 13:28:04 +0800 http://blog.theosoft.net/default.asp?id=92         今天很高兴得对外发布了我新的基于Asp .Net 的WebService项目：TheoService（嗯，暂时就取这个名字吧）。有了这个WebService项目，今后就可以更好得分享本站上诸如IP地址查询、天气预报这样比较实用的功能，同时也让我自己的这些零零碎碎的小项目有了一个统一的调用接口，也方便了今后的管理。

        好了，废话就先说到这里，还是先来公布这个WebService的地址吧。该项目的地址是http://www.theosoft.net/webservice/theoservice.asmx。点击这个地址，可以看到该项目暂时对外提供5个函数接口。

点击右边的 Service Description 可以查看该WebService的WSDL文档描述。点击这些函数名，你也可以查看这些函数详细的参数定义。我先在这里做个简单的介绍吧。

GetAddress ：string GetAddress(string myip);

                           输入参数为IPv4地址，返回值为该IP所属的地区

GetWeatherByCity ：Weather GetWeatherByCity(string CityName);

                           输入参数为城市名，返回值为Service所定义的Weather类型，包含天气的所有信息

GetWeatherByIP：Weather GetWeatherByIP(string MyIP);

                           输入参数为IPv4地址，返回值为该IP所属的地区(城市)的天气

GetWeatherImgByCity ：byte[] GetWeatherImgByCity(string CityName, string backColor)

                           输入参数为城市名和图片背景色，返回值为byte[] 类型的图片数据流

GetWeatherImgByIP：byte[] GetWeatherImgByIP(string MyIP, string backColor);

                           输入参数为IPv4地址和图片背景色，返回值为byte[] 类型的图片数据流

注：图片背景色是html里用的6位的RGB编码，详见示例

        好了，函数就先介绍到这里，下面举个使用该WebService的简单的范例。

就以本站的天气预报功能来说吧。大家肯定都注意到了本站右上角会以一张图片的形式显示您所在地区的天气情况。就是这个。这个天气预报会根据访问者的IP自动识别出其所在的城市，并给出该城市的气象数据。那么究竟该怎样实现这一功能呢？答案其实很简单。首先当然是要在你的网站里添加我的这个WebService的引用。

右键点击你的项目，选择“添加Web引用”

然后在"URL"里填上WebService的地址，再启个合适的引用名（这里假定Theosoft.Service）

点击"添加引用"后，就完成了。然后，再简单的写一段代码，获得用户的IP地址，并将网页以图片形式输出，这个功能就完成了。

using System;
using Theosoft.Service;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        TheoService TS = new TheoService();
        string bgColor = "#" + Request.QueryString["color"];
        string myip = Request.UserHostAddress;
        byte[] bmp = TS.GetWeatherImgByIP(myip, bgColor);
        Response.ClearContent();
        Response.ContentType = "image/png";
        Response.BinaryWrite(bmp);
    }
}
]]> http://blog.theosoft.net/default.asp?id=91 <![CDATA[贴两个有意思的Javascript]]> info@theosoft.net(Johnson) Sun,20 Jul 2008 22:41:40 +0800 http://blog.theosoft.net/default.asp?id=91         前两天在cb上看到的，觉得就这两个最有意思，所以贴在这里。

        第一个：javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);

其作用是让网页代码里的“img”标识符（即图片）做无敌风火轮运动。呵呵，蛮好玩的，实用性不大。

        下一个实用性比较大：javascript:document.body.contentEditable='true'; document.designMode='on'; void 0;

起作用是使当前页面进入“编辑模式”，你可以在浏览器里随意修改网页的内容！！！具体能派啥用场，不用我说了吧

]]> http://blog.theosoft.net/default.asp?id=90 <![CDATA[新的PJBlog防止垃圾评论的方法]]> info@theosoft.net(Johnson) Thu,26 Jun 2008 17:49:41 +0800 http://blog.theosoft.net/default.asp?id=90         记得曾经发表过一篇关于如何防治PJBlog垃圾评论的文章，用了哪个方法之后，我的Blog的确清静了好一段时间。但是最近一段时间Blog上又出现不少垃圾评论，针对这种情况，暂时采用如下措施，也不知道能应付的过去，呵呵！

修改：class/cls_article.asp文件

<input name="validate" type="text" size="4" class="userpass" maxlength="4"/>
 
改为
 
<input name="validate" type="text" size="12" class="userpass" maxlength="12"  value="请输入验证码" onmouseover="this.focus()" onblur="if (this.value =='')this.value='请输入验证码'" onfocus="this.select()" onclick="if (this.value=='请输入验证码') this.value=''"/>
 
这样，默认的“验证码”不再为空，希望可以借此解决这个问题。
]]> http://blog.theosoft.net/default.asp?id=89 <![CDATA[在Ubuntu下共享打印机]]> info@theosoft.net(Johnson) Fri,30 May 2008 21:26:30 +0800 http://blog.theosoft.net/default.asp?id=89         共享打印机？呵呵，这个在Windows下，因该人人都会吧！但是到了Ubuntu下，又该怎么做呢？我家里有一台台式机，接了家里唯一的一台打印机。可是平时我都是用的自己的笔记本，想要打印点什么的时候，就不得不先把东西拷到台式机上再打印，或者把打印机的接口拔下来，插到笔记本上，总之很不方便。共享打印机吧，总部能为了不知何时才能想到要打印的那几页纸而整天让我的台式机待机吧，这家伙功耗可不小阿。今天突然灵机一动：何不将家里那台破笔记本来充当中转站呢？不过这台破笔记本实在太破，连windows都装不上，只能靠着Ubuntu勉强还能跑跑，因为笔记本省电，所以常用它来下下bt、挂挂机什么的。所以决定用它来共享打印机。

        好了，还是来看看具体怎么做吧。Ubuntu自身并没有打印机共享功能，所以需要安装额外的软件。在命令行里输入sudo apt-get install cupsys，或者直接在新立得里面装也不错。

        安装很简单，装完以后在浏览器里输入http://127.0.0.1:631/printers，就能打开管理页面了。

        记得先start printer哦，然后就可以到windows下，把刚才地址里的127.0.0.1替换成ubuntu电脑的ip，就可以进行管理了。然后在页面中选取打印机，这样我们就可以得到打印机的地址(地址栏里的地址就是)。

        最后，在windows里面点击添加打印机，将地址填入即可。

]]> http://blog.theosoft.net/default.asp?id=88 <![CDATA["天气预报"组件,Beta3版发布！]]> info@theosoft.net(Johnson) Thu,01 May 2008 14:29:27 +0800 http://blog.theosoft.net/default.asp?id=88         这次对之前的版本做了些小小的更新，主要是支持输出图片背景颜色的自定义。现在天气预报组件的引用地址为http://www.theosoft.net/weather/，后面可以通过附加参数color来指定输出图片的背景颜色。

        例如，引用http://www.theosoft.net/weather/?color=f7a64d, 则可以获得这样的效果：。

６个数字分别为１６进制的ＲＧＢ分量，尚不支持ＲＥＤ这样的字符型颜色。若输入的颜色不合法，将采用本站默认的颜色FAF7EF，即：。

如果需要白色背景，可以引用http://www.theosoft.net/weather/?color=ffffff,效果如下：

        下一个版本将有可能支持输出图片大小的自定义，如果你有其它更好的点子，欢迎和我交流

]]> http://blog.theosoft.net/default.asp?id=87 <![CDATA[破解补丁——Proxifier]]> info@theosoft.net(Johnson) Fri,28 Mar 2008 22:04:56 +0800 http://blog.theosoft.net/default.asp?id=87        发一个今晚刚刚破解的软件——Proxifier的补丁，是一个全局上网代理，用手机上网的人应该都了解这个软件，特别适合那些不能设置代理，但又需要通过代理来上网的软件。很有用，于是破解以后就立马发上来啦

点击下载此文件

]]> http://blog.theosoft.net/default.asp?id=86 <![CDATA[农历显示全面支持Firefox!]]> info@theosoft.net(Johnson) Fri,21 Mar 2008 22:45:21 +0800 http://blog.theosoft.net/default.asp?id=86 ]]> http://blog.theosoft.net/default.asp?id=85 <![CDATA[发布"天气预报"组件,Beta2!]]> info@theosoft.net(Johnson) Fri,21 Mar 2008 22:39:06 +0800 http://blog.theosoft.net/default.asp?id=85 　　经过了将近2个月的改进（其实主要是因为最近开始实习了，没时间阿），“天气预报”组件终于发布了Beta2版本。

　　这次主要的改进当然还是在支持的城市上。新发布的Beta2版本已经支持全国多达200+的城市和地区，基本涵盖了全国各个地区哦。另一大改进在于其变现形式。本来是输出一个页面，然后用frame来引用，这就使得其使用的便捷性大大的降低了。新的版本现在直接将天气输出委一张图片，这样大家就可以随意的像引用一张图片一样来引用这项功能了，是不是很方便呢

　　最后来讲讲目前这些功能的实现原理。首先当然是要获得客户端的ip地址，然后呢，就是将这个ip地址发送到cz88.net去查询这个ip的所在地。返回的结果中，除了直辖市和特别行政区外，都由省份和城市两部分组成。利用这两个信息，可以很快地检索到你所在城市的地区编码，然后用这个编码去中央气象局检索天气信息。最后将的得到的天气信息以图片的方式输出即可。呵呵，是不是说得有点乱？语言表达能力有限，大家不要见怪阿！

　　大家以后如果需要引用这个功能的话，可以直接以图片的方式引用http://www.theosoft.net/weather/这个地址就好了。

举例来说，在你的网页上添加如下代码：<img src="http://www.theosoft.net/weather/" />就好了

效果如下：

]]>