MVC Kendo Grid, Ajax Request

[im]

Im using the MVC wrappers for the Kendo UI, and placing a grid on the page, getting its data from an Ajax Request. Im following the example almost identically (VS MVC Kendo UI examples - Paging) however my site issues a GET request where the demo issues a POST request. I cant find where that is happening or how to change it. My site $)$ errors, because I dont have a GET request action method, mine follows the

  [HttpPost]
        public ActionResult _AjaxProducts([DataSourceRequest] DataSourceRequest request)
        {
            return Json(_ps.GetProducts(ViewData["ProductType"].ToString()).ToDataSourceResult(request));
        }
 
Any ideas why my page uses a GET but the demo uses POST?

Html.Kendo().Grid<Web.BusinessLayer.Models.Product.ProductModel>()
    .Name("Products")
    .ColumnMenu()

    .Columns(columns =>
    {
....
    })
    .Pageable(pager => pager
        .Refresh(true)
        .PageSizes(true)
    )
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("_AjaxProducts", "Inventory"))
    )
)

[andrew]

double post

[andrew]

In your data source user a .Type = "POST", GET is not secure and so as default MVC blocks this action.

Alternatively in your controller action you can overide the block by using the JsonRequestBehavior.AllowGet


hth

Andy

[im]

Im trying not to go through the alternative,

And from the Demo projects provided, there is a way to bypass this method (using POST and new Kendo Extensions) . Check the example (Paging - MVC Kendo UI). Where I have been able to get that to work, in that environment, however, since Im trying to port my existing Teletrik.MVC to the Kendo framework, to take advantage of mobile and a singular library, BOTH are included (meaning namespaces Teleric.Web.MVC.UI , and Kendo.Mvc.UI)  which may be the issue. I guess I need to wait, (but I usually dont and will try and locate it myself) but Telerik is aware, and we'll see what happens from there.

The Kendo side doesnt expose a property of .Type (atleast not that Im aware of)  as a settor... there is a .GetType though. )

Still a challenge,,, how are the 2 coupled that they override each other? I thought they were mutually exclusive, but perhaps not in entirety once combined together for migration.

[andrew]

Perhaps you are taking a slightly different approach but I managed with the following:

$(document).ready(function () {

    dataSource = new kendo.data.DataSource({

    transport: {

        create: {

            url: "@Url.Action("Create", "Permission")", //specify the URL which should create new records. This is the Create method of the HomeController.

            type: "POST" //use HTTP POST request as the default GET is not allowed for ASMX

        },

        read: {

            url: "@Url.Action("Read", "Permission")", //specify the URL which should return the records. This is the Read method of the HomeController.

            type: "POST", //use HTTP POST request as by default GET is not allowed by ASP.NET MVC

        },

        update: {

            url:"@Url.Action("Update", "Permission")", //specify the URL which should update the records. This is the Update method of the HomeController.

            type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC

        },

        destroy: {

            url: "@Url.Action("Destroy", "Permission")", //specify the URL which should destroy the records. This is the Destroy method of the HomeController.

            type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC

        },

        parameterMap: function(data, operation) {

            if (operation != "read") {

                // post the products so the ASP.NET DefaultModelBinder will understand them:

 

                var result = {};

 

                for (var i = 0; i < data.models.length; i++) {

                    var perm = data.models[i];

 

                    for (var member in perm) {

                        result["perms[" + i + "]." + member] = perm[member];

                    }

                }

 

                return result;

            }

        },

        batch: true, // enable batch editing - changes will be saved when the user clicks the "Save changes" button

        pageSize: 20,

        schema: {

            model: { // define the model of the data source. Required for validation and property types.

                id: "PermissionID",

                fields: {

                    PermissionID: { editable: false, nullable: true },

                    NetLogin: "User",

                    PayrollTitle: "Payroll",

                    FunctionTitle: "Function",

                    Level: { type: "number", validation: { required: true, min: 1} }

                }

            }

        }

    }});

And then my controller read action as an example:

[HttpPost]

        public ActionResult Read()

        {

            var perms = unitOfWork.PermissionRepository.Get()

                .Select(r => new { PermissionID = r.PermissionID, UserID = r.UserID, PayrollID = r.PayrollID, FunctionID = r.FunctionID, Level = r.Level, NetLogin = r.User.NetLogin, PayrollTitle = r.Payroll.Title, FunctionTitle = r.Function.Title });

 

           /* var perms = unitOfWork.PermissionRepository.Get()

                // Use a view model to avoid serializing internal Entity Framework properties as JSON

                .Select(p => new Permission

                {

                    PermissionID = p.PermissionID,

                    UserID = p.UserID,

                    PayrollID = p.PayrollID,

                    FunctionID = p.FunctionID,

                    Level = p.Level

                }).ToList();*/

 

            return Json(perms);

        }

 Commented out was the original method, but I need to consume some dynamic proxies.

I don't know if this is what you want but it certainly allows you to retrieve data using a post method.

hth

Andy

[im]

Andy's response was correct, however I just didn't read it properly.....

There is a .Type  for the  DataSource  MVC Wrapper Bindings using Kendo.

When creating the Grid using the  MVC Kendo Server wrappers the .DataSource property configurator can be used to change the default option of GET to Post using the .Type property.

Example :

@(
 Html.Kendo().Grid<Models.Product.ProductModel>()
    .Name("Products")
 .DataSource(ds => ds
        .Ajax()
        .Read(read => read.Action("_AjaxProducts", "Inventory")
        .Type(HttpVerbs.Post ) //Redefine the default "Get" request.
    )
)

This will change the default Get request to POST.

This is using server - side code generation for the clien (by telerik)t!!!.

Using purely client side AJAX code (generated by the programmer,. which is another option) is also outlined also by Andy with his example for the client side, programmer generated code for the same thing.)

[andrew]

Glad it helped!

Also out of interest, do you think the server side method you used above is best for performance or the client side example I gave?

Many thanks,

Andy

[im]

I think this may be a little off topic from the original thread. Contact me directly, or create a thread that is about the same thing, (just helps the community search)…. I will absolutely help if I can.

There are about 100 different ways to accomplish a certain task, just depends on what the requirements are, then personal preference. For most of mine I prefer server side for all logic, and requirements (allows me to change whatever and update immediately), let the client side deal with the UI and display functionality, [based on server side abilities   ;) ]

Every programmer has their own methods, but we can always learn from each other.

Does –

http://www.kendoui.com/forums/mvc/grid/kendo-ui-mvc-grid-equivalent-to-foreignkey-column-feature-of-telerik-grid.aspx

http://www.telerik.com/community/forums/aspnet-mvc/grid/foreign-key-column-binding.aspx

Assist at all? If not, let’s take it to another thread and try and fix the issue… I see the source you included, if I could get a reproducable project, and overall design idea I could help.

D

[andrew]

Hi Derek,

I have moved my question to another thread: http://www.kendoui.com/forums/ui/grid/client-side-binding-with-foreign-key-columns.aspx

I looked at those links you sent, the first one seemed to be towards the right direction but I'm guessing its more the server side approach right? This isn't nesscessarily a bad thing and I may be up for moving over to server side but I was struggling to get the code working at all and kept getting errors even when I tried to do Html.Kendo(), I read the thing about MVC.Web but was unable to get this to work.

Please post a reply at the thread above.

Many thanks,

Andy