如何表单数据的jqGrid(editUrl)数据传递给控制器​​在同一时间 [英] How to pass form data and jqGrid (editUrl) data to Controller at same time

查看:102
本文介绍了如何表单数据的jqGrid(editUrl)数据传递给控制器​​在同一时间的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个表单数据和jqGrid的各个位的asp.net MVC3应用程序。

当我在jqGrid的编辑一排,我需要发布网格数据以及一些形式的作品与editUrl控制器。

我可以张贴的jqGrid通过editUrl就好了。

编辑数据,我的控制器

有没有办法做到这一点?

林不知道如何发送其他表单元素以及如何接收他们在我的控制器。

任何帮助将大大AP preciated。

下面是我的jqGrid:

  $(#jqTable)。jqGrid的({
        //阿贾克斯相关配置
        网址:'@ Url.Action(_ CustomBinding)',
        数据类型:JSON
        MTYPE:POST,
        发布数据: {
            programID:函数(){返回$(#ProgramID选项:选择)VAL(); },
            buildID:函数(){返回$('#构建选项:选择)VAL(); }
        },        //指定的列名
        colNames:操作,集结号ID,集结号名称,组件类型,成本,订单,预算报告,合作伙伴请求,显示]        //配置列
        colModel:
        {名称:'myac',宽度:80,固定:真,排序:假的,调整:假的,格式化:'行动',formatoptions:{键:真正}},
        {名:AssemblyID键:真的,索引:AssemblyID,宽度:40,调整:左,编辑:假},
        {名的AssemblyName索引:的AssemblyName,宽度:100,排列:左,可编辑:真正的,edittype:'选择',
            editoptions:{
                dataUrl:@ Url.Action(_大会)',
                buildSelect:功能(数据){
                    变种响应= jQuery.parseJSON(数据);
                    变种S ='<选择>';
                    如果(响应和放大器;&安培; response.length){
                        对于(VAR I = 0,1 = response.length; I<升;我++){
                            变种RI =响应[I]
                            S + ='<期权价值=+ +里'>' + RI +'< /选项>';
                        }
                    }
                    返回小号+< /选择&g​​t;中;
                }
            }
        },
        {名:AssemblyTypeName索引:AssemblyTypeName,宽度:100,排列:左,编辑:假的,edittype:'选择'},
        {名:AssemblyCost索引:AssemblyCost,宽度:50,调整:左,格式:货币,可编辑:真正},
        {名:AssemblyOrder索引:AssemblyOrder,宽度:50,调整:左,可编辑:真正},
        {名:AddToBudgetReport索引:AddToBudgetReport,宽度:100,对齐:中心,格式:复选框,可编辑:真正的,edittype:复选框},
        {名:AddToPartnerRequest索引:AddToPartnerRequest,宽度:100,对齐:中心,格式:复选框,可编辑:真正的,edittype:复选框},
        {名秀,索引:秀,宽度:50,调整:中心,格式:复选框,可编辑:真正的,edittype:复选框'}],        // Grid总宽度和高度和格式
        //宽度:650,
        //高度:220,
        altrows:真实,        //分页
        // toppager:真实,
        寻呼机:$(#jqTablePager),
        的rowNum:10,
        rowList:[10,20,30],
        viewrecords:真,如果显示记录总数//指定
        emptyrecords:没有记录显示,        //默认排序
        sortname:AssemblyID
        排序顺序:ASC        //网格标题
        标题:建立模板,        //格命令功能
        editurl:@ Url.Action(_ AjaxUpdate)',
        onSelectRow:功能(AssemblyID){
            如果(AssemblyID&安培;&安培;!AssemblyID == lastsel){
                $('#jqTable')的jqGrid('restoreRow',lastsel)。
                $(#jqTable)的jqGrid('editRow',AssemblyID,真)。
                lastsel = AssemblyID;
            }
        }
    })。navGrid(#jqTablePager,
        {刷新:假的,加:假的,编辑:假的,德尔:假},
            {} //为编辑设置
            {} //为附加设置
            {} //为删除设置
            {SOPT:CN]} //搜索选项。一些选项可以在列级设置
     );


解决方案

我看你使用已 programID buildID 定义函数的性质。该功能将每个请求获取数据网格中被调用。以同样的方式,你可以使用 inlineData extraparam editRow <参数/ A>您明确地打电话给你的 onSelectRow 回调内部。

尝试调用具有以下jqGrid的选项演示

inlineData:{
    myParam:功能(){
        警报(inlineData呼吁!!!);
        返回确定;
    }
},
onSelectRow:功能(ID){
    如果(ID&安培;&安培;!ID == lastSel){
        $(本).jqGrid('restoreRow',lastSel);
        $(本).jqGrid('editRow,ID,真实,NULL,NULL,NULL,{
            myNextParam:功能(){
                警报('editRow'的extraparam呼吁!!!);
                回到精;
            }
        });
        lastSel = ID;
    }
}

您将看到两个提示您是否保存编辑行的数据。在我的演示中,我使用 editurl:myDummyUrl这对服务器端没有code,你会看到一个错误的结束,但如果检查HTTP交通(相对于提琴手或的萤火),你会看到下面的其他参数将被发送到 editurl

myParam = OK功放&; myNextParam =细

我觉得这是你所需要的。

  inlineData:{}

针对前获得工作做工精细的推移而编辑到控制器。
但在删除情况下,如何让事件像以前一样通过控制控制器使JSON,点击删除了。

I have an asp.net MVC3 app with various bits of form data and a jqGrid.

When I edit a row in the jqGrid I need to post the grid data as well as some of the form pieces to the editUrl controller.

I can post the jqGrid edited data to my controller through the editUrl just fine.

Is there a way to do this?

Im not sure how to send the other form elements and how to receive them in my controller.

Any help will be greatly appreciated.

Below is my jqGrid:

    $("#jqTable").jqGrid({
        // Ajax related configurations
        url: '@Url.Action("_CustomBinding")',
        datatype: "json",
        mtype: "POST",
        postData: {
            programID: function () { return $("#ProgramID option:selected").val(); },
            buildID: function () { return $('#Builds option:selected').val(); }
        },

        // Specify the column names
        colNames: ["Actions", "Assembly ID", "Assembly Name", "Assembly Type", "Cost", "Order", "Budget Report", "Partner Request", "Display"],

        // Configure the columns
        colModel: [
        { name: 'myac', width: 80, fixed: true, sortable: false, resize: false, formatter: 'actions', formatoptions: { keys: true} },
        { name: "AssemblyID", key: true, index: "AssemblyID", width: 40, align: "left", editable: false },
        { name: "AssemblyName", index: "AssemblyName", width: 100, align: "left", editable: true, edittype: 'select',
            editoptions: {
                dataUrl: '@Url.Action("_Assemblies")',
                buildSelect: function (data) {
                    var response = jQuery.parseJSON(data);
                    var s = '<select>';
                    if (response && response.length) {
                        for (var i = 0, l = response.length; i < l; i++) {
                            var ri = response[i];
                            s += '<option value="' + ri + '">' + ri + '</option>';
                        }
                    }
                    return s + "</select>";
                }
            }
        },
        { name: "AssemblyTypeName", index: "AssemblyTypeName", width: 100, align: "left", editable: false, edittype: 'select' },
        { name: "AssemblyCost", index: "AssemblyCost", width: 50, align: "left", formatter: "currency", editable: true },
        { name: "AssemblyOrder", index: "AssemblyOrder", width: 50, align: "left", editable: true },
        { name: "AddToBudgetReport", index: "AddToBudgetReport", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' },
        { name: "AddToPartnerRequest", index: "AddToPartnerRequest", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' },
        { name: "Show", index: "Show", width: 50, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox'}],

        // Grid total width and height and formatting
        //width: 650,
        //height: 220,
        altrows: true,

        // Paging
        //toppager: true,
        pager: $("#jqTablePager"),
        rowNum: 10,
        rowList: [10, 20, 30],
        viewrecords: true, // Specify if "total number of records" is displayed
        emptyrecords: 'No records to display',

        // Default sorting
        sortname: "AssemblyID",
        sortorder: "asc",

        // Grid caption
        caption: "Build Template",

        // grid command functionality
        editurl: '@Url.Action("_AjaxUpdate")',
        onSelectRow: function (AssemblyID) {
            if (AssemblyID && AssemblyID !== lastsel) {
                $('#jqTable').jqGrid('restoreRow', lastsel);
                $("#jqTable").jqGrid('editRow', AssemblyID, true);
                lastsel = AssemblyID;
            }
        }
    }).navGrid("#jqTablePager",
        { refresh: false, add: false, edit: false, del: false },
            {}, // settings for edit
            {}, // settings for add
            {}, // settings for delete
            {sopt: ["cn"]} // Search options. Some options can be set on column level
     );

解决方案

I see you use already programID and buildID properties defined as functions. The functions will be called during every request to get the data for the grid. In the same way you can use inlineData or extraparam parameter of the editRow which you call explicitly inside of your onSelectRow callback.

Try to call the demo which has the following jqGrid options:

inlineData: {
    myParam: function () {
        alert("inlineData is calling!!!");
        return "OK";
    }
},
onSelectRow: function (id) {
    if (id && id !== lastSel) {
        $(this).jqGrid('restoreRow', lastSel);
        $(this).jqGrid('editRow', id, true, null, null, null, {
            myNextParam: function () {
                alert("extraparam of 'editRow' is calling!!!");
                return "Fine";
            }
        });
        lastSel = id;
    }
}

You will see two alerts if you would save the data of the editing row. In my demo I used editurl: 'myDummyUrl' which has no code on the server side and you will see an error at the end, but if you examine the HTTP traffic (with respect of Fiddler or Firebug) you will see that the following additional parameters will be send to the editurl:

myParam=OK&myNextParam=Fine

I think it is what you need.

inlineData:{}

is working fine for getting work before goes to controller while editing. But in case of delete how to get event like before to pass control to controller to make json , after click on delete.

这篇关于如何表单数据的jqGrid(editUrl)数据传递给控制器​​在同一时间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