Tag: ASP.NET MVC Framework

MVC ASP.NET and Microsoft Translator

Introduction

The Internet is moving towards restful services, where we use the HTTP protocol to get information from services. If we just need to send some values into the service and get a return back, then we can use a GET HTTP request. A good example of this is with Microsoft Translator, where we can call up the Translator API with a text value, and with the arguments of the input and the output languages (such as en for English and fr for French). In this tutorial I will illustrate how we can integrate Microsoft Translator into an ASP.NET MVC site. If you want to view the result it is here, which uses both a text translator, and a speech convertor.

Getting the Authentication Token

In order to access the service, we must first create an authentication token, which, once granted, is added to the HTTP Web request. The standard code to use is:

[DataContract]
        public class AdmAccessToken
        {
            [DataMember]
            public string access_token { get; set; }
            [DataMember]
            public string token_type { get; set; }
            [DataMember]
            public string expires_in { get; set; }
            [DataMember]
            public string scope { get; set; }
        }
        public class AdmAuthentication
        {
            public static readonly string DatamarketAccessUri = "https://datamarket.accesscontrol.windows.net/v2/OAuth2-13";
            private string clientId;
            private string cientSecret;
            private string request;

            public AdmAuthentication(string clientId, string clientSecret)
            {
                this.clientId = clientId;
                this.cientSecret = clientSecret;
                //If clientid or client secret has special characters, encode before sending request
                this.request = string.Format("grant_type=client_credentials&client_id={0}&client_secret={1}&scope=http://api.microsofttranslator.com", HttpUtility.UrlEncode(clientId), HttpUtility.UrlEncode(clientSecret));
            }

            public AdmAccessToken GetAccessToken()
            {
                return HttpPost(DatamarketAccessUri, this.request);
            }

            private AdmAccessToken HttpPost(string DatamarketAccessUri, string requestDetails)
            {
                //Prepare OAuth request 
                WebRequest webRequest = WebRequest.Create(DatamarketAccessUri);
                webRequest.ContentType = "application/x-www-form-urlencoded";
                webRequest.Method = "POST";
                byte[] bytes = Encoding.ASCII.GetBytes(requestDetails);
                webRequest.ContentLength = bytes.Length;
                using (Stream outputStream = webRequest.GetRequestStream())
                {
                    outputStream.Write(bytes, 0, bytes.Length);
                }
                using (WebResponse webResponse = webRequest.GetResponse())
                {
                    DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(AdmAccessToken));
                    //Get deserialized object from JSON stream
                    AdmAccessToken token = (AdmAccessToken)serializer.ReadObject(webResponse.GetResponseStream());
                    return token;
                }
            }

This is then called by:

       AdmAuthentication admAuth = new AdmAuthentication("CLIENT ID", "CLIENT SECRET");
       admToken = admAuth.GetAccessToken();
       Session["admToken"] = admToken;

where we keep the token as a session key, which is used for other accesses. To create the CLIENT ID and CLIENT SECRET we go to.

http://datamarket.azure.com/

and then click on Register Your Application (which is near the bottom of the page).  In the example below the CLIENT ID is french and the CLIENT SECRET is /fspbEcYHaX/TOm1TlDJAoeK6oMe7q0k9wDhTvl1gic=:

azCreating the controller

The controller has a GET and a POST, where the GET is called when the page is first accessed, and the POST results from the user clicking on the Translate button. With the code the getTranslation() method will return a translation of text, from English (“en”) to French (“fr”) and the getTranslationSp() method will return a wav file link for the translation.

 [HttpPost]
        public ActionResult french(FormCollection Form)
        {
            string text = Form["english"];
            AdmAccessToken admToken  = (AdmAccessToken)Session["admToken"];
            ViewData["english"] = text;
            string rtn = getTranslation(admToken,text, "en", "fr");
            ViewData["french"] = rtn;
            rtn = getTranslationSp(admToken,rtn, "fr");
            ViewData["audio"] = rtn;
            return PartialView("french_partial");
        }

        [HttpGet]
        public ActionResult french(string text)
        {
            string rtn = "";
            AdmAccessToken admToken;
            AdmAuthentication admAuth = new AdmAuthentication("CLIENT ID", "CLIENT SECRET");
            admToken = admAuth.GetAccessToken();
            Session["admToken"] = admToken;
            if (text != null)
            {
                rtn = getTranslation(admToken,text, "en", "fr");
                ViewData["french"] = rtn;
                rtn = getTranslationSp(admToken, rtn, "fr");
                ViewData["audio"] = rtn;
                ViewData["english"] = text;
            }
            return View();
        }

