如何表单数据的jqGrid(editUrl)数据传递给控制器在同一时间 [英] How to pass form data and jqGrid (editUrl) data to Controller at same time
问题描述
我有一个表单数据和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 +'< /选项>';
}
}
返回小号+< /选择>中;
}
}
},
{名: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 a>或 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屋!