Edit for a Grid fail to close the windows and refresh the grid

Title:

Hello,
I have a MVC application with ASP .NET where I try like to use Grid (CRUD) with ASP.net Core MVC Awesome Components v. 8.1.
I can display the content of the grid, bound to a SQL table called Tarif.
If I edit one item, I get the pop-up window with the edit fields. I can modify a value, and it updated the value in SQL correctly. But after that, the pop-up window does not close and refresh the grid.
I get the following js error in the page :
 _Cannot read properties of undefined (reading 'itemEdited') at s (AwesomeMvc.js:1:1107)_ 

I have created a grid and the Index.cshtml is :
    @(Html.Awe().Grid("TariffGrid")
                .Mod(o => o.PageInfo().ColumnsSelector().ColumnsAutohide().InfiniteScroll())
                .Url(Url.Action("GridGetItems", "Tariff"))
                .Height(450)
                .Persistence(Persistence.Session)
                .SingleColumnSort(true) 
                .Resizable(true)
                .Parent("txtLabel", "Label") /* Search */
                .Parent("txtPrefix", "Prefix") /* Search */
                .Columns(
                        new Column {Name = "CostId", Width = 65, Header= "CostId", Bind="CostId" }, // ARI change Id to CostId
                        new Column {Name = "Label", Sort = Sort.Asc }.Mod(o => o.Nohide()),
                        new Column { Name = "Prefix" },
                        new Column { Name = "Tarif",Header="Tariff [CHF/min]" },
                        new Column { ClientFormat = Html.EditFormatForGrid("TariffGrid", "CostId"), Width = 50 }.Mod(o => o.Nohide()),
                        Html.DeleteColumnForGrid("TariffGrid")))

The SQL database for my Tarif table contain a primary called CostId (and not Id).
I have created the cshtml for the Create/Edit:
    @model TeamsMgmtPortal.ViewModels.Input.TariffInput
    @using (Html.BeginForm())
    {
        using (Html.Awe().BeginContext())
        {
            // The Id is not show in Edit/Create because it is managed by SQL. But it is needed to have this line below to keep
            // the track of Id when editing and then click on OK. This Id will be passed to the Edit function of controller and
            // used to search for the record to edit
            <input name="CostId" id="CostId" class="awe-val" value="@Model.CostId" data-val="true"> 
    
            @Html.EditorFor(o => o.Label)
            // Tarif
            @(Html.Raw("<div class=\"efield\"><div class=\"elabel\"><label for=\"Tarif\">Tarif  </label></div>"))
            @(Html.Awe().TextBox("Tarif").FormatFunc("aweUtils.prefix('CHF ')").Numeric(o => o.Decimals(9)))
    
            @Html.EditorFor(o => o.Prefix)
        }
    }

In the controller, I defined the MapToGridModel as followed:
     private static object MapToGridModel(Tariff2 o) 
     {
         return
             new
             {
                 Id = o.CostId, //this is needed to be able to edit/delete a row
                 o.CostId, // Primary Key
                 o.Label,
                 o.Tarif,
                 o.Prefix,   
             };
     }

and GridGetItems:
    public ActionResult GridGetItems(GridParams g, string Label, string Prefix)
    {
        Label = (Label ?? "").ToLower();
        Prefix = (Prefix ?? "").ToLower();
    
        // Search for item that match the search
        try
        {
            var items = db.Tariff2.Where(o => o.Label.ToLower().Contains(Label) && o.Prefix.Contains(Prefix)).AsQueryable();
            var jsonObject = Json(new GridModelBuilder<Tariff2>(items, g)
            {
                Key = "CostId", // tested with CostId , Id
                KeyProp = o => o.CostId, // needed for api select, update, tree, nesting, EF                
                Map = MapToGridModel,
                GetItem = () => db.Tariff2.Find(Convert.ToInt32(g.Key)), // used when calling api.update (signalrSync.js)
    
            }.Build()); ;
    
            return jsonObject;
        }

Finally, the Edit method :
    public ActionResult Edit(TariffInput input)
    {
        if (!ModelState.IsValid) return PartialView("Create", input);
    
        try
        {
            // Search for the item to edit
            var item = db.Tariff2.Find(input.CostId);
            
            // Update the record
            item.CostId = input.CostId;
            item.Label = input.Label;
            item.Tarif = input.Tarif;
            item.Prefix = input.Prefix;
            db.Entry(item).State = EntityState.Modified;
            db.SaveChanges();
    
            var jsonObject = Json(new { CostId = item.CostId });
            return jsonObject;
        }
        catch (Exception ex)
        {
        }
    }

I faced similar problem with the Create method. I can create the item in SQL DB, but the create pop-up window is not closing and refreshing the grid.

    public ActionResult Create(TariffInput input)
    {
        if (!ModelState.IsValid) return PartialView(input);
    
        // Create a new item
        var item = new Tariff2(); 
        
        // add it to the database
        try
        {
            item.CostId = input.CostId; 
            item.Label = input.Label;
            item.Tarif = input.Tarif;
            item.Prefix = input.Prefix;
            db.Tariff2.Add(item);
            db.SaveChanges();
    
            // return it to the grid
            return Json(MapToGridModel(item)); // returning grid model, used in grid.api.renderRow
        }
        catch (Exception ex)
        {
        } 
    }


Same thing for the Delete method :
    public ActionResult Delete(DeleteConfirmInput input)
    {
        try
        {
            // Get the item to delete
            Tariff2 item = db.Tariff2.Find(input.Id);
            db.Tariff2.Remove(item);
            db.SaveChanges();
            return Json(new { input.Id });
        }
        catch (Exception ex)
        {
        }
    }

Could you please give me the solution ?
Thanks

Alain Rime

asked 2 months ago

please have a look at this demo first: https://demo.aspnetawesome.com/GridCrudDemo regarding the `itemEdited`, this is a method in `aweUtils.js` , which used to be in `utils.js`, perhaps you're upgrading, https://www.aspnetawesome.com/learn/release/Version8-0#Migrating-from-previous-versions (regarding aweUtils.js) I assume you're using the PopupForm, which should close when you return a json object to it, even empty `return Json(new {})` on create post action no need to return `Json(MapToGridModel(item));` anymore, see our demo, we return json with id only if you want to flash the row

2 months ago Omu
I have copy the class CrudHelpers.cs from Mvc5MinSetup and now it works ! Thanks. Yes I am currently updating from a previous version.

2 months ago Alain Rime

Answers

please Sign In to leave an answer