重新加载数据和afterSubmit,aftersavefunc函数在内联RowAdd或RowSave上使用MVC在jqGrid中不起作用

时间:2013-01-09 20:53:57

标签: jquery asp.net-mvc-3 jqgrid inline-editing

我正在使用jqGrid并进行内联编辑和行添加。我正在使用J#和MVC在客户端设置所有内容,使用C#作为服务器端代码。除了内联保存和添加行函数从服务器返回外,一切似乎都能正常工作。如果保存失败或错误输出,客户端似乎仍然不知道响应。我设置了一些基本函数来处理afterSubmit,afterSave等,但是它工作的唯一实例是刷新操作。每当我编辑或添加一行时,响应似乎都没有回来,网格也不会刷新。

我在这上面找到的所有东西都是网格的基本设置来处理这个问题,但我担心我可能没有回复正确的答案或者我的某些功能设置不正确。 我已经在Trirand的这里和以上的论坛上阅读了wiki文档和几篇帖子,但是在信息方面存在差距,这使我遇到了同样的问题。

要清楚编辑和添加工作正常,手动刷新等也是如此。唯一的问题是从服务器返回响应并在编辑完成后重新加载网格中的数据。

这是我的网格和功能相关的客户端代码:

我的AfterFunctions:

var actionAfterSubmit = function (response, postdata) {
    var res = response.responseText;
    alert('In actionAfterSubmit');
    return [true, ''];
};

var actionbeforeSubmit = function (response, postdata) {
    //var res = response.responseText;
    alert('In beforeSubmit');
    return true;
};

var actionAfterSave = function (rowid, response) {
    alert('In actionAfterSave');
};

var actionErrorFunc = function (rowid, response) {
    alert('In actionErrorFunc');
};

var actionSuccessFunc = function (response) {
    alert('In actionSuccessFunc');
    return true;

};      

我的网格:

jQuery("#list").jqGrid({
        url: ServiceURL + '/Controller/GetDataAction', //URL that loads data including search functionality
        datatype: 'json',
        mtype: 'GET',
        postData: { tableName: t_Name },
        editData: { tableName: t_Name },
        colModel: col_model, //col_model is passed as parameter
        pager: jQuery('#pager'), //sets pager name
        rowNum: 20, //default number of rows
        rowList: [10, 20, 50, 100], //number of row options
        sortname: 'id', //sorting columns
        sortorder: "asc", //sorting order
        viewrecords: true,
        altRows: true, //enables different styling for alternate rows
        altclass: 'myAltRowClass', //Alternate row styling
        width: "100%",
        height: "100%",
        caption: '',
        navigator: true, //enables navigator toolbar
        multipleSearch: true, //enables multiple search features
        multipleGroup: true, //enables grouping in multiple search
        editurl: ServiceURL + '/Controller/GridSaveAction' //URL that handles edit (insert & update) }); var editOptions = {
        width: 400,
        height: 'auto',
        addCaption: "Add Record",
        editCaption: "Edit Record",
        bSubmit: "Submit",
        bCancel: "Cancel",
        bClose: "Close",
        saveData: "Data has been changed!",
        bYes: "Yes",
        bNo: "No",
        bExit: "Cancel",
        recreateForm: true,
        url: ServiceURL + '/ICMP/MapTable/GridSave/',
        reloadAfterSubmit: true,
        closeOnEscape: true,
        closeAfterEdit: true,
        viewPagerButtons: false,
        afterSubmit: actionAfterSubmit,
        afetrsavefunc: actionAfterSave,
        reloadAfterSubmit: true,
        datatype: 'json'

    };

我的参数和其他网格设置:

var addOptions = {
        afterSubmit: actionAfterSubmit,
        aftersavefunc: actionAfterSave,
        errorfunc: actionErrorFunc,
        successfunc: actionSuccessFunc,
        afterComplete: refreshTableAfterAddOrEdit,
        reloadAfterSubmit: true

    };  

var addParameters = {
        useFormatter: true,
        defaultValue: "",
        useDefValues: true,
        initdata: { tableName: t_Name },
        addRowParams: editOptions,
        reloadAfterSubmit: true  };      

var inlineParameters = {
        edit: false,
        editicon: "ui-icon-pencil",
        save: false,
        saveicon: "ui-icon-disk",
        cancel: false,
        cancelicon: "ui-icon-cancel",
        add: true,
        addicon: "ui-icon-plus",
        addParams: addParameters,
        editParams: editOptions,
        reloadAfterSubmit: true,
        restoreAfterSelect: false            
    };


jQuery("#list").jqGrid('navGrid', '#pager', { view: true, edit: true, add: false, del: false, refresh: true, search: true }, editOptions, addParameters, {}, searchOptions, viewOptions);

jQuery("#list").jqGrid('inlineNav', '#pager', inlineParameters);

jQuery("#list").jqGrid('filterToolbar', {
        stringResult: true, searchOnEnter: false, defaultSearch: "cn",
        beforeSearch: function() {
            $("#list").setGridParam({ postData: { _search: true, tableName: t_Name } });
        }    
    });

jQuery("#list").jqGrid('addRow', {
        useFormatter: true,
        useDefValues: true,
        initdata: { tableName: t_Name },
        addRowParams: addParameters
    });

这是我的控制器

public JsonResult GridSaveAction(string id, jqGridMapTableModel MapRecord, string tableName, FormCollection formCollection, string someVal)
    {
        //Does some things
        try
        {                
          //Sets up update 
          success = DataAccessObject.Update(Query, myParameters); //Runs the update and returns true if success or false if it failed

        }
        catch (Exception ex) {
             return Json(ex.Message);    
        } 
        return Json(success ? "Operation succesful." : "Operation failed.");
    }

我一直在尝试我能找到的一切,但没有任何作用,而且我认为我的代码的某些部分是错误的。

非常感谢任何帮助!

2 个答案:

答案 0 :(得分:2)

终于找到了拼图的缺失部分!! 使用内联编辑和操作按钮列时, onSuccess onError afterSave 函数必须硬编码到网格的列模型中。

在我的情况下,我使用网格中的“操作”列来使用按钮来容纳编辑功能。这是带有铅笔图标的按钮,可以进行内联编辑。

此列使用formatter = "actions"并使用EditActionIconsColumn = true。 我不得不定义

formatoptions ={
afterSave: function (rowid) { $("#grid").trigger("reloadGrid"); }, 
...
}

所有这些仅在我的“操作”列的列模型中定义。

jQGrid脚本在通过这些按钮进行内联编辑时仅使用这些方法,并忽略您可能已设置此功能的任何其他位置。

就是这样。没有其他复杂的代码,也没有内联保存功能的手动编码。 这里可以实现任何其他代码以及任何其他功能,如onError或onSuccess。

答案 1 :(得分:0)

当您处理返回Json消息的异常时,您的“actionErrorFunc”未被调用。尝试抛出异常,看看是否会触发该函数。

以下是一个示例:

private ActionResult ReturnJson(String msg)
{
    Response.StatusCode = (Int32)HttpStatusCode.BadRequest;
    return Content(msg, MediaTypeNames.Text.Plain);
}

public ActionResult Delete(Int32 id)
{
    string success = "ok";
    try
    {
        //code to delete         
    }
    catch (Exception ex)
    {
        return ReturnJson(ex.Message);
    }
    return Json(success);
}