Post edited 22:51 – 17/08/2012 by rre9518
Post edited 22:54 – 17/08/2012 by rre9518
Post edited 22:56 – 17/08/2012 by rre9518
Post edited 15:14 – 18/08/2012 by rre9518
Post edited 19:02 – 18/08/2012 by rre9518
Post edited 19:05 – 18/08/2012 by rre9518
What I'm looking for is a working example of jqGrid file upload from the add/edit form in an Microsoft MVC C# application.
This is what I've tried, (among others) and I always end up with a null file passed back to the controller.
MVC3 app using :
AjaxFileUpload.js
jQuery-1.7.2
jqGrid-1.4.4
I apologize for the formatting. If there's a way to retain indentations please tell me. I'll resubmit.
The AfterSubmit for the "Add function" is called but kicks out with ret undefined.
Occuring at line 7532:
if( ret[0] && $.isFunction(rp_ge[$t.p.id].afterSubmit) ) {
ret = rp_ge[$t.p.id].afterSubmit.call($t, data,postdata);
}
ret in undefined?
I'm not sure what the response should be from the CreateAttachmentRecord, which is used in the data argument. . I'm sending:{"id":"fileToUpload", "success"=true}. I suspect the data field is wrong, but don't know what I should have there.
JQUERY CODE:
$(document).ready(function () {
'use strict';
jQuery("#table").jqGrid({
datatype: "local",
height: 250,
editurl: "Home/CreateAttachmentRecord",
colNames:['fileToUpload','Title','Description','Control Class','Added By'],
colModel:[
{
name: 'fileToUpload',
index: 'Attachment',
align: 'left',
editable: true,
edittype: 'file',
editoptions: {
enctype: "multipart/form-data"
},
width: 210,
search: false,
editrules:{required:true}
},
{name:'Title',index:'Title', width:50, editrules:{required:false}, editable:true, sorttype:"string"},
{name:'Description',index:'Description', width:100, editrules:{ required:true}, editable:true,sorttype:"string"},
{name:'ControlClass',index:'ControlClass', width:10, editrules:{ required:true}, editable:true, sorttype:"string"},
{name:'AddedBy',index:'AddedBy', width:50, editrules:{required:true}, editable:true,sorttype:"string"},
],
multiselect: true,
caption: "Attachments for: [CR Name Here]",
rowNum:10,
rowList:[10,20,30],
pager: '#pager',
sortname: 'Filename',
viewrecords: true,
sortorder: "desc",
});
var mydata = [
@foreach (var attach in Model) {
@Html.Raw("{");
@Html.Raw( string.Format(
"fileToUpload: "{0}",Title: "{1}",Description: "{2}",ControlClass: "{3}",AddedBy: "{4}" ",
attach.Filename,
attach.Title,
attach.Description,
attach.ControlClass,
attach.AddedByName
)
)
@Html.Raw("},n");
}
];
for(var i=0;i<mydata.length;i++) {
jQuery('#table').jqGrid('addRowData',i+1,mydata[i]);
};
jQuery("#table").jqGrid('navGrid','#pager',
{del:true,add:true,edit:true},
{ jqModal:true,closeAfterEdit: true,recreateForm:true,onInitializeForm : function(formid){ //editoptions
$(formid).attr('method','POST');
$(formid).attr('action','');
$(formid).attr('enctype','multipart/form-data');
},
afterSubmit : function(response, postdata){
$.ajaxFileUpload({
url: 'Home/UploadFile',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'JSON',
success: function (data, status) {
alert("Upload Complete.");
}
});
}
},
{jqModal:true,closeAfterAdd: true,recreateForm:true,onInitializeForm : function(formid){
$(formid).attr('method','POST');
$(formid).attr('action','');
$(formid).attr('enctype','multipart/form-data');
},
afterSubmit : function(response, postdata){
$.ajaxFileUpload({
url: 'Home/UploadFile',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'JSON',
success: function (data, status) {
alert("Upload Complete.");
}
});
}
}
);
CONTROLLER CODE:
HttpPost]
public ActionResult UploadFile(HttpPostedFileBase file)
{
string foldername = "~/App_data/" + "5397″;
if (!Directory.Exists(Server.MapPath(foldername)))
{
Directory.CreateDirectory(Server.MapPath(foldername));
}
if (file != null && file.ContentLength > 0)
{
// extract only the fielname
var fileName = Path.GetFileName(file.FileName);
// store the file inside ~/App_Data/uploads folder
var path = Path.Combine(Server.MapPath(foldername), fileName);
file.SaveAs(path);
}
return Json(new
{
success = true
}, JsonRequestBehavior.AllowGet);
}
// This action handles the form POST and the upload
[HttpPost]
public ActionResult CreateAttachmentRecord(string filename,string title, string description, string controlClass, string addedby)
{
AttachmentModel attach = new AttachmentModel();
attach.Filename = filename;
attach.Description = description;
attach.ControlClass = controlClass;
attach.AddedByName = "the current user";
attach.Title = title;
attachments.Add(attach);
return Json(new
{
id = "fileToUpload",
success = true
}, JsonRequestBehavior.AllowGet);
}