Kendo Mobile MVVM + Datasource simple POST call

[Reggie Pangilinan]

I have a kendo mobile app with a view  that is binded to an observable object 


         

//Post Account View Model
        var postaccountModel = kendo.observable({
            Username: null,
            Password1: null,
            Password2: null,
            Firstname: null,
            Middlename: null,
            Lastname: null,
            Gender: null,
            BirthDate: null
        });

What i want basically is to just make a simple POST call using kendo datasource passing this viewmodel to webapi post method
     

public class PostAccountModel
    {
        public string Username { get; set; }
        public string Password1 { get; set; }
        public string Password2 { get; set; }
        public string Firstname { get; set; }
        public string Middlename { get; set; }
        public string Lastname { get; set; }
        public string Gender { get; set; }
        public DateTime? BirthDate { get; set; }
    }


        [Authorize(Roles = Service.Security.Role.Guest)]
        public void Post(PostAccountModel value)
        {
        }

But I cant figure out how, I tried this code but it doesnt work

  

$("#button-save").on("click", function () {
            if (createaccountvalidator.validate()) {
                var authheader = EMRGUEST;
                var authbase64 = Base64.encode(authheader);

                var dataSource = new kendo.data.DataSource({
                    transport: {
                        create: {
                            url: EMRAPIURL + "account",
                            dataType: "jsonp",
                            type: "POST",
                            beforeSend: function (xhr) {
                                xhr.setRequestHeader('Authorization', 'Basic ' + authbase64);
                            },
                            data: kendo.stringify(postaccountModel)
                        }
                    }
                });
                dataSource.sync();}
        });

can anyone point me to the right direction on how to make this kind of call?

[Alexander Valchev]

Hi Reggie,

For this particular scenario I suggest sending the model to the server via standard jQuery Ajax request.
The DataSource is designed to operate with arrays of data, not a single observable object which is why it is not suitable.

You may use the toJSON method to transport the observable into standard JavaScript object and serialize it in a way suitable for the service.

I hope this will help. For more information please check jQuery.ajax API reference:

• http://api.jquery.com/jQuery.ajax/

Regards,
Alexander Valchev
Telerik

[Mike]

Hi,

I know this is a late reply, but can you post a working example? When I try to follow your suggestion, the webapi method parameter is always Nothing.

 

Thanks,

Meir

[Alex Hajigeorgieva]

Hi, Meir, 

I am attaching a working example as requested.

For your reference here is what the data source looks like:

  dataSource: {
    transport: {
        read: {
            url: "/api/grid"
        },
        create: {
            url: "/api/grid",
            type: "POST",
            contentType: 'application/json; charset=utf-8',
            dataType: 'json'
        },
        parameterMap: function (options, operation) {
            if (operation !== "read" && options) {
                return  kendo.stringify(options);
            }
        }
    },
    pageSize: 10,
    schema: {
        model: {
            id: "Id",
            fields: {
                Id: { editable: false}
            }
        }
    }
},

Here is the Create controller:

// POST api/values
public List<Student> Post([FromBody]Student student)
{
    student.Id = students.Count + 1;
    students.Add(student);
    return new List<Student>() { student };
}

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Mike]

Hi,

Thanks for providing the example. However, the question relates to posting data from a Kendo ObservableObject, not  a grid so the example doesn't really help. How do you post the data from an observable object to a web api endpoint?

Thanks,

Meir

[Alex Hajigeorgieva]

Hi, Meir, 

The original question was submitting via the data source transport, therefore, I provided a project with a grid which has a data source.

Nonetheless, the data source uses jQuery ajax internally, so you can use the exact same ajax setup as shown:

<script>
 var viewModel = kendo.observable({
     Name: "John Doe",
     submitName: function () {
         $.ajax({
             url: "/api/grid",
             type: "POST",
             contentType: 'application/json; charset=utf-8',
             dataType: 'json',
             data: kendo.stringify(viewModel)
         });
       }
    });

   kendo.bind($(".container"), viewModel);
 </script>

I am attaching here the project for your reference. In case you have something different in mind, please modify it to demonstrate the scenario, so I can provide you with a response.

Regards,
Alex Hajigeorgieva
Progress Telerik