在Application中整合Microsoft Translator服務之使用http擷取服務

標籤：

一.建立項目

首先我們來建立一個ASP.NET Application

選擇時尚時尚最時尚的MVC，為了使示範的Demo更簡單，這裡選擇無身分識別驗證

二.建立相關類

項目需要引入之前兩個類AdmAccessToken和AdmAuthentication以便擷取存取權杖，並添加一個名為Translator的控制器方便處理相關的業務

注意需要添加程式集System.Runtime.Serialization

添加一個Language_Codes

 public class Language_Codes    {        public int Id { get; set; }        public string code { get; set; }        public string Name { get; set; }    }

三.建立資料庫上下文類

首先我們需要引入Entity Framework架構，這裡使用的是Nuget包管理

添加類CodeEntity，並且讓它繼承DbContext

public CodeEntity()            : base("DefaultConnection")        {        }        public DbSet<Language_Codes> Language_Code{get;set;}
}

接下來修改webconfig

<connectionStrings>    <add name="DefaultConnection" connectionString="server=.;database=LanguageCode;uid=sa;pwd="      providerName="System.Data.SqlClient" />  </connectionStrings>

在 TranslatorController中添加

CodeEntity dbcontext = new CodeEntity();

這要我們可以擷取語言對應的代碼了

四.搭建介面

1.修改Index方法

 public ActionResult Index()        {            List<Language_Codes> list=  dbcontext.Language_Code.ToList();            return View(list);        }

 

給TranslatorController的Index添加視圖

@model IEnumerable<Translator.Models.Language_Codes>@{    ViewBag.Title = "Index";}<table  class ="table table-striped">    <tr>        <td>            <label>要翻譯的文本</label>            <textarea id="text" class="form-control"   rows="5"></textarea>        </td>        <td>            將            <select id="from" class="form-control">                <option value="1">請選擇</option>                @foreach (var item in Model)                {                    <option id="@item.Id" value="@item.code">@item.Name</option>                }            </select>            翻譯成            <select id="to" class="form-control">                <option value="1">請選擇</option>            </select>            <button id="submit" class="btn btn-default">翻譯</button>        </td>        <td>            <label>翻譯的文本</label>            <textarea id="transtext" class="form-control" rows="5"></textarea>        </td>    </tr>    </table>
在layout.cshtml中添加

1   <div class="navbar-collapse collapse">2                 <ul class="nav navbar-nav">3                     <li>@Html.ActionLink("首頁", "Index", "Home")</li>4                     <li>@Html.ActionLink("關於", "About", "Home")</li>5                     <li>@Html.ActionLink("連絡方式", "Contact", "Home")</li>6                     <li>@Html.ActionLink("翻譯", "Index", "Translator")</li>7                 </ul>8             </div>

效果如下

 

五.利用AJAX動態載入資料

1.載入LanguageCode
首先在控制器中添加一個LoadLanguageCode來處理載入語言代碼請求

 public ActionResult LoadLanguageCode(int id)        {            List<Language_Codes> list = dbcontext.Language_Code.Where(c=>c.Id!=id).ToList();            return Json(list);        }

 

在Scripts檔案夾添加一個translator.js檔案，並在視圖中添加此檔案的引用<script src="~/Scripts/translator.js"></script>
給第一個select註冊一個事件，每次select中選項更改時我們去載入第二個select的選項
document.getElementById("from").onchange=function()
    {
        var selectedid = $(":selected","#from").attr("id");
        $.ajax(
            {
                url: "../Translator/LoadLanguageCode",
                type: "post",
                data: { id: selectedid },
                success: function (_JsonData)
                {
                    $(‘#to‘).empty();
                    for (var i = 0; i < _JsonData.length; i++) {
                        $(‘#to‘).append($(‘<option‘ + ‘  id=‘ + _JsonData[i].Id + ‘  value=‘ + _JsonData[i].code + ‘>‘ + _JsonData[i].Name + ‘</option>‘));
                    }
                }
            })
    }
2.向microsoft請求服務
在TranslatorController添加 Translate方法

 [HttpPost]        public ActionResult Translate(string from,string to,string text)        {            AdmAuthentication adm = new AdmAuthentication("zuin", "Ursm3pji3Fcha+70plJFrAbHT/Y00F7vyKdXlWLusmc=");            //string text = textBox1.Text;            //string from = "zh-CHS";//"zh-CHS"            //string to = "en";            string uri = "http://api.microsofttranslator.com/v2/Http.svc/Translate?text=" + System.Web.HttpUtility.UrlEncode(text) + "&from=" + from + "&to=" + to;            string authToken = "Bearer" + " " + adm.token.access_token;            HttpWebRequest httpWebRequest = (HttpWebRequest)WebRequest.Create(uri);            httpWebRequest.Headers.Add("Authorization", authToken);            WebResponse response = null;            try            {                response = httpWebRequest.GetResponse();                using (Stream stream = response.GetResponseStream())                {                    System.Runtime.Serialization.DataContractSerializer dcs = new System.Runtime.Serialization.DataContractSerializer(Type.GetType("System.String"));                    string translation = (string)dcs.ReadObject(stream);                    return Json(translation);                }            }            catch            {                string code = "fail";                return Json(code);            }        }
給“翻譯”按鈕註冊事件

  $(‘#submit‘).click( function ()    {        var formvalue =$("#from").val();             var tovalue = $("#to").val();        var textvalue = $("#text").val();        $.ajax(            {                url: "../Translator/Translate",                type: "post",                data: {from: formvalue, to: tovalue, text:textvalue },                success: function (_JsonData) {                    $(‘#transtext‘).empty();                    if (_JsonData==‘fail‘) {                        alert("失敗！,請聯絡管理員或使用微軟Bing 翻譯");                    }                    else {                        document.getElementById("transtext").innerHTML = _JsonData;                                         }                }            })    }    )

好了 現在可以使用服務了

由於業務很複雜，即使網路很好延遲還是很嚴重，需要最佳化下

 

 

在Application中整合Microsoft Translator服務之使用http擷取服務