ASP.Net MVC with Angular and Kendo UI

Question

I'm new to ASP, Kendo and programming in general. I'm trying to use Kendo Grid to CRUD the database; but I am kind of lost.

I have a simple class: Person, with Name and Surname. The generated Controller and View works just fine, I can CRUD the database.

Then, using Angular I created this module:

`angular.module("KendoDemos2", ["kendo.directives"])
    .controller("MyCtrl2", function ($scope) {
        $scope.mainGridOptions = {
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: { url: "/Person/Read", dataType: "json" },
                    create: { url: "/Person/Create", dataType: "json", type: "POST" },
                    update: { url: "/Person/Update", dataType: "json", type: "PUT" },
                    destroy: { url: "/Person/Delete", dataType: "json", type: "DELETE" },
                    parameterMap: function (options, operation) {
                        if (operation !== "read") {
                            console.log(options)
                            return kendo.stringify(options);
                        }
                    }
                },
                batch: false,
                pageSize: 10,
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            Name: { type: "string },
                            Surname: { type: "string" }                            }
                    }
                }
            })`

The problem is:

First, When I create a new person on the Grid, when I press “Create”, I don't know if the data is being passed to the controller.

Second, in the controller, I have no idea of how to receive this information (a json, I believe).

Sorry, I am a total beginner.

EDIT

I have this method on the Controller:

[HttpPost]
        public ActionResult Create(Person model)
        {
            if (model != null)
            {
                return Json("Success");
            }
            else
            {
                return Json("An Error Has Occurred");
            }
        }

So, this is being sent to the Person/Create method: { Name: "John", Surname: "Doe"}

Which return Success;

But how do I get these properties from the Json, and populate the model?

Answer 1

Ok so.

• POST = create
• GET = well Get in the context of the type of request from browser to server
• PUT = Update
• DELETE = exactly Delete

so those are the verbs associated with HTTP in which RESTFUL APIS reside, for the most part there are lot more to look at, behind the scope of this answer .

as a result of the nature of the call it already understands that certain things like the type of data that you sent was in Content-Type: application/json .

The one thing missing from that method which I am surprised it wasn't there was [FromBody] , unless you hand coded the Method yourself rather than scaffolded it. Understandable for someone starting out. :)

to see this placing one of those break points next to the if statement will allow you to see if model was indeed populated with the contents of the post call.

[HttpPost] //because we want to create (new Person(){}) right?
public ActionResult Create([FromBody] Person model){
  if(model != null && model.IsValid){

       //EntityFramework  or what ever DB you are using 
       _context.Person.Add(model);
       _context.SaveChanges();

      //doing this returns to the client that it was created as well as the
      //Id of the newly inserted record. model.Id was automagically updated with the Id.
      return Created("api/person/create", model);
  }
  else{
     //something was horribly wrong with the model sent
     return BadRequest("Invalid Model");
 }
}

I think that will cover the broad strokes of the question. I think you are using an older version of asp.net so JsonResult might be available as well, BadRequest and Created assume ApiController is being used or Controller in Asp.net Core

Answer 2

mvermef, thank you very much for all the explanation. I'm using ASP.Net MVC 5, with EF. I did as you told and it work perfectly.

I haven't included Web API at first, but needed it to make the [FromBody] work.

Another small but important thing was include contentType on the kendo configuration: create: { url: "/Person/Create", dataType: "json", type: "POST", contentType: "application/json; charset=utf-8" },