Ich bin neu in jqGrid und benötige Hilfe beim Hinzufügen / Bearbeiten / Löschen von Formularen. Havent hat bisher alle relevanten Ressourcen gefunden. Mein Raster zeigt beim Hinzufügen / Bearbeiten ein Popup-Fenster an und füllt beim Klicken auf Bearbeiten auch Daten aus. Ich bin mir jedoch nicht sicher, welcher JavaScript-Code zum Aufrufen der Web-API zum POST / PUT / DELETE der Daten verwendet werden soll.

Details unten:

JSON-Daten:

[{"Id":1,"BankId":2,"BankName":"State bank","EmployeeId":2539,"EmployeeName":"John C.","JoiningDate":"2005-07-05T00:00:00","SalaryAmount":50000.0,"Comments":""},
{"Id":2,"BankId":2,"BankName":"State bank","EmployeeId":2232,"EmployeeName":"xxx","JoiningDate":"2001-12-23T00:00:00","SalaryAmount":30000.0,"Comments":"test"},
{"Id":3,"BankId":4,"BankName":"National bank","EmployeeId":2322,"EmployeeName":"yyyy","JoiningDate":"2002-09-23T00:00:00","SalaryAmount":90000.0,"Comments":""},
{"Id":4,"BankId":3,"BankName":"Punjab bank","EmployeeId":2432,"EmployeeName":"ppp","JoiningDate":"2003-01-31T00:00:00","SalaryAmount":60000.0,"Comments":" "},
{"Id":5,"BankId":1,"BankName":"Bank of Maharashtra","EmployeeId":2892,"EmployeeName":"zzz y.","JoiningDate":"2000-10-11T00:00:00","SalaryAmount":80000.0,"Comments":"test 2"}
]

Javascript für jqGrid:

    jQuery(document).ready(function () {
        jQuery("#employeeSalarysGrid").jqGrid({
            height: 250,
            url: 'http://localhost:50570/api/Test/GetEmployeeSalaries',
            mtype: "GET",
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            serializeGridData: function (postData) {
                return JSON.stringify(postData);
            },
            jsonReader: {
                root: function (obj) { return obj; },
                page: function (obj) { return 1; },
                total: function (obj) { return 1; },
                records: function (obj) { return obj.length; },
                id: "0",
                cell: "",
                repeatitems: false
            },
            datatype: "json",
            colNames: ['Id', 'Bank Name', 'Employee name', 'Joining date', 'Salary amount', 'Comments'],
            colModel: [
                { name: 'Id', align: "center", hidden:true},
            { name: 'BankName', align: "center", editable: true },
            { name: 'EmployeeName', align: "center", editable: true },
            { name: 'JoiningDate', align: "center", editable: true },
            { name: 'SalaryAmount', align: "center", editable: true },
            { name: 'Comments ', align: "center", editable: true }
            ],
            gridview: true,
            autoencode: true,
            ignorecase: true,
            loadonce: true,
            sortname: "InstallmentDate",
            sortorder: "asc",
            viewrecords: true,
            rowNum: 10,
            rowList: [10, 15, 20],
            pager: '#employeeSalarysPager',
            caption: "Employee Salary list"
        });

         $("#employeeSalarysGrid").jqGrid('navGrid', '#employeeSalarysPager',
            {
                add: true,
                edit: true,
                del: true
            },
            editOption,
            addOption,
            delOption);

        var editOption =
            {
                width: 400, height: 290, left: 20, top: 30,
                reloadAfterSubmit: false, jqModal: false, editCaption: "Edit Record",
                bSubmit: "Submit", bCancel: "Cancel", closeAfterEdit: true,
                mtype: "POST",
                url: 'http://localhost:50570/api/Test/'
            };

        var addOption = {
            width: 400, height: 290, left: 20, top: 30,
            reloadAfterSubmit: false, jqModal: false, addCaption: "Add Record",
            bSubmit: "Submit", bCancel: "Cancel",
            closeAfterAdd: true,
            mtype: "PUT",
            url: 'http://localhost:50570/api/Test/'
        };

        var delOption = {
            caption: "Delete",
            msg: "Delete selected record(s)?",
            bSubmit: "Delete", bCancel: "Cancel",
            mtype: "DELETE",
            url: 'http://localhost:50570/api/Test/'
        };

    });

Serverseitige API-Signaturen:

 public HttpResponseMessage Post(int id, DTOTest value)
 public HttpResponseMessage Put(DTOTest value)
 public HttpResponseMessage Delete(int id)

Bitte lassen Sie mich wissen, was mit dem Code nicht stimmt. Methoden werden nicht aufgerufen. Fehlt etwas im HTML-Code für jqGrid, ODER müssen die Signaturen im Servercode geändert werden? Freue mich auf ein paar Hinweise.

Danke vielmals,

Abhilash