ASP.NET Core Grid Save Rows to Session

[Foster]

My application has an empty grid at the start of the application; however the user will be adding rows.  I am migrating this application from ASP.NET Web Forms where I solved this situation by using Session variables. 

 

Here is my grid:

<panel>
    <h3>DETAIL</h3>

    @(Html.Kendo().Grid<EDPortalCoreRider.Models.WebForm850Item>()    
        .Name("Grid")    
        .Columns(columns => {        
            columns.Bound(p => p.PO101);
            columns.Bound(p => p.PO102).Width(140);
            columns.Bound(p => p.PO103).Width(140);
            columns.Bound(p => p.PO104).Width(100);
            columns.Bound(p => p.PO105).Width(100);
            columns.Bound(p => p.PO107).Width(100);
            columns.Bound(p => p.PO109).Width(100);
            columns.Bound(p => p.PO111).Width(100);
            columns.Bound(p => p.PID05).Width(100);
            columns.Bound(p => p.PO401).Width(100);
            columns.Bound(p => p.PO414).Width(100);
            columns.Command(command => command.Destroy()).Width(110);
        })
        .ToolBar(toolbar => {
            toolbar.Create();
            toolbar.Save();        
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Pageable()
        .Navigatable()
        .Sortable()
        .Scrollable()
        .DataSource(dataSource => dataSource        
            .Custom()         
            .Batch(true)
            .PageSize(20)
            .Transport(transport =>
            {
                transport.Read(read =>
                   read.Action("GetItems","WebForm")
                );
                transport.Create(create =>
                   create.Action("AddItems","WebForm").Type(HttpVerbs.Post)
                );
                transport.Update(update =>
                   update.Action("SaveItems","WebForm").Type(HttpVerbs.Post)
                );/*
                transport.Destroy(destroy =>
                   destroy.Url("https://demos.telerik.com/kendo-ui/service/products/destroy")
                          .DataType("jsonp")
                );*/
                transport.ParameterMap("parameterMap");
            })
        )
    ) 
    <script>
        function parameterMap(options, operation) {
            if (operation !== "read" && options.models) {
                return { models: kendo.stringify(options.models) };
            }
        }
    </script>
</panel>

 

Here is my Controller code:

  [HttpPost]
    public ActionResult AddItems([DataSourceRequest] DataSourceRequest request, [Bind(Prefix="models")] IEnumerable<WebForm850Item> web850Items)
    {
        var results = new List<WebForm850Item>();

        if (web850Items != null && ModelState.IsValid)
        {
            HttpContext.Session.SetObjectAsJson("850Items", web850Items);

            //foreach (var product in web850Items)
            //{

                //_form850Items.Add(product);
                //results.Add(product);
            //}
        }

        return Json(results.ToDataSourceResult(request, ModelState));
    }

    [HttpPost]
    public ActionResult SaveItems([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<WebForm850Item> web850Items)
    {
        HttpContext.Session.SetObjectAsJson("850Items",web850Items);

        foreach (var web850Item in web850Items)
        {
            ViewBag.POItems.Add(web850Item);
        }

        return Json(web850Items.ToDataSourceResult(request, ModelState));
    }

While the method is being called, I am not getting web850Items variable being populated.  What am I missing?

                       

[Stoyan]

Hello Foster,

Thank you for sharing your code.

However based on the provided information I am unsure whether the IEnumerable<WebForm850Item> web850Items arrives empty in the Controller or does it fail to get saved in the HttpContext.Session. Could you please elaborate?

That being said I suspect that an issue might arise with the Create, Update and Destroy actions of the Grid's DataSource because in order to function properly they need the Schema.Model.Id to be configured:

.Schema(schema =>
                schema.Model(model =>
                {
                    model.Id(f => f.ID);
                }).Data("Data").Total("Total")
)

Please define the Id of the Model property and let me know how it works on your side.

Regards,
Stoyan
Progress Telerik

[Foster]

Hello Stoyan, I added the Schema.Model.Id to the Grid's DataSource but I am still not getting a value passed in the variable "web850Items" when either AddItem or SaveItem are being called.  To answer your question - the IEnumerable<WebForm850Item> web850Items arrives empty in the Controller methods.

[Stoyan]

Hi Foster,

I have prepared a sample project that uses a Custom DataSource to populate the Grid's data in a way similar to the one shown in  the code you have shared. But I couldn't reproduce the issue with the parameter of the Update transport being null.

Could you please modify the project I've attached and send it back to me to allow me to investigate further?

[Foster]

Hello, thanks for the sample code.  When running your example, I see this when I break into the Update method:

 

 

As you can see that the count of the parameter being passed is an empty list.  That is my current behavior in my personal application - the null value went away after adding the Id to the schema but still no values are being passed in.

[Stoyan]

Hi Foster,

This issue occurs because the Type of the Custom DataSource in the project is commented out but it needs to be configured as follows:

.Type("aspnetmvc-ajax")

I suspect the cause of the issue on your side may be similar. Please give this suggestion a try and let me know whether it resolves the error on your side as well.

Finally, I have modified the sample project to reflect this change and to demonstrate the CRUD operations of the Grid to enable you to modify the project if the issue persists.

[Foster]

Thank you, this did provide the expected solution to my problem.  I have something else wrong with my grid binding but this solution is correct for my reported question/issue.  

[Stoyan]

Hello Foster,

I am happy the initial issue has been resolved.

If the other Grid binding issue you are facing still persists, don't hesitate to let me know and consider sharing more details about it to enable me to investigate its cause and suggest a solution.

[Foster]

I fixed my other Grid binding issue last night.  I was not updating the ViewBag item that I bound the Grid to.  Now my grid is working as anticipated.  Seeing the end result now in my code makes a lot of sense.  Here is my final code for the grid:

 

<panel>
    <h3>DETAIL</h3>
    
    @(Html.Kendo().Grid<WebForm850Item>()    
        .Name("Grid")    
        .Columns(columns =>
        {
            columns.Bound(p => p.PO101).Width(100);
            columns.Bound(p => p.PO102).Width(140);
            columns.Bound(p => p.PO103).Width(140);
            columns.Bound(p => p.PO104).Width(100);
            columns.Bound(p => p.PO105).Width(100);
            columns.Bound(p => p.PO107).Width(100);
            columns.Bound(p => p.PO109).Width(100);
            columns.Bound(p => p.PO111).Width(100);
            columns.Bound(p => p.PID05).Width(100);
            columns.Bound(p => p.PO401).Width(100);
            columns.Bound(p => p.PO414).Width(100);
            columns.Command(command => command.Destroy()).Width(110);
        })
        .ToolBar(toolbar => {
            toolbar.Create();
            toolbar.Save();        
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Pageable()
        .Navigatable()
        .Sortable()
        .Scrollable()
        .DataSource(dataSource => dataSource        
            .Custom()
            .Type("aspnetmvc-ajax")
            .Batch(true)
            .PageSize(20)
            .Schema(schema => schema.Model(model => model.Id(f=>f.PO101)))
            .Transport(transport =>
            {
                transport.Read(read =>
                   read.Action("GetItems","WebForm")
                );
                
                transport.Create(create =>
                   create.Action("AddItems","WebForm").Type(HttpVerbs.Post)
                );
                transport.Update(update =>
                   update.Action("SaveItems","WebForm").Type(HttpVerbs.Post)
                );
                transport.ParameterMap("parameterMap");
            })
        )
        )
        
    <script>
        function parameterMap(options, operation) {
            if (operation !== "read" && options.models) {
                return { models: kendo.stringify(options.models) };
            }
        }
    </script>

</panel>

And here is my controller code:

 [HttpPost]
    public JsonResult AddItems([DataSourceRequest] DataSourceRequest request, [Bind(Prefix="models")] IEnumerable<WebForm850Item> web850Items)
    {
        var results = new List<WebForm850Item>();

        if (web850Items != null && ModelState.IsValid)
        {
            HttpContext.Session.SetObjectAsJson("850Items", web850Items);

            foreach (var product in web850Items)
            {
                _form850Items.Add(product);
                results.Add(product);
            }
        }
        
        ViewBag.POItems = results;
        return Json(results.ToDataSourceResult(request, ModelState));
    }
    
    [HttpPost]
    public ActionResult SaveItems([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<WebForm850Item> web850Items)
    {
        HttpContext.Session.SetObjectAsJson("850Items",web850Items);

        var results = new List<WebForm850Item>();
        foreach (var product in web850Items)
        {
            _form850Items.Add(product); 
            results.Add(product);
        }

        ViewBag.POItems = _form850Items;
        return Json(results.ToDataSourceResult(request, ModelState));
        
    }

    [HttpGet]
    public void GetItems()
    {
        if (ViewBag.POItems == null)
        {
            ViewBag.POItems = new List<WebForm850Item>();
        }
    }