WEB开发网
开发学院WEB开发ASP.NET asp.net利用Google接口实现拼写检查 阅读

asp.net利用Google接口实现拼写检查

 2010-04-11 17:46:41 来源:WEB开发网   
核心提示:关键词:拼写检查,SpellCheck,英语拼写检查在开发一个国外外包项目时,客户提出一个需求,asp.net利用Google接口实现拼写检查,就是希望在文本框中输入单词,在保存前能够进行拼写检查,该控件只免费供个人学习研究之用,如果用于商业用途,如果发现单词错误,可以提醒用户进行改正
关键词:拼写检查,SpellCheck,英语拼写检查
在开发一个国外外包项目时,客户提出一个需求,就是希望在文本框中输入单词,在保存前能够进行拼写检查,如果发现单词错误,可以提醒用户进行改正,为此,在结合参考了各种方案之后,选择了一个免费的方案,Google的一个API接口,https://www.google.com/tbPRoxy/spell?lang=,该接口提供多种语言的拼写检查,并能够返回相似的单词,并且幸运的是,在网上找到了一个开源的程序包googiespell,所以经过简单的包装处理,做成了一个拼写检查的小控件,使用起来就很方便了。
实现原理
在.net的页面上,在submit按钮提交之前,将页面的文本框内容,通过Ajax的方式,采用代理类的方式,发送给Google的接口,接口会返回拼写结果,如果没有拼写错误,浏览器端就直接执行提交操作,如果有错误,弹出一个Spell Check Error的对话框,提示用户进行修改,点“yes”返回页面修改,点“No”的话就忽略掉拼写错误,直接提交。
代码分享
用户控件Shouji138.com.SpellValid.ascx
这个文件封装了错误提示的输入框效果,还有提交按钮的一些操作代码。
<%@ Control Language="C#" AutoEventWireup="true" Codebehind="Shouji138.com.SpellValid.ascx.cs"
   Inherits="SpellCheck.Shouji138_com_SpellValid" %>
<script type="text/javascript">
   var googie5 = new GoogieSpellMultiple("/googiespell/", "/googiespell/sendSpellReq.aspx?lang=");
   //New menu item "Add"
   var add_checker = function(elm) {
     return true;
   };
   var add_item = function(elm, current_googie) {
     googie5.ignoreAll(elm);
   };
   //googie5.appendNewMenuItem("Add", add_item, add_checker);
   var fn_no_more_errors = function(e) {
    //  alert('no more errros');
     passcheck = true;
   }
   googie5.setDependent();
   googie5.setCustomAjaxError(function(req) {
    // alert('error');
   });
   googie5.useCloseButtons();
   googie5.noMoreErrorsCallback(fn_no_more_errors);
   googie5.setSpellContainer("global_spell_container");
   // googie5.decorateTextareas(textbox, "hel", "t");
   //Getstatespan2();
   var passcheck = false;
   var savebutton = null;
   var waiti = 0;
   function CheckSpell(obj) {
     if (typeof (Page_ClientValidate) == 'function') {
       if (Page_ClientValidate() == false) {
         return false;
       }
     }
     savebutton = obj;
     if (googie5.noErrorsFound() || passcheck) {
      // alert("CheckSpell ok");
       return true;
     }
     //alert(document.getElementById("global_spell_container").innerHTML);
     if (document.getElementById("okclickspan"))
       invokeClick(document.getElementById("okclickspan"))
     setTimeout("WaitSavetate()", 1000);
     return false;
   }
   function ToDoNext() {
 
  
     if (savebutton.href) {
       var href = savebutton.href.replace("Javascript:", "");
       href = unescape(href);
       //alert(href);
       eval(href);
     }
     else
     {
     __doPostBack(savebutton.id,"");
     return true;
     }
   }
   function WaitSavetate() {
     if (waiti > 100) {
       waiti = 0;
       return;
     }
     waiti++;
     //document.getElementById("statespan").innerHTML = "waiting:" + waiti + " " + googie5.noErrorsFound();
     if (passcheck || googie5.noErrorsFound()) {
       //alert("pass");
       //invokeClick(savebutton);     
         ToDoNext();
     
      // __doPostBack(savebutton.id, '');
     }
     else {
       if (googie5.getState() == "checking_spell") {
         setTimeout("WaitSavetate()", 500);
       }
       else {
         showdivspellcheckerror();
       }
     }
   }
   function getText1value() {
     alert(document.getElementById(textbox).value);
   }
   function invokeClick(element) {
     if (element.click) element.click();
     else if (element.fireEvent) element.fireEvent('onclick');
     else if (document.createEvent) {
       var evt = document.createEvent("MouseEvents");
       evt.initEvent("click", true, true);
       element.dispatchEvent(evt);
     }
   }
</script>
asp.net源码:http://code.cncms.com/down.asp?typeid=2
<script type="text/javascript">
   function closedivspellcheckerror() {
     document.getElementById("divspellcheckerror").style.display = "none";
   }
   function showdivspellcheckerror() {
     var alertFram = document.getElementById("divspellcheckerror");
     alertFram.style.position = "absolute";
     alertFram.style.left = "50%";
     alertFram.style.top = "50%";
     alertFram.style.marginLeft = "-125px";
     alertFram.style.marginTop = -75 + document.documentElement.scrollTop + "px";
     //alertFram.style.width = "450px";
     //alertFram.style.height = "150px";
     //alertFram.style.background = "#ccc";
     alertFram.style.textAlign = "center";
     //alertFram.style.lineHeight = "150px";
     alertFram.style.zIndex = "10001";
     document.getElementById("divspellcheckerror").style.display = "";
   }
