更新和删除在jqGrid中不起作用 [英] Update and Delete does not work in jqGrid

问题描述

我正在研究Web api项目，我想用CRUD操作实现网格. 这些是我的网络api方法:

I am working on web api project and I want implement grid with CRUD operations. These are my web api methods:

[HttpGet]
public HttpResponseMessage GetAllPosting() {}

[HttpGet]
public HttpResponseMessage GetPostingById(int Id) {}

[HttpPost]
public HttpResponseMessage Post([FromBody] vGeneralLedger item) {}

[HttpPut]
public HttpResponseMessage Put(int id, vGeneralLedger item) {}

[HttpDelete]
public void Delete(int id) {}

在我的视图页面中，我被定义为jQgrid:

In my view page, I am defined jQgrid:

jQuery("#generalLedgerGrid").jqGrid({
...
...
});

function updateDialog(action) {
    return {
        url: API_URL, // 'http://localhost:xxxxx/api/GeneralLedgerDetails/'
        closeAfterAdd: true,
        closeAfterEdit: true,
        afterShowForm: function (formId) { },
        jqmodal: true,
        afterSubmit: function (params) {
            var list = $("#generalLedgerGrid");
            var selectedRow = list.getGridParam("selrow");
            rowData = list.getRowData(selectedRow);
            params.url += rowData.Id;
            params.mtype = action;
        },
        bSubmit: "Submit",
        bCancel: "Cancel",
        width: "400",
        reloadAfterSubmit: true
    };
}

jQuery("#generalLedgerGrid").jqGrid('navGrid', '#generalLedgersPager',
    { edit: true, add: true, del: true },
    updateDialog('PUT'),
    updateDialog('POST'),
    updateDialog('DELETE')
);

当我运行应用程序时，将在页面(视图)中显示网格以及所有数据.但是，如果我要编辑行网格或删除行，则始终将其重定向(当我在API方法中添加断点时)到

When I run application, grid is displayed with all data in the page (view). But, If I want edit row grid, or delete, then always be redirected (when I put breakpoints to my API methods) to

[HttpPost]
public HttpResponseMessage Post([FromBody] vGeneralLedger item)

以及编辑和删除"功能无法正常工作.还有另一个问题:当我想在网格中添加新记录(在打开的对话框中)并按保存按钮时，我的对话框仍处于打开状态，而当我关闭对话框时，必须重新加载要显示的最新记录页面.

and Edit and Delete functionality not working properly. And there is one more problem: When I want add new records in grid (in opened dialog) and press Save button, my dialog is still open, and when i close the dialog, i must reload page that latest record to be displayed.

而且，我已经使用了本教程: http://techbrij.com/add-edit-delete-jqgrid -asp-net-web-api

And, I have used this tutorial: http://techbrij.com/add-edit-delete-jqgrid-asp-net-web-api

更新: 这是我当前在网格中的数据行(我只是发布图片): 在此处输入图片描述

UPDATE: This is my currently data rows in grid (I just post picture): enter image description here

更新: 这是GetAllPosting方法

UPDATE: This is GetAllPosting method

    [HttpGet]
    public HttpResponseMessage GetAllPosting()
    {
        try
        {
            var generalLedgers = _db.genLedgers.Where(x => x.Status == true).Select(a => new
            {
                Id = a.Id,
                finNaturalBusinessYearId = a.finNaturalBusinessYearId,
                finDocumentTypeId = a.finDocumentTypeId,
                AccountNo = a.AccountNo,
                PostingDate = a.PostingDate,
                MaturityDate = a.MaturityDate,
                AmountDebit = a.AmountDebit,
                AmountCredit = a.AmountCredit,
                Balance = a.Balance,
                Description = a.Description,
                DateCreated = DateTime.Now,
                UserId = 1
            });

            var formatter = new JsonMediaTypeFormatter();
            var json = formatter.SerializerSettings;
            json.NullValueHandling = Newtonsoft.Json.NullValueHandling.Ignore;
            json.Formatting = Newtonsoft.Json.Formatting.Indented;

            return Request.CreateResponse(HttpStatusCode.OK, generalLedgers, formatter);
        }
        catch (Exception ex)
        {

            throw;
        }
    }

select主体中的Linq语句与我的实体模型类的属性相对应.

Linq statement in select body correspond with my entity model class properties.

这是我的网格的定义:

更新:

jQuery("#generalLedgerGrid").jqGrid({
        height: 290,
        width: 1200,
        url: API_URL,
        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,
            celledit: false
        },
        colNames: ['Id', 'NB Year Id', 'Document Type Id', 'Account No', 'Posting Date', 'Maturity Date', 'Description', 'Total Debit', 'Total Credit', 'Balance'],
        colModel: [
            { name: 'Id', align: "center", editable: false, width: "45px" },
        { name: 'finNaturalBusinessYearId', align: "center", editable: true, width: "75px" },
        { name: 'finDocumentTypeId', align: "center", editable: true },
        { name: 'AccountNo', align: "center", editable: true },
        {
            name: 'PostingDate', align: "center", editable: true
        },
        { name: 'MaturityDate', align: "center", editable: true },
        { name: 'Description', align: "center", editable: true },
        { name: 'AmountDebit', align: "center", editable: true },
        { name: 'AmountCredit', align: "center", editable: true },
        { name: 'Balance', align: "center", editable: true }
        ],
        gridview: true,
        autoencode: true,
        ignorecase: true,
        reloadGridOptions: {fromServer: true},
        sortname: "InstallmentDate",
        sortorder: "asc",
        viewrecords: true,
        rowNum: 10,
        rowList: [10, 15, 20],
        pager: '#generalLedgersPager',
        caption: "General Ledger Posting List"
    });

更新: 这是我从Web api控制器中删除的方法:

UPDATE: This is my Delete method from web api controller:

    [HttpDelete]
    public void Delete(int id)
    {
        finGeneralLedger item = _db.genLedgers.Find(id);
        if (item == null)
        {
            throw new HttpResponseException(HttpStatusCode.NotFound);
        }
        item.Status = false;
        item.DateUpdated = DateTime.Now;
        item.UserId = 1;

        _db.SaveChanges();
    }

推荐答案

代码中的主要错误由用法afterSubmit组成.回调将在之后使用，响应将从服务器获取.我想您只是想使用另一个回调onclickSubmit，但是您使用了错误的回调.

The main error in your code consist from the usage afterSubmit. The callback will be used after the response will be get from the server. I suppose that you just wanted to use another callback onclickSubmit, but you used the wrong one.

添加/编辑的正确onclickSubmit回调可能如下

The correct onclickSubmit callback for Add/Edit could be the following

onclickSubmit: function (options, postdata, formOper) {
    options.url = API_URL + "/" + encodeURIComponent(postdata[this.id + "_id"]);
    options.mtype = formOper === "add" ? "POST" : "PUT";
}

删除"对话框的选项:

{
    mtype: "DELETE",
    serializeDelData: function () {
        return ""; // the body MUST be empty in DELETE HTTP requests
    },
    onclickSubmit: function (options, postdata) {
        options.url = API_URL + "/" + encodeURIComponent(postdata);
    }
}

如果API_URL的值已在字符串末尾包含/，则应在上面的代码片段中替换API_URL + "/" to API_URL.

If the value of API_URL already contains / at the end of the string, then you should replace API_URL + "/" to API_URL in the code fragments above.

这篇关于更新和删除在jqGrid中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！