the methods for the translation can then be added:

 public string getTranslation(AdmAccessToken admToken, string text, string from, string to)
        {
            try
            {
                string uri = "http://api.microsofttranslator.com/v2/Http.svc/Translate?text=" + System.Web.HttpUtility.UrlEncode(text) + "&from=" + from + "&to=" + to;
                string authToken = "Bearer" + " " + admToken.access_token;

                HttpWebRequest httpWebRequest = (HttpWebRequest)WebRequest.Create(uri);
                httpWebRequest.Headers.Add("Authorization", authToken);

                WebResponse 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 (translation);
                }
            }
            catch (Exception ex)
            {
                return ("Not Known (" + ex.Message + ")");
            }
            return ("");
        }
        public string getTranslationSp(AdmAccessToken admToken, string text, string from)
        {
            try
            {
                string uri = "http://api.microsofttranslator.com/v2/Http.svc/Speak?text="+text+"&language="+from+"&format=" + HttpUtility.UrlEncode("audio/wav") + "&options=MaxQuality";
                string authToken = "Bearer" + " " + admToken.access_token;
                HttpWebRequest request = (HttpWebRequest)WebRequest.Create(uri);
                request.Headers.Add("Authorization", authToken);

                HttpWebResponse response = (HttpWebResponse)request.GetResponse();
                // Get the stream associated with the response.
                Stream receiveStream = response.GetResponseStream();
                byte[] buffer = new byte[32768];
               string fname = "cc/"+System.Guid.NewGuid().ToString()+".wav";
               using (FileStream fileStream = System.IO.File.Create(Server.MapPath("~/") + fname))
                {
                    while (true)
                    {
                        int read = receiveStream.Read(buffer, 0, buffer.Length);
                        if (read <= 0)
                            break;
                        fileStream.Write(buffer, 0, read);
                    }
                }
                ViewData["file"] = "/" + fname;
            }
            catch (Exception ex)
            {
                return ("Audio error: (" + ex.Message + ")");
            }
            string filename = "/" + fname;
            return (filename);
        }

Creating the view

Now we need to create the view using Ajax with (french.cshtml):

@{
    ViewBag.Title = "French Translation";
}

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<!-- ~/Scripts/jquery.validate.unobtrusive.js -->

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <script>
            function DHTMLSound(surl) {
  document.getElementById("dummyspan").innerHTML=
    "";
}
        </script>

    <table width="100%" border="1" cellpadding="0" cellspacing="0">

      <tr><td valign="top" colspan="2"><div> <h1>English to French</h1></div>
<div> &nbsp;</div>
           <div>
<p><a href="javascript:history.go(-1)">Back</a> Press the button for the translation:</p>

           @using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "french_partial", HttpMethod = "POST", InsertionMode = InsertionMode.Replace }))
            {           

                      <div id="french_partial">
 @Html.Partial("french_partial")
</div>             }     
               </div>
</td></tr>
    </table>

and a partial view of (french_partial.cshtml):

<table width="100%" border="0">
  <tr>   
    <td width="50%" valign="top" bgcolor="#F8F8FF">
        <h2>Parameters</h2>
        <div>
       <div>Enter English phrase:</div><div> @Html.TextArea("english", null, new { style = "width:400px" })
        <input type="submit" id="buttoncheckanswer" value="Translate" name="button1" /> </div>   
 </div>
</td>
    <td width="50%" valign="top"><h2>Translation</h2>
<p>Translation is: @ViewData["french"]</p> 
<form><input type="button" value="Play Translation" onClick="DHTMLSound('@ViewData["file"]')">
</form>
        <span id=dummyspan></span>
    </td>
  </tr>
</table>

Notice that ViewData[“file”] is used to point to the WAV file that has been created on the system, and that ViewData[“french”] is the translated text. So, try it here (just click on the graphic to try):

az2

Goodbye Flash … and hello .NET and ASP.NET MVC

Goodbye to Flash …

Network Simulator
Network Simulator

I just read an article about the Top 10 IT skills that are going to be least in demand, and in the Top 10 is Adobe Flash (previously know as Macromedia Flash). Unfortunately it was Apple who provided the death-nail for it, as they refused to support it on their closed-system Apple iPhone. Over the years, though, there was nothing to match it, especially as it allowed the scripting of actions which could be displayed in a Web browser. I developed so many applications in Flash, and was so disappointing when Apple made their announcement.

One of my major developments was in creating a range of Flash Cisco simulators, which were actually innovative for the time, and which used ActionScript 1.0 to provide the main functionality. If you are interested, here’s an example :http://billatnapier.com/text_router.html

Unfortunately the more commands I added, the more it become more difficult to maintain them. At the time Flash was moving from a scripting language in which you could use variables whenever you wanted, without ever declaring them. While this works well for a small program, it is not scaleable. So, at the time, I looked at ActionScript 2.0, which integrated in a more formal way, but, as it was kinda like Java, which I personally dislike (even though I’ve written a book on it), so I moved to Microsoft .NET 1.1, and I have never looked back.

Microsoft .NET 1.1, 2.0 and so on

Networksims Router Simulator

I picked-up on .NET 1.1 at the time, as it just worked so well, and had a strong development infrastructure, which continually checked all the elements of the program. For I developed my Networksims package, which simulated a range of Cisco devices, including PIX/ASA, router, switch, wireless, and so on:

networksims.com/demo.zip

This has worked fine, but it has become difficult to maintain, and is fixed to Microsoft Windows. It is to ASP.NET MVC that I have turned to, and it has provided me with an excellent platform to integrate a wide range of applications. With MVC, we try and separate the data (the Model), from the middleware (the Controller) and from the interface (the View). This method allows you to create reusable code, in which you can easily change the user interface, without changing anything within the core logic of the program. The result was:

A major port for me was to integrate the core code from Networksims, into my MVC site, and here’s where I have got to (demo):

Integrating Console Applications

So as an example, let’s look at how we integrate a console application into MVC. In this case I have integrated a program named openssl.exe, and the demonstrator is at:

http://www.asecuritysite.com/encryption/opensslp

The demonstration is:

How cool is that … that you are able to integrate a back-end console output into your Web page?