crud with navgrid of gqgrid not working

Question

User-1202579601 posted

gives http status 404 error

The jqgrid navgrid not operating for crud operations.

<table id="jqGrid1"></table>
<div id="jqGridPager1"></div>
<script src="~/js/jquery.min.js"></script>
<script src="~/js/trirand/i18n/grid.locale-en.js"></script>
<script src="~/js/trirand/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#jqGrid1").jqGrid({
        url: "data.json",
        datatype: "json",
        mtype:"Get",
        colModel: [
            { label: 'Id', name: 'Id', width: 75, editable: true},
            { label: 'Paper Type', name: 'PaperType', width: 75, editable: true },
            { label: 'Date of pres', name: 'Dop', width: 75, editable: true },
            { label: 'Interval', name: 'Interval', width: 75, editable: true },
            { label: 'Venue', name: 'Venue', width: 75, editable: true},
            { label: 'Event', name: 'Event', width: 75, editable: true}
        ],
        jsonReader:
        {
            total: "total",
            page: "page",
            records: "records",
            root: "rows",
            repeatitems: false,
            Id: "0"
        },
            multiselect:false,
            emptyrecords: 'No records to display',
                viewrecords: true, // show the current page, data rang and total records on the toolbar
        width: 780,
        height: 200,
        rowNum: 20,
            loadonce: true,
            sortorder: "asc",
            // this is just for the demo
            pager: "#jqGridPager1",
            rowList: [10, 20, 30, 40, 50 ]

        });
  $("#jqGrid1").navGrid("#jqGridPager1",
        { edit: true, add: true, del: true, search: true, refresh: true,align: "left" },
        {
            url: '/Papers/Edit/',
            editCaption: "The Edit Dialog",
            recreateForm: true,
            beforeSubmit: function (postdata, form, oper) {
                if (confirm('Are you sure you want to update this row?')) {
                    // do something
                    return [true, ''];
                } else {
                    return [false, 'You can not submit!'];
                }
            },
            closeAfterEdit: true,
            errorTextFormat: function (data) {
                return 'Error: ' + data.responseText
            },
            editCaption: "The Edit Dialog",
            recreateForm: true,
            beforeSubmit: function (postdata, form, oper) {
                if (confirm('Are you sure you want to update this row?')) {
                    // do something
                    return [true, ''];
                } else {
                    return [false, 'You can not submit!'];
                }
            },
            closeAfterEdit: true,
            errorTextFormat: function (data) {
                return 'Error: ' + data.responseText
            },
        },
        // options for the Add Dialog
        {
            url: '@Url.Action("Create", "Papers")',
            closeAfterAdd: true,
            recreateForm: true,
            errorTextFormat: function (data) {
                return 'Error: ' + data.responseText
            },
            reloadAfterSubmit: true,
            afterComplete: function (response, postdata, formid) {
                alert(response.responseText);
            },
            afterSubmit: function () {
                $('#jqGrid1').jqGrid("setGridParam", { datatype: 'json' });
                return [true];
            }
        },
        // options for the Delete Dailog
        {
            url: '@Url.Action("Delete", "Papers")',
            errorTextFormat: function (data) {
                return 'Error: ' + data.responseText
            },
            reloadAfterSubmit: true,
            afterComplete: function (response, postdata, formid) {
                alert(response.responseText);
            },
            afterSubmit: function () {
                $('#jqGrid1').jqGrid("setGridParam", { datatype: 'json' });
                return [true];
            }

        }

    );
}

);
</script>

Answer 1

User-1330468790 posted

Hi pmdrait,

 

The http 404 error is caused by the data source 'data.json' as the property 'url' of the jqGrid. 

Where do you add this 'data.json' file in your project?

If it is in the root, for example, wwwroot folder of an ASP.NET Core project, you should use '/data.json' as the url for the json file.

I think you might need to fetch the value via server side. For example, '/Papers/GetPapers'. Therefore, you could do CRUD operation via ajax by communicating with the server.

  

Please bear in mind that

1. If you want to do CRUD with the server, you should always use ajax to send and get the data.
2. If you want to load data from a static file, you might not be able to do that. Except that you will change the data via manipulate the json file.

 

Best regards,

Sean

Answer 2

User-1202579601 posted

replaced url:'/Papers/GetDate'  still the crud in navgrid gives http 404 status code error. Not entering the crud methods of controller.

Answer 3

User-474980206 posted

if its an api crud controller, then typically the route is a /api/<controller>  and the http method picks the action. 

note: this is not compatible with jquery grid, unless you override the ajax calls

Answer 4

User-1202579601 posted

anything to do with routing configuration?

my menu in layout contains- <a asp-area="" asp-controller="Papers" asp-action="Index">Paper</a>

configure method in startup.cs - app.UseSession();
            app.UseStaticFiles();
            app.UseAuthentication();
            app.UseHttpsRedirection();
            app.UseRouting();
            app.UseCors();
            app.UseAuthorization();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute("default", "{controller=Home}/{action=Index}");
            });

