asp.net利用Google接口實現拼寫檢查

2019-11-17 03:49:00

字體：大中小

來源：轉載

供稿：網友

關鍵詞：拼寫檢查,SpellCheck,英語拼寫檢查
在開發一個國外外包項目時，客戶提出一個需求，就是希望在文本框中輸入單詞，在保存前能夠進行拼寫檢查，如果發現單詞錯誤，可以提醒用戶進行改正，為此，在結合參考了各種方案之后，選擇了一個免費的方案，Google的一個API接口，https://www.google.com/tb PRoxy/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.VeVb.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:;" onclick="closedivspellcheckerror();">
                <img src="googiespell/btn_yes.gif" style="border: 0px;" alt="yes" /></a>   <a
                    href="javascript:ToDoNext();"><img src="googiespell/btn_no.gif" style="border: 0px;"
                        alt="no" /></a>
        </div>
    </div>
</div>
代理類：sendSpellReq.aspx.cs
asp.net教程:http://www.49028c.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 = "            Stream InputStream = Request.InputStream;
            StreamReader inputreader = new StreamReader(InputStream, Encoding.UTF8);
            string arc xml = 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

上一篇：Cache在aspx.cs和xxx.CS里的不同用法

下一篇：三種直接備份 WordPress 博客的方法