Attempt to create usable VoIP phone by Twilio in ASP.NET-MVC fails as Only XML is visible on the website instead of phone

Question

I was searching for a long time for VoIP technology in ASP.NET-MVC. The only thing I have found is Twilio.

I created ASP.NET-MVC 5.2 app and added references to:

Twilio.Api
Twilio.Mvc
Twilio.Twiml

I reduced _Layout.csthml to the minimum:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
        @RenderBody()
</body>
</html>

I have found this sample: https://www.twilio.com/docs/howto/phonemenu As I believe it should generate phone menu in my website.

I added the action to the HomeController

The controller's action:

 public ActionResult PhoneMenu() {
        return View();
    }

I have downloaded content of the how-to from https://www.twilio.com/resources/tarball/phonemenu.zip and pasted it to the : PhoneMenu.csthml then added it to the Views/Home/ in my project.

@{

    @*@start snippet*@
    @* Define Menu *@
    Dictionary<string, string[]> web = new Dictionary<string, string[]>() {
        {"default",new string[] {"receptionist","hours", "location", "duck"} },
        {"location",new string[] {"receptionist","east-bay", "san-jose", "marin"} }
    };

    Uri cleanedUri = new Uri(Request.Url.GetComponents(UriComponents.AbsoluteUri & ~UriComponents.Port, UriFormat.UriEscaped));
    string baseUri = cleanedUri.AbsoluteUri.Remove(cleanedUri.AbsoluteUri.Length - cleanedUri.Segments.Last().Length);

    @* Get the menu node, index, and url *@
    string node = Request["node"] != null ? Request["node"] : "";
    int index = Request["Digits"] != null ? int.Parse(Request["Digits"]) : 0;

    string url = string.Format("{0}phonemenu.cshtml", baseUri);

    @* Check to make sure index is valid *@
    string destination = string.Empty;
    if (web.Keys.Contains(node) && web[node].Length >= index && Request["Digits"] != null) {
        destination = web[node][index];
    } else {
        destination = string.Empty;
    }
    @*end snippet*@

    @*start snippet*@
    @* Render TwiML *@
    Response.ContentType = "text/xml";
    var twiml = new Twilio.TwiML.TwilioResponse();

    switch (destination) {
        case "hours":
            twiml.Say("Initech is open Monday through Friday, 9am to 5pm");
            twiml.Say("Saturday, 10am to 3pm and closed on Sundays");
            break;
        case "location":
            twiml.Say("Initech is located at 101 4th St in San Francisco California");
            twiml.BeginGather(new { action = "phonemenu.cshtml?node=location", numDigits = "1" })
                .Say("For directions from the East Bay, press 1")
                .Say("For directions from San Jose, press 2");
            twiml.EndGather();
            break;
        case "east-bay":
            twiml.Say("Take BART towards San Francisco / Milbrae. Get off on Powell Street. Walk a block down 4th street");
            break;
        case "san-jose":
            twiml.Say("Take Cal Train to the Milbrae BART station. Take any Bart train to Powell Street");
            break;
        case "duck":
            twiml.Play("duck.mp3");
            break;
        case "receptionist":
            twiml.Say("Please wait while we connect you");
            twiml.Dial("NNNNNNNNNN");
            break;
        default:
            twiml.BeginGather(new { action = "phonemenu.cshtml?node=default", numDigits = "1" })
                .Say("Hello and welcome to the Initech Phone Menu")
                .Say("For business hours, press 1")
                .Say("For directions, press 2")
                .Say("To hear a duck quack, press 3")
                .Say("To speak to a receptionist, press 0");
            twiml.EndGather();
            break;
    }
    @*end snippet*@

    @*start snippet*@
    if (destination != String.Empty && destination != "receptionist") {
        twiml.Pause();
        twiml.Say("Main Menu");
        twiml.Redirect(url);
    }
    @*end snippet*@
}
@Html.Raw(twiml.ToString())

The only thing I see when I go to the url: http://localhost:43281/Home/PhoneMenu is the generated xml not phone menu:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
    <link href="/Content/site.css" rel="stylesheet"/>    
    <script src="/Scripts/modernizr-2.6.2.js"></script>    
</head>
<body>



<Response>
  <Gather action="phonemenu.cshtml?node=default" numDigits="1">
    <Say>Hello and welcome to the Initech Phone Menu</Say>
    <Say>For business hours, press 1</Say>
    <Say>For directions, press 2</Say>
    <Say>To hear a duck quack, press 3</Say>
    <Say>To speak to a receptionist, press 0</Say>
  </Gather>
</Response>    
</body>
</html>

Visible result:

enter image description here Question: How to generate usable phone? As I can't find any source how to do it, if there is easier alternative than Twilio it would be great.

score 1 · Accepted Answer · answered May 13 '15 at 14:54

The Twilio TwiML generation doesn't need to go in your Razor View and instead you just use the controller. So you might have something like the following instead:

public ActionResult PhoneMenu() {
    var response = new TwimlResponse().Say("Hello"):
    return new TwimlResult(response);
}

Or, as part of Twilio.Mvc there's an alternative controller you can choose to inherit from called TwilioController so you could then do something like the following:

public class PhoneMenuController : TwilioController
{
    public ActionResult PhoneMenu()
    {
        var response = new TwimlResponse().Say("Hello");
        return Twiml(response);
    }
}

The full documentation is available on GitHub at https://github.com/twilio/twilio-csharp/

I didn't understand it at first. Could you take a look at my question: http://stackoverflow.com/questions/30309884/how-to-make-live-voice-phone-call-using-twilio-instead-of-just-playing-an-mp3 ? — Yoda, May 18 '15 at 18:20

Attempt to create usable VoIP phone by Twilio in ASP.NET-MVC fails as Only XML is visible on the website instead of phone

1 Answers1