</script>
<div class="shouji138errorbox" id="divspellcheckerror" style="display: none; width: 400px">
   <div id="SccNotify" class="yui-module yui-overlay yui-panel" style="visibility: inherit;">
     <div class="shouji138_notice-error">
       Spelling Error</div>
     <div class="shouji138_notice-body">
       Spelling errors detected.<br />
       Do you wish to correct them?
       <br />
       Click Yes to return,click No to continue submit.<br />
     </div>
     <div class="shouji138_notice_foot">
       <a href="javascript:;" >
         <img src="http://www.cncms.com/googiespell/btn_yes.gif" style="border: 0px;" alt="yes" /></a>  <a
           href="javascript:ToDoNext();"><img src="http://www.cncms.com/googiespell/btn_no.gif" style="border: 0px;"
             alt="no" /></a>
     </div>
   </div>
</div>
代理类:sendSpellReq.aspx.cs
asp.net教程:http://www.cncms.com/aspnet.asp
这个类的作用就是发送请求到Google的接口:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Net;
using System.IO;
using System.Text;
namespace SpellCheck.googiespell
{
   public partial class sendSpellReq : System.Web.UI.Page
   {
     protected void Page_Load(object sender, EventArgs e)
     {
       Response.Buffer = true;
       Response.Expires = -1;
       Response.Charset = "utf-8";
       Response.ContentType = "text/html";
   //手机主题  http://www.shouji138.com
       string url = "https://www.google.com/tbproxy/spell?lang=" + Request.QueryString["lang"];
       Stream InputStream = Request.InputStream;
       StreamReader inputreader = new StreamReader(InputStream, Encoding.UTF8);
       string arcxml = inputreader.ReadToEnd();
       //Log.SaveNote(arcxml);
       HttpWebRequest myRequest = (HttpWebRequest)WebRequest.Create(url);
       myRequest.Method = "POST";
       byte[] postBytes = Encoding.UTF8.GetBytes(arcxml);
       myRequest.ContentType = "application/x-www-form-urlencoded";
       myRequest.ContentLength = arcxml.Length;
       // 发送数据
       using (Stream reqStream = myRequest.GetRequestStream())
       {
         reqStream.Write(postBytes, 0, postBytes.Length);
       }
       HttpWebResponse HttpWResp = (HttpWebResponse)myRequest.GetResponse();
       StreamReader reader = new StreamReader(HttpWResp.GetResponseStream(), Encoding.UTF8);
       string result = reader.ReadToEnd();
       reader.Close();
       HttpWResp.Close();
       //  Log.SaveNote(result);
       Response.Write(result);
       Response.End();
     }
   }
}
使用方法
1. 在需要使用拼写检查的地方,把Shouji138.com.SpellValid.ascx控件拖进去,然后在头部加上js代码和CSS代码,如下:
<script type="text/javascript" src="/googiespell/AJS.js"></script>
<script type="text/javascript" src="/googiespell/googiespell.js"></script>
<script type="text/javascript" src="/googiespell/googiespell_multiple.js"></script>
<script type="text/javascript" src="/googiespell/cookiesupport.js"></script>
<link href="/googiespell/googiespell.css" rel="stylesheet" type="text/css" media="all" />
2. 在页面合适的地方加入一个拼写检查的容器DIV
<div id="global_spell_container" class="globalcontainer"></div>
3. 在页面的底部,引入控件
<uc1:Shouji138_com_SpellValid ID="tc1" runat="server"></uc1:Shouji138_com_SpellValid>
4.最后,把需要进行拼写检查的控件,进行注册一下,比如:
<script type="text/javascript">
 var txt1 = "<%=txt1.ClientID%>";
 var txt2 = "<%=txt2.ClientID%>";
 var txt3 = "<%=TextBox3.ClientID%>";
 googie5.decorateTextareas(txt1, txt2,txt3); //可以添加很多个。
</script>
使用特点
1. 功能强大,可以检查多国语言,如英语,法语,俄语等等;
2. 使用简单,只需添加简单的一些代码就可以实现页面上所有输入框的拼写检查;
3. 检查迅速,实时检查,实时返回结果;
4. 可以提供相似的单词选择。
下载和截图
欢迎各位来我的小站(恋主题:http://www.shouji138.com)下载代码包,该控件只免费供个人学习研究之用,如果用于商业用途,请跟作者联系。
演示地址:http://www.shouji138.com/aspnet2/spellcheck/
下载地址:http://www.shouji138.com/aspnet2/files/SpellCheck.rar
效果截图:
http://www.shouji138.com/aspnet2/spellcheck/1.jpg
http://www.shouji138.com/aspnet2/spellcheck/2.jpg
http://www.shouji138.com/aspnet2/spellcheck/3.jpg
http://www.shouji138.com/aspnet2/spellcheck/4.jpg
联系方式:
QQ:441003232
Email:kefu@shouji138.com

Tags:asp net 利用

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接