Ajax call have post data but controller get's empty model

5 posts, 0 answers
  1. Krunal
    Krunal avatar
    13 posts
    Member since:
    Mar 2014

    Posted 04 Apr 2014 Link to this post

    HI,,

    i am try to use grid view with inline editing function.

    now i have write this code:-- on cshtml.

    <script>

                    $(document).ready(function () {

                        $("#countryzone-grid").kendoGrid({

                            dataSource: {

                                type: "json",

                                transport: {

                                    read: {

                                        url: "@Html.Raw(Url.Action("ParticipatingCountry", "Program", new {id = Model.Id } ))",

                                        type: "POST",

                                        dataType: "json",

                                        contentType: "application/json"

                                    },

                                    create: {

                                        url: "@Html.Raw(Url.Action("EditCountries", "Program"))",

                                        type: "POST",

                                        dataType: "json"

                                    },

                                    update: {

                                        url:"@Html.Raw(Url.Action("SettingUpdate", "Setting"))",

                                        type: "POST",

                                        dataType: "json"

                                    },

                                    destroy: {

                                        url: "@Html.Raw(Url.Action("SettingDelete", "Setting"))",

                                        type: "POST",

                                        dataType: "json"

                                    },

                                    parameterMap: function(data, operation) {

                                        if (operation != "read") {

                                            return data;

                                        } else {

                                            //for some reasons only such "Filter" data be parsed

                                            return JSON.stringify(data);

                                        }

                                    }

                                },

                                schema: {

                                    data: "Data",

                                    total: "Total",

                                    errors: "Errors",

                                    model: {

                                        id: "Id",

                                        fields: {

                                            CountryId: { editable: true, type: "number" },

                                            CountryName: { editable: true, type: "string"},

                                            PointsValue: { editable: true, type: "number"},

                                            Id: { editable: false, type: "number" },

                                            ProgramId: { editable: false, type: "number" }

                                        }

                                    }

                                },

                                requestEnd: function (e) {

                                    if (e.type == "create" || e.type == "update") {

                                        this.read();

                                    }

                                },

                                error: function (e) {

                                    display_kendoui_grid_error(e);

                                    // Cancel the changes

                                    this.cancelChanges();

                                },

                                pageSize: 5,

                                serverPaging: true,

                                serverFiltering: true,

                                serverSorting: true

                            },

                            pageable: {

                                refresh: true

                            },

                            sortable: true,

                            toolbar: ["create"],

                            editable: {

                                confirmation: false,

                                mode: "inline"

                            },

                            scrollable: false,

                            columns:[{

                                field: "CountryId",

                                title: "Admin.Program.participatingCountryName",

                                editor: countryDropDownEditor,

                                template: "#:Store#"

                            },{

                                field: "PointsValue",

                                title: "Admin.Program.PointsValue"

                            },{

                                command: ["edit", "destroy"], title: "",width: "200px"

                            }]    

                        });

                    });

                    

                    

                    function countryDropDownEditor(container, options) {

                        $('<input required data-text-field="Name" data-value-field="Id" data-bind="value:CountryId"/>')

                            .appendTo(container)

                            .kendoDropDownList({

                                autoBind: false,

                                dataTextField: "Name",

                                dataValueField: "Id",

                                dataSource: {

                                    type: "json",

                                    transport: {

                                        read: {

                                            dataType: "json",

                                            type: 'POST',

                                            url:
    "@Html.Raw(Url.Action("DropDownListCountries", "Program", new {id =
    Model.ClientId } ))"

                            }

                        }

                    }

                });

            }

                </script>

    by this code when i click on update button there is an ajax call

    this is data of post tab in ajax call ( view on browser by firebug)

    CountryId  0
    CountryName
    Id  0
    PointsValue 2
    ProgramId  0

    there is data 0 and 2

    on controlller side my code is

    [HttpPost]

            public ActionResult EditCountries([Bind(Exclude = "Id")] ParticipatingCountryModel model)     <== Here i put break point 

            {

                return null;
            }

    by break point i see that there is ajax call come means action call but there is an empty model ,,, alll values are 0, there is an value 2 but there is 0 why?

    is am i doing wrong?

    Please advice how to do?

    Regard,
    vinit
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 08 Apr 2014 Link to this post

    Hi Vinit,

    Basically you should use custom parameterMap function which to format the data in a way that can be understand by the MVC default ModelBinder. That why In current case I would suggest to use the Grid wrapper for ASP.NET MVC as it supports (out of the box) CRUD operations with MVC Controller:
    For more information about the MVC wrappers you can check the following help articles:
    Regards,
    Vladimir Iliev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Stephan
    Stephan avatar
    6 posts
    Member since:
    Dec 2010

    Posted 24 Nov 2015 in reply to Vladimir Iliev Link to this post

    Hello Vladimir,

    Ajax enabled grid with the grid MVC wrapper are using async calls. Is there an option to switch to non-async Ajax calls?

    I'm currently tried something comparable to Krunal, using javascript dataource definition but I don't know how to setup the parameterMap function which works with a MVC controller create/update/destroy method. May you give an example for the update method ?

    Yours

    Stephan

  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 26 Nov 2015 Link to this post

    Hi Stephan,

    Please check the answers of your questions below:

    1) The topic is already discussed in the following thread at StackOverflow:

    2) Such examples are available in the following repository at GitHub:

    Regards,
    Vladimir Iliev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Stephan
    Stephan avatar
    6 posts
    Member since:
    Dec 2010

    Posted 26 Nov 2015 in reply to Vladimir Iliev Link to this post

    Hello Vladimir,

    thanks for the links. Using these links, I was able to use javascript based datasource definition together with MVC controller methods. The datasource in my case looks like this:

     var l_dataSource = new kendo.data.DataSource({
    transport: {

    read: {
    async: false,
    url: function (data) {
    return "/Home/SelectedCriteria_Read";
    },
    dataType: "json",
    method: "GET",
    },
    create: {
    async: false,
    url: function (data) {
    return "/Home/SelectedCriteria_Create";
    },
    dataType: "json",
    method: "POST",
    },
    update: {
    async: false,
    url: function (data) {
    return "/Home/SelectedCriteria_Update";
    },
    dataType: "json",
    method: "POST",
    },
    destroy: {
    async: false,
    url: function (data) {
    return "/Home/SelectedCriteria_Destroy";
    },
    dataType: "json",
    method: "POST",
    }
    },
    schema: {
    model: {
    id: "Id",
    fields: {
    Id: { editable: false, nullable: false, type: "Number" },
    Columnname: { editable: false, nullable: false, type: "String" },
    Title: { editable: true, type: "String" },
    Hidden: { editable: false, type: "Boolean" },
    Singlevalue: { editable: true, type: "String" },
    Datatype: { editable: false , type: "String" },
    }
    },
    data: "Data",
    total: "Total",
    errors: function (response) {
    return response.error;
    },
    },
    error: function (e) {
    console.log(e.errors); // displays "Invalid query"
    },

    pageSize: 10000,
    batch: true,
    });

     

    The MVC CRUD controller methods are defined like the following pattern:

    public JsonResult SelectedCriteria_Read([DataSourceRequest]DataSourceRequest request)
    {

    ... some logic...
        return Json([List<your class>].ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

    }

    public JsonResult SelectedCriteria_Update([DataSourceRequest]DataSourceRequest request, [Bind(Prefix = "models")] List<your class> shc)
    { ... some logic ...
    return Json([List<your class>].ToDataSourceResult(request, ModelState));
    }

    public JsonResult SelectedCriteria_Create([DataSourceRequest]DataSourceRequest request, [Bind(Prefix = "models")] List<your class> shc)
    { ... some logic ...
    return Json([List<your class>].ToDataSourceResult(request, ModelState));
    }

    public JsonResult SelectedCriteria_Destroy([DataSourceRequest]DataSourceRequest request, [Bind(Prefix = "models")] List<your class> shc)
    { ... some logic ...
    return Json([List<your class>].ToDataSourceResult(request, ModelState));
    }

     

    Now, this works for me.

Back to Top
UI for ASP.NET MVC is VS 2017 Ready