JQGrid in MVC app Add form error on submit click

Question

Hi - I am trying to use the JQGrid plugin and have run into an issue I can't seem to get around. First I'm using the latest version on the grid (3.5.3) in an ASP.NET MVC app. Almost everything is working great - loads my data, edit form fires the correct Controller method. My issue is with the Add record Form. The form displays fine but when I click the submit button I get the following error on the Add Form: error Status: 'Internal Server Error'. Error code: 500 I have set a break point in the controller method specified in the editURL parm but it does not get hit. It does when submitting the Edit Form however. From everything I see in the doc they should use the same action method in the controller. I'm desperate to get this working. Any suggestions or ideas how to debug this are appreciated. Here's my grid definition.

aspx:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#sandgrid").jqGrid({
        url: '/EquipTrack/GridData/',
        editurl: '/EquipTrack/Edit/',
        datatype: 'json',
        mtype: 'GET',
        height: 255,
        width: 755,
        rowNum: 5000,
        colNames: ['ID', 'Type', 'Make', 'Model', 'Year', 'Location', 'Insp Due', 'Serv Due', 'Miles/Hrs', 'Milage Dt', 'Reg By', 'Mngd By', 'Tag Exp', '', '', '', '', 'Vin Num', 'Title Num', 'GVW', 'Unlaiden Wt', 'Tag Num', 'Tag State', 'Cost', 'Inspect Rmndr(wks)', 'Tag Rmndr(wks)', 'Stolen', 'Sold', 'Lojack', 'In Repair', 'Totaled', 'Hut Sticker', 'Apportioned', 'IFTA Sticker', 'Comment'],
        colModel: [
         { name: 'equip_id', index: 'equip_id', width: 65, editable: true },
         { name: 'type_desc', index: 'type_desc', width: 130, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetTypes'} },
         { name: 'make_descr', index: 'make_descr', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetMakes'} },
         { name: 'model_descr', index: 'model_descr', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetModels'} },
         { name: 'equip_year', index: 'equip_year', width: 60, editable: true },
         { name: 'work_loc', index: 'work_loc', width: 130, editable: true },
         { name: 'insp_due_dt', index: 'insp_due_dt', width: 100, editable: true },
         { name: 'service_due_num', index: 'service_due_num', width: 80, editable: true },
         { name: 'miles_hours', index: 'miles_hours', width: 80, editable: true },
         { name: 'miles_dt', index: 'miles_dt', width: 100, editable: true },
         { name: 'registered_by', index: 'registered_by', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetDivisions'} },
         { name: 'managed_by', index: 'managed_by', width: 80, editable: true, edittype: "select", editoptions: { dataUrl: '/EquipTrack/GetDivisions'} },
         { name: 'tag_expire_dt', index: 'tag_expire_dt', width: 100, editable: true,
             editoptions: { size: 12, dataInit: function(el) {
                 $(el).datepicker({ dateFormat: 'mm/dd/yy' });
             }
             }
         },
         { name: 'inspection_warn', hidden: true },
         { name: 'service_warn', hidden: true },
         { name: 'tag_warn', hidden: true },
         { name: 'equip_color', hidden: true },
         { name: 'vin_num', hidden: true, editable: true, editrules: { edithidden: true} },
         { name: 'title_num', hidden: true, editable: true, editrules: { edithidden: true} },
            { name: 'gross_v_wt', hidden: true, editable: true, editrules: { edithidden: true} },
        { name: 'unlaiden_wt', hidden: true, editable: true, editrules: { edithidden: true} },
        { name: 'tag_num', hidden: true, editable: true, editrules: { edithidden: true} },
        { name: 'tag_state', hidden: true, editable: true, editrules: { edithidden: true} },
        { name: 'cost', hidden: true, editable: true, editrules: { edithidden: true} },
     { name: 'insp_rmdr_wks', hidden: true, editable: true, edittype: "select", editoptions: { value: ":;1:1;2:2;3:3;4:4;5:5;6:6;7:7;8:8;9:9;10:10;11:11;12:12;13:13;14:14;15:15;16:16;17:17;18:18;19:19;20:20;21:21;22:22;23:23;24:24" }, editrules: { edithidden: true} },
        { name: 'tag_expire_rmdr_wks', editable: true, hidden: true, edittype: "select", editoptions: { value: ":;1:1;2:2;3:3;4:4;5:5;6:6;7:7;8:8;9:9;10:10;11:11;12:12;13:13;14:14;15:15;16:16;17:17;18:18;19:19;20:20;21:21;22:22;23:23;24:24" }, editrules: { edithidden: true} },
        { name: 'stolen', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
        { name: 'sold', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
        { name: 'lojack', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
        { name: 'in_repair', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
        { name: 'totaled', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
        { name: 'hut_sticker', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
        { name: 'apportioned', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
        { name: 'ifta_sticker', hidden: true, editable: true, edittype: "checkbox", editoptions: { value: "True:False" }, editrules: { edithidden: true} },
        { name: 'comment', hidden: true, editable: true, editoptions: { value: "True:False" }, editrules: { edithidden: true }, edittype: "textarea", editoptions: { rows: "2", cols: "27"} }
        ],
        sortname: 'equip_id',
        sortorder: "asc",
        afterInsertRow: function(rowid, rowdata, rowelem) {
            if (rowelem[13] == 'SET_RED') {
                jQuery("#sandgrid").setCell(rowid, 'insp_due_dt', '', { color: 'red' })
            }
            if (rowelem[14] == 'SET_RED') {
                jQuery("#sandgrid").setCell(rowid, 'service_due_num', '', { color: 'red' })
            }
            if (rowelem[15] == 'SET_RED') {
                jQuery("#sandgrid").setCell(rowid, 'tag_expire_dt', '', { color: 'red' })
            }
            if (rowelem[16] == 'SET_GREEN') {
                jQuery("#sandgrid").setCell(rowid, 'equip_id', '', { color: 'green' })
            }
            if (rowelem[16] == 'SET_PURPLE') {
                jQuery("#sandgrid").setCell(rowid, 'equip_id', '', { color: 'purple' })
            }
            //                if (rowelem[12] == '01/01/3000') {
            //                    jQuery("#sandgrid").setCell(rowid, 'tag_expire_dt','', '')
            //                }
        },
        viewrecords: true,
        pager: jQuery('#sandgridp'),
        caption: 'Inventory'
    }).navGrid('#sandgridp', {}, //options
     {reloadAfterSubmit: false, jqModal: false, closeOnEscape: true, bottominfo: "Fields marked with (*) are required" }, // edit options
     {}, // add options 
     {}, // del options
     {}, // search options
     {} // view options
      );

    /*        }).navGrid('#sandgridp',
    {}, //options
    {reloadAfterSubmit: false }, // edit options
    {reloadAfterSubmit: false }, // add options
    {reloadAfterSubmit: false }, // del options
    {} // search options
    ); */


    $('#sandgridp_center').remove();
    $('#sandgridp_right').remove();
});

Answer 1

My wild guess is that ASP.NET MVC is failing to bind to your action because the data submitted cannot be bound by the model binder. It therefore returns an error instead of entering into the action. To be sure, you need to look at the completes response from the server to the AJAX call. If you're using HandleErrorAttribute, then the response from the server will be HTML and a stack dump will be inside it, if you are using the development server. If you are not using HandleErrorAttribute, then you should probably add it at least for testing purposes or change the configuration of Visual Studio to break on unhandled exceptions, and expect the exception in detail. I think you'll find that the error is from the MVC framework, telling you that it cannot find or bind to an action for some reason.

Answer 2

1. Get Fiddler
2. Start a trace
3. Repoduce the error
4. In Fiddler, go to Inspectors/TextView

This should help you get to the real error. I use this all the time for async calls that give 500 errors.