How to bind DataManager to a WebService.asmx

[vicebetancourt]

Hi

I'm using a DataManager to bind the ej.Grid datasource.

My question is, how I can call and bind to a WebService.asmx?

It's my code bellow but I get the next error:

"Formato de solicitud no reconocido para la dirección URL, finaliza de manera inesperada en '/getAdmons'."

WebSerice:

 [System.Web.Script.Services.ScriptService]

public class WebService : System.Web.Services.WebService {

    [WebMethod]

    [ScriptMethod(UseHttpGet=true)]

    public string getAdmons()

    {

//I'm using a NewtonJson to return a JSON Response

        List<ElementoPersona> admins = new List<ElementoPersona>();

        admins = GestorPersona.ListadoAdministradores(1);

        return JsonConvert.SerializeObject(admins);

    }

}

JavaScript:

$(function () {

            $("#defaultTab").ejTab();

             var dataManager = ej.DataManager({

                url: "../WebService.asmx/getAdmons",

                offline: true

            });

            $("#GridAdmins").ejGrid({

                dataSource: dataManager,

                allowPaging: true,

                columns: [

                    { field: "IdPersona", headerText: "ID", isPrimaryKey: true, textAlign: ej.textAlign.Right }

                ]

            });

        })

Thanks.

Sorry for my english.

[Alan Sangeeth S]

Hi Vincente,

Thanks for using Syncfusion Products.

Based on your requirement we have created a sample using ASP.NET Web Services.

Please refer the sample and code snippet below:
Sample: http://www.syncfusion.com/downloads/support/forum/119714/ze/Sample-985080668

public class WebService1 : System.Web.Services.WebService

    {

        static string cons = ConfigurationManager.ConnectionStrings["SQLConnectionString"].ConnectionString;

        static SqlConnection con = new SqlConnection(cons);

        [WebMethod]

        public DataTable Get()     

        {

            SqlCommand getData = new SqlCommand();

            getData.CommandText = "usp_DEV_ChangeLog_Select"; // Stored procedure for retrieve data from suppliers table

            getData.CommandType = CommandType.StoredProcedure;

            getData.Connection = con;

            if (con.State != ConnectionState.Open)

                con.Open();

            DataTable sqldata = new DataTable();

            SqlDataAdapter sqladapter = new SqlDataAdapter(getData);

            sqldata.TableName = "Suppliers";

            sqladapter.Fill(sqldata);

            return sqldata;

        }

    }

In the above code snippet, we have created webservices by using the ASP.NET web service and bound dataSource to Grid, in code behind GetDataSource method.

var dataManager = ej.DataManager({

                url: "Default.aspx/GetDataSource",

                offline: true, adaptor:"UrlAdaptor"

            });

            $("#Grid").ejGrid({

                dataSource: dataManager,

                allowPaging: true,

            });

[WebMethod]

        [ScriptMethod(ResponseFormat = ResponseFormat.Json)] // Return the JSON formatted result

        public static object GetDataSource()

        {

            CRUD_Service.WebService1 service = new CRUD_Service.WebService1();

            var sqldata = service.Get();   // Get data from webservices

            DataResult result = new DataResult();

            List<EditableCustomer> data = (from ord in sqldata.AsEnumerable() // Perform skip take for on demand load paging

                                           select new EditableCustomer

                                           {

                                               SupplierID = ord.ItemArray[0].ToString(),

                                               CompanyName = ord.ItemArray[1].ToString(),

                                               City = ord.ItemArray[5].ToString(),

                                               PostalCode = ord.ItemArray[7].ToString(),

                                               Country = ord.ItemArray[8].ToString()

                                           }).ToList();

                        con.Close();

            return data;

        }

 

Please let us know if you have any queries.

Regards,
Alan Sangeeth S

[vicebetancourt]

Thanks, it works for me. 

You saved me a lot of time.

[Alan Sangeeth S]

Hi Vincente,
 
Thanks for the update.
 
Please let us know if you need any further assistance. We will be happy to help you out.
 
Regards,
Alan Sangeeth S

