This is a migrated thread and some comments may be shown as answers.

Kendo Mobile MVVM + Datasource simple POST call

5 Answers 131 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Reggie Pangilinan
Top achievements
Rank 1
Reggie Pangilinan asked on 28 Sep 2013, 02:47 AM
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?


5 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 01 Oct 2013, 02:06 PM
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:

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mike
Top achievements
Rank 1
answered on 27 Feb 2019, 12:05 AM

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

0
Alex Hajigeorgieva
Telerik team
answered on 28 Feb 2019, 03:05 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Mike
Top achievements
Rank 1
answered on 28 Feb 2019, 04:48 PM

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

0
Alex Hajigeorgieva
Telerik team
answered on 01 Mar 2019, 01:49 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
General Discussions
Asked by
Reggie Pangilinan
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Mike
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or