How to call SOAP asmx web service within XDK project

[zipsoft_z_]

Hi,

Is it possible to call SOAP asmx web service within XDK project?

Any example?

Thanks

[Nick_F_2]

Here is a sample ASMX file to return JSON data from a table. 

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Script.Serialization

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
' <System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebService1
    Inherits System.Web.Services.WebService
    Dim strConnString As String = System.Configuration.ConfigurationManager.ConnectionStrings.Item("strConnString").ToString()
    Dim myconn As New SqlConnection(strConnString)
    Dim sqlstr As String
    Dim mycommand As SqlCommand
    Dim sqlda As SqlDataAdapter
    Dim ds As DataSet


    <WebMethod()>
    Public Function getCols(ByVal col1 As String) As String
        Try
            sqlstr = "SELECT no,name FROM Dept WHERE no = col1;"
            mycommand.Connection = myconn
            If myconn.State <> ConnectionState.Open Then
                myconn.Open()
            End If
            sqlda = New SqlDataAdapter(sqlstr, myconn)
            sqlda.Fill(ds)
            myconn.Close()
            Dim jsonData As String = GetJson(ds.Tables(0))
            Return jsonData
        Catch ex As Exception
            myconn.Close()
            Return False
        End Try
    End Function
    Public Shared Function GetJson(ByVal dt As DataTable) As String
        Return New JavaScriptSerializer().Serialize(From dr As DataRow In dt.Rows Select dt.Columns.Cast(Of DataColumn)().ToDictionary(Function(col) col.ColumnName, Function(col) dr(col)))
    End Function
End Class

From your Javascript call the following to build a Dropdown list in HTML and display it at a DIV defined on your page.

function getCols() {
    $.ajax({
        type: "POST",
        url: "http://myURL/service.asmx/getCols",
        data: "{'col1':'" + localStorage.getItem("col1") + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: true,
        crossDomain: true,
        success: function(json){
        jsonArray = $.parseJSON(json.d);
            $("#cols").empty();
                       var html = "<option>[Select]</option>";
             for(i=0; i < jsonArray.length; i++)
                       {
                       col1 = jsonArray.no;
                       col2 = jsonArray.name;
                       html += "<option value='"+col1+"'>"+col2+"</option>";
                       }
           //console.log(html);
            $('#cols').html(html);
            $("#cols option:first").attr('selected','selected');
            $("#cols option:eq(0)").prop("selected", true)
            $("#cols")[0].selectedIndex = 0; 
            $.mobile.changePage("#uib_page_1", {transition: "slide"});
            var myselect = $("#cols");
            myselect.selectmenu('refresh');
        },
        error: function(msg) {
        navigator.notification.alert("Unable to retrieve cols:" + msg.d);
        }
    });
return false;
}

[zipsoft_z_]

Thank you, I'll try it.

[Nick_F_2]

OK great, just to say I use MYSQL but the same goes for other databases. I also tend to use VB.NET but again post my VB code to a VB to C# convertor if your need another language.

[zipsoft_z_]

Hi,

I have a problem, my WS needs header credentials.

This is my WS url: http://zipris.co.il/nextws/next.asmx and the method is test_Header_json.

How can I make a script with header? UserId and and UserPassword?

Thanks

[Nick_F_2]

Hi

I'm not sure I get what you mean.
If you want to confirm a username and password then send this values in the data string from Javascript like this:-

function verifyDetails(){
  var username = $('#username').val();
  var password = $('#password').val();
$.ajax({
        type: "POST",
        url: "http://myURL/service1.asm/confirmUser",
        data: "{'username':'" + username + "','password':'" + password + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: true,
        crossDomain: true,
        success: function (msg) {
            if (msg.d) {
                navigator.notification.alert("Your username is correct.",saveDismissed,"Success");
                }
                 else 
                {
                    navigator.notification.alert("Your username and or password is incorrect.",DeviceDismissed,"User Details Error"); 
  
                }
        },
                  
        error: function(jqXHR, textStatus, errorThrown) {
                navigator.notification.alert("Error cannot confirm user details: " + textStatus + ' : ' + errorThrown);
        }
    });

}

