Create a custom action that extends the 'create' action but with different ajax call

rodegard

Hi,

I have an editor form to allow users to create new badges. I need to now add functionality to replace an existing badge, so I need the create badges form but with a modified action to make a different ajax call. The Replace badge sends an existing badge number based on a selected record in the table.

here is the code I have for displaying the 'Replace' button, which when clicked does display the proper form with an updated title. But when I click the 'Replace' button to submit the form no form data is not submitted with my request. how do I get the form data to submit without calling the default editors 'create' buttons ajax code?

            badgesDataTable = $('#badges-table').DataTable({
                "rowId": "id",
                "pageLength": 25,
                buttons: {
                    buttons: [
                        {
                            "extend": "create",
                            "editor": badgesEditor,
                            formButtons: [
                                'Create',
                                {
                                    label: 'Cancel',
                                    fn: function() { this.close(); }
                                }
                            ],
                            className: "hidden-xs btn-primary pull-left"
                        },
                        {
                            "extend": "create",
                            "text": "Replace",
                            "editor": badgesEditor,
                            formTitle: function () {
                                var rowData = badgesDataTable.row({ selected: true }).data();
                                var title = "Replace Badge Number " + rowData.badgeNumber;
                                return title;
                            },
                            formButtons: [
                                {
                                    label: 'Replace',
                                    fn: function () {
                                        var rowData = badgesDataTable.row({ selected: true }).data();

                                        $.ajax({
                                            type: "POST",
                                            url: '@Url.Action("Create", "DriverDetails")?modelType=ReplaceBadge:' + rowData.badgeNumber,
                                            headers: { "RequestVerificationToken": t }
                                        })
                                    }
                                },
                                {
                                    label: 'Cancel',
                                    fn: function () { this.close(); }
                                }
                            ],
                            className: "hidden-xs btn-primary pull-left",
                            "enabled": false
                        },

with the above code when the base controller calls the following code I get an error because Request.Form is not defined

        public T ConvertToModel<T>(HttpRequest request)
            where T : BaseModel, new()
        {
            var data = Request.Form.ToList();

Error is : 'Request.Form' threw an exception of type 'System.InvalidOperationException'

Thanks in advance,

RobO

colin

You could create another Editor instance with the different Ajax setup inside it, and reference that setup on line 21, I believe that would allow you to do what you want.

Colin

rodegard

I guess sometimes you are just too close to see the obvious...would be nice, and cleaner, if you could create custom actions and build the calls right into the editor, instead of just defaults; create, edit, delete, etc.

Thanks,

RobO

colin

You can do that. The Buttons library that it uses can have action code defined, where you can do any operation. For example here, it's duplicating rows from one table to another - so you're not limited to defaults,

Colin

rodegard

Hi Colin,

Thanks for the help. This example does not solve the issue. I need to call a different ajax call. With this example it still calls the base editors ajax call.

Workflow:
1. User selects and existing badge and presses Replace
2. Create form is displayed with a modified form title
3. User clicks Replace button
4. Separate action code is triggered (not the create on the editor) that submits the form data along with the ajax call.

The code I submitted does everything except does not submit the for data with ajax call. In you example no form is displayed and the default ajax of the create form is triggered. If I follow your code correctly.

RobO

rodegard

I solved this problem by adding an additional field. replaceBadgeId, to the editor and when the user selects the Replace button it sets this value and then display the form using badgeEditor.submit(). Then in my controller I look to see if this value is set. If it is set I call the ReplaceBadge api otherwise I call the CreateBadge api.

Thanks,

RobO