attached model,controller(part of it),view. Unable to find why the crud operations not working from jqgrid navgrid.

the add/edit/delete form dialogs open, but submit operation gives http status 404 error.

Answer 5

User-1330468790 posted

Hi pmdrait, 

 

Could you please check as following steps? Within those information, we are able to narrow down the problem

• Do you use 'Areas' in your project? If so, you might need to modify the configuration as below:

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "MyArea",
        pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}");

    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
});

• Could you please use dev tools in browser to check what the url that you request? (Press F12 and select 'network' tab and check the Request Url)

 

Best regards,

Sean

Answer 6

User-1202579601 posted

https://imgur.com/CagYtUA

The crud errors snapshot is at the above link.

Answer 7

User-1330468790 posted

Hi pmdrait,

 

Sorry for the late reply.

Could you please post the latest version of the codes?

As the codes that you posted, the below code should call the action method 'Create' via the URL 'http://localhost:5001/Pagers/Create'.

// options for the Add Dialog
        {
            url: '@Url.Action("Create", "Papers")',
            closeAfterAdd: true,
            recreateForm: true,
            errorTextFormat: function (data) {
                return 'Error: ' + data.responseText
            },
            reloadAfterSubmit: true,
            afterComplete: function (response, postdata, formid) {
                alert(response.responseText);
            },
            afterSubmit: function () {
                $('#jqGrid1').jqGrid("setGridParam", { datatype: 'json' });
                return [true];
            }
        },

However, the image tells that it is definitely not as what we expect.

From my best guess, the reason might be syntax errors in .cshtml View, e.g. missing some codes in js function, missing parentheis in codes, or even use wrong URL in nav codes. Hence I asked for codes of the latest version which could be helpful to target the problem.

You could also check the console tab to see if there is any explicit error message. 

 

Best regards,

Sean

Answer 8

User-1202579601 posted

<table id="jqGrid1"></table>
<div id="jqGridPager1"></div>
<script src="~/js/jquery.min.js"></script>
<script src="~/js/trirand/i18n/grid.locale-en.js"></script>
<script src="~/js/trirand/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#jqGrid1").jqGrid({
            url: "/Papers/GetData/",
            datatype: "json",
            mtype: "Get",
            colModel: [
                { label: 'Id', name: 'Id', width: 75, hidden: true, key: true },
});
  $("#jqGrid1").navGrid("#jqGridPager1",
        { edit: true, add: true, del: true, search: true, refresh: true,align: "left" },
        {
            url: '/Papers/Edit/Id=1',
            editCaption: "The Edit Dialog",
            errorTextFormat: function (data) {
                return 'Error-e: ' + data.responseText
            }            
        },
        {
            url: '@Url.Action("Create", "Papers")',
            errorTextFormat: function (data) {
                return 'Error-a: ' + data.responseText
            },
        },       
        {
            url: '/Papers/Delete',
            errorTextFormat: function (data) {
                return 'Error-d: ' + data.responseText
            },
        }
    );
//controller
   public string Create([Bind("PaperType,Title,Venue,Event,Dop,Puburl")] Paper Paper)
        {
            string msg = "xxx";
            var sid = HttpContext.Session.GetInt32("staffId");
            if (sid != null)
            {
                staffid = (int)HttpContext.Session.GetInt32("staffId");
                Paper.Status = false;
                Paper.StaffId = staffid;

                if (ModelState.IsValid)
                {
                    _context.Add(Paper);
                    _context.SaveChanges();
                    msg = "Saved Successfully";
                }
                else
                {
                    msg = "Validation data not successfull";
                }
                return msg;
            }
            msg= "Validation data not successfull";
            return msg;
        }
          

        [HttpPost, ActionName("Edit")]
        public string Edit(Paper pp)
        {
            string msg="Not updated";            
            Paper pu =  _context.Papers.FirstOrDefault(p => p.Id == pp.Id);
            pu.Dop = pp.Dop;            
            _context.Update(pu);
            msg = "Saved Successfully";
            return msg;            
        }        
        [HttpPost]        
        public string Delete(int id)
        {
            string msg = "Not deleted";
            Paper pp = _context.Papers.FirstOrDefault(p => p.Id == id);
                if(pp!=null)
                {
                    _context.Papers.Remove(pp);
                    _context.SaveChanges();
                     msg = "Deleted successfully ";
                }
                return msg;
        }
Startup.cs
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            app.UseStatusCodePages("text/html",
    "<h1>Status code page</h1> <h2>Status Code: {0}</h2>");
            if (env.IsDevelopment())
            {
                                app.UseStatusCodePagesWithReExecute("/Error/{0}");
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
            }
            app.UseSession();
            app.UseStaticFiles();
            app.UseAuthentication();
            app.UseHttpsRedirection();
            app.UseRouting();
            app.UseCors();
            app.UseAuthorization();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(name:"default",pattern: "{controller=Home}/{action=Index}");
            });           
        }

https://localhost:5001/Papers/Create is looking for html file , not converted to action create in https://localhost:5001/Papers/Index