[Hostilio]

Sorry to add response on this old topic but thanks to this o got it working with asmx but my issue is that the json webservice i'm trying to call needs 2 string parameters and just don't know how to send them.

If i were using jquery i would do something like this:

var parametros = new Object();
parametros.param1 = "PArameter1";
parametros.param2 = "Parameter2";
var jsonText = JSON.stringify(parametros);
            $.ajax({
                url: "./Datos.asmx" + "/Load",
                data: jsonText,
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                cache: false,
                timeout: 24000,
                success: function (response) {
                },
                error: function (jqXHR, textStatus, errorThrown) {
                },
                complete: function (jqXHR, textStatus) {
                        JSON.parse(JSON.parse(jqXHR.responseText).d)
                }
            });

[vicebetancourt]

Hi Hostilio, please try this

var parametros = {

    p1: 'parameter1',

    p2: 'parameter2'

};

            $.ajax({
                url: "./Datos.asmx" + "/Load",
                data: JSON.stringify({ params : parametros }),
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                cache: false,
                timeout: 24000,
                success: function (response) {
                },
                error: function (jqXHR, textStatus, errorThrown) {
                },
                complete: function (jqXHR, textStatus) {
                        JSON.parse(JSON.parse(jqXHR.responseText).d)
                }
            });

Now, in your WebMethod you will receive a parameter an array of string or you can define a class and receive the type parameter of that class.

Public class Parametro 

{

   public string p1 { get; set; }

   public string p1 { get; set; }

   public Parametro(){};

}

[WebMethod]

public String Load(Parametro params){

 string param1 = params.p1;

 string param2 = params.p2;

}

Note: Names of parameters in json array must be equals to properties of Parameters class.

I hope help you.

Regards and sorry for my english

[Hostilio]

Hi dude thanks i forgot the specify that i want to do it with ej.DataManager
My code worked with jquery but want to use ej.DataManager. Finally i got it working but now i need one more step to get my goals.

So with DataManager i'm sending parameters using ej.Query (After looking depth in the documentation there are no examples about these)
 var dataManager = ej.DataManager({
                url: "/Datos.asmx/CatalogoIncidente",
                adaptor:new ej.UrlAdaptor(), //"UrlAdaptor",
                crossDomain: false,
                offline: false
            });
            var query = ej.Query();
            query.addParams("userName", "PARAMENTER1VALUE");
            query.addParams("pwd", "PARAMENTER2VALUE");
            var promise = dataManager.executeQuery(query);
            promise.done(function (e) {
                ko.mapping.fromJSON(e.result, {}, self);
            });

Now my issue is that how do i control communication errors with thge webservice, example when the webservice is down

[Saravanan Arunachalam]

Hi Hostilio,

Thanks for contacting Syncfusion support.

We can handle the error or any exception using fail event of ejDataManager during the post back. The fail method gets invoked when there is any error while making the request or an exception. Please refer to the below code example.

<script type="text/javascript">

       

        var dataManager = ej.DataManager({

            url: "/WebService.asmx/Get",

            adaptor: new ej.UrlAdaptor(), //"UrlAdaptor",

            crossDomain: false,

            offline: false

        });

        var data = [];

        var query = ej.Query();

        query.addParams("userName", "EB_HMACIAS");

        var promise = dataManager.executeQuery(query);

        promise.done(function (e) {

            data = e.result.result;

            window.employeeView = {

                dataSource: ko.observableArray(data),

                selectedRow: ko.observable(1),

                currentPage: ko.observable(2),

                actionBegin: ko.observable(function (args) {

                    if (args.requestType == "grouping")

                        $("#selectedRow").ejNumericTextbox("option", { value: -1 });

                })

            };

            ko.applyBindings(employeeView);

        });

        promise.fail(function (e) {

            alert(e.error.statusText);

        });     

    </script>

We have created a sample with thrown an exception manually in the ASMXPage that you can download from the below link.
Sample: http://www.syncfusion.com/downloads/support/forum/121518/ze/KnockoutSample_(2)-918495002

Regards,

Saravanan A.