locked
crud with navgrid of gqgrid not working RRS feed

  • 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>

    Thursday, November 19, 2020 2:21 AM

All replies

  • 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

    Thursday, November 19, 2020 12:46 PM
  • 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.

    Thursday, November 19, 2020 3:13 PM
  • 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

    Thursday, November 19, 2020 6:30 PM
  • 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.

    Sunday, November 22, 2020 3:25 PM
  • 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

    Tuesday, November 24, 2020 9:15 AM
  • User-1202579601 posted

    https://imgur.com/CagYtUA

    The crud errors snapshot is at the above link.

    Tuesday, November 24, 2020 12:26 PM
  • 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

    Friday, November 27, 2020 7:31 AM
  • 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

    Friday, November 27, 2020 10:24 AM