Your ASMX web service then returns True or False depending on whether the credentials are correct.

[zipsoft_z_]

Hi,

This is the request for the WS, as you can see the user and pass are in the header.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
<soap:Header>
<tns:WSCredentials xmlns:tns="http://tempuri.org/">
<tns:UserId>user</tns:UserId>
<tns:UserPassword>pass</tns:UserPassword>
<tns:Server></tns:Server>
</tns:WSCredentials>
</soap:Header>
<soap:Body>
<tns:test_Header_json xmlns:tns="http://tempuri.org/"/>
</soap:Body>
</soap:Envelope>

[Nick_F_2]

Any reason why you are using SOAP, why not use  HTTP POST as per my example.

Either way you should be able to send the Username and Password as criteria to your web service.

[zipsoft_z_]

Hi,

Unfortunetly it does not work.

I press the button but nothing happened.

Any idea?

<html>
<head>
    <title>AJAX and XDK</title>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
    <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>  
    <script src="intelxdk.js"></script>
    <script src="xhr.js"></script>
    <script>
        function doAJAX() {
        $.ajax({
        type: "POST",
        url: "http://zipris.co.il/nextws/next.asmx/test_json",
        data: "{'col1':'" + localStorage.getItem("col1") + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: true,
        crossDomain: true,
        success: function(json){
        jsonArray = $.parseJSON(json.d);
            $("#cols").empty();
                       var html = "<option>[Select]</option>";
             for(i=0; i < jsonArray.length; i++)
                       {
                       col1 = jsonArray.EmpNo;
                       col2 = jsonArray.EmpName;
                       html += "<option value='"+col1+"'>"+col2+"</option>";
                       }
           //console.log(html);
            $('#cols').html(html);
            $("#cols option:first").attr('selected','selected');
            $("#cols option:eq(0)").prop("selected", true)
            $("#cols")[0].selectedIndex = 0; 
            $.mobile.changePage("#uib_page_1", {transition: "slide"});
            var myselect = $("#cols");
            myselect.selectmenu('refresh');
        },
        error: function(msg) {
        navigator.notification.alert("Unable to retrieve cols:" + msg.d);
        }
        });
        }
</script>
<style>
    body {font-family:arial;background-color:white}
</style>    
</head>
<body>         
    <h3>AJAX Call</h3>
    <button onclick="doAJAX()">AJAX Call</button><br>
    <select name="myselect"></select>
</body>
</html>

[Pamela_H_Intel]

Zipsoft,

Have you stepped through your code while running on device? Where does it get stuck? Using the Debug Tab to step through your code can be very helpful (or the Test Tab with weinre for a Windows 8 device).

Pamela

[zipsoft_z_]

Hi,

How can I debug javascript?

I put alert message in the function doAJAX and it does not go after the $.ajax({ .

[Nick_F_2]

If you run your ASMX file directly in a browser

http://zipris.co.il/nextws/next.asmx then click on test_json you get the following error:-

The test form is only available for requests from the local machine.

You will need to fix this error before you can test your ASMX script from a live server. Check your web.config file and check this line in your asmx file

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

09	' <System.Web.Script.Services.ScriptService()> _

Make sure you uncomment the line above as suggested.

You can run your script live once you have fixed the issue above and manually enter the data your ASMX script expects and then see what JSON data is returned to see if this is the format your Javascript is expecting.

You can use the emulate tab and open the debug console, insert breakpoints to test your javascript and also check what values are returned from the ASMX script etc.

[zipsoft_z_]

Believe me, the WS is not my problem. The question is why the program does not passes $.ajax({ ?

[zipsoft_z_]

Can you refer me please to an working example of Intel XDK html5 Ajax calling a web service or a website?

[Nick_F_2]

Your code works fine.

I have just copied and pasted your Javascript and displayed the results in a DIV called cols. The Button has an onclick event to fire doAJAX()

Above is a screen grab from the XDK Emulator Tab.

[zipsoft_z_]

Can you send me please the XDK project?

[Nick_F_2 · Accepted solution]

I Have sent you a private message with a link to the project.

[zipsoft_z_]

Thank you.

I appreciate it a lot.

[Nick_F_2]

Glad I could help.