在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("失败!,请联系管理员或使用微软必应在线翻译");
                    }
                    else {
                        document.getElementById("transtext").innerHTML = _JsonData;

                    }
                }
            })
    }
    )

好了 现在可以使用服务了

由于业务很复杂,即使网络很好延迟还是很严重,需要优化下

				
时间: 2024-10-11 00:20:16

在Application中集成Microsoft Translator服务之使用http获取服务的相关文章

在Application中集成Microsoft Translator服务之开发前准备

第一步:准备一个微软账号 要使用Microsoft Translator API需要在Microsoft Azure Marketplace(https://datamarket.azure.com/home.)上登录你的微软账号.如果没有微软账号请前往login.live.com中注册. 第二步:前往Microsoft Azure Marketplace注册并登录账号 前往Microsoft Azure Marketplace(https://datamarket.azure.com/home

在Application中集成Microsoft Translator服务之获取访问令牌

我在这里画了一张图来展示业务逻辑 在我们调用microsoft translator server之前需要获得令牌,而且这个令牌的有效期为10分钟.下表列出所需的参数和对于的说明 参数 描述 client_id 必须的,指你在Azuzre注册应用程序的客户端ID client_secret 必须的,指你在Azuzre注册应用程序的客户端密钥 scope   必须的,默认使用http://api.microsofttranslator.com      grant_type 必须的,默认使用"cl

在Application中集成Microsoft Translator服务之翻译语言代码

Microsoft  Translator支持多种语言,当我们获取服务时使用这些代码来表示我们是使用哪种语言翻译成什么语言,以下是相关语言对应的代码和中文名 为了方便我已经将数据库上传到云盘上,读者可以自己提取https://yunpan.cn/cvgjpKtYuxbyS (提取码:c1c6)

在Application中集成Microsoft Translator服务之优化

在一篇文章中我们已经实现了功能,但是一个明显的问题是响应时间非常长,用户体验非常糟糕,这篇文章将带你找出问题所在并进行优化 为了找出追魁祸首,这里使用 System.Diagnostics.Stopwatch来对我们的应用程序执行进行计时. 修改一下TranslatorController中Translate中的代码 System.Diagnostics.Stopwatch watch1 = new System.Diagnostics.Stopwatch(); System.Diagnosti

http的post方式连接服务器,发送数据到服务端,并获取服务端的数据

大概的流程是:客户端填写了用户名和密码,在服务端进行判断,验证密码如果正确,则返回登录成功,如果密码错误,则返回登录失败 客户端是java程序,具体代码如下: package lgx.java.test; import java.io.ByteArrayOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.io.Unsupport

在laravel5.8中集成swoole组件----用协程实现的服务端和客户端(二)---静态文件如何部署

目前,较为成熟的技术是采用laravelS组件,注意和laravel 区别laravelS多了一个大写的S,由于laravelS默认监听5200端口,所以laravel项目要做一些调整 例如: 静态文件引入的方式-----从静态资源服务器加载 我们熟悉的js和css引入方式还是通过相对路径引入到标签中,但是如果集成了laravelS组件,这种技术方案就行不通了,网页不会加载样式或js文件,所以我们最好采用从静态服务器加载相关文件的方法.文件laravel5.8官方手册给出了URL::asset(

asp.net中关于Microsoft 信息完整性、隐私性等集成信息安全服务服务 integrated security=SSPI

string [email protected]"server=(local)\SQLExpress;database=AdventureWorks;integrated security=SSPI";中的 integrated security=SSPI   安全支持提供器接口是定义食物比较全面的公用API,用来验证.Microsoft信息完整性.信息隐私等集成安全服务,以及用于所有分布式应用程序协议的安全方面的服务.应用程序协议的设计者能够利用该接口获得不同的安全性服务而不必修改协

如何在 ASP.NET MVC 中集成 AngularJS(3)

今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表:一个运行在调试模式的应用程序下和一个运行在发布模式的应用程序下.在调试模式下,JavaScript 文件在未使用压缩功能的情况下会被下载.如果想要调试并在 JavaScript 控制器中设置断点,这是必须的.事实上,路由表的产生版本也出现了一些挑战,由于产生路由代码使用的是 JavaScript

Eclipse中集成Tomcat

一.Eclipse中新建一个server Window->Preferences->Server->Runtime Environment 二.在Server视图中配置tomcat 注意:如果该tomcat中部署了项目的话,这红圈中的选项会灰掉不能修改,要修改必须得先把tomcat中的部署的服务都移除. 选择Use tomcat installation(Task control of Tomcat installation) 即选择tomcat的安装目录来作为项目的发布目录,选择该项后