Clever Geek Handbook

JQGrid in MVC app Add error form on click submit

I am trying to use the JQGrid plugin and am faced with a problem that I cannot get around. First, I am using the latest in grid (3.5.3) in an ASP.NET MVC application. Almost everything works fine - loads my data, edits the form, runs the correct controller method. My problem is with adding the post form. The form displays fine, but when I click the Submit button, I get the following error on the upload form: Error Status: Internal Server Error. Error code: 500 I set a breakpoint in the controller method specified in the editURL prime, but it didn't hit. However, when submitting the edit form. From everything I can see in the document, they should use the same action method in the controller. I desperately want this to work. Any suggestions or ideas on how to debug this are appreciated. Here's my definition of a grid.

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();
});

+2


source to share


3 answers


  • Get Fiddler
  • Start tracing
  • Cancel error
  • In Fiddler go to Inspectors / TextView


This will help you get the real error. I use this all the time for asynchronous calls that give 500 errors.

+5


source


My wild guess is that ASP.NET MVC cannot bind to your action because the presented data cannot be bound by the model binder. So it returns an error instead of entering the action. You need to look at the completion of the response from the server to the AJAX call of course. If you are using the HandleErrorAttribute then the response from the server will be HTML and it will have a stack dump if you are using the development server. If you are not using the HandleErrorAttribute, then you should probably add it, at least for testing purposes, or change your Visual Studio configuration to break unhandled exceptions and expect a detailed exception. I think you find that the error is related to the MVC framework, telling you that for some reason it cannot find or bind an action.



+1


source


To make sure I am showing all errors correctly, I added the following to my web.config

<system.webServer>
...
<httpErrors errorMode="Detailed" />
</system.webServer>

This works for me because in my edit / update / delete actions I call ShowValidationMessage when something goes wrong.

LogGrid.ShowEditValidationMessage("some error");

This doesn't seem necessary when developing locally, but becomes a problem when deploying to a mid-tier / production server

0


source






More articles:


All Articles