List property in ViewModel empty when Submitted

[Prince Ocenar]

When I try to submit my form, I checked in my Controller that my List in my ViewModel is Empty...

Please help... below is my index.cshtml, HomeController and my ViewModel class

Index.cshtml----------------------------------------------------------

@model TestViewModel

@using Syncfusion.EJ2;

<form method="post">

    <div class="container">

        <ejs-grid id="Grid" allowSelection="true" allowPaging="true" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})">

            <e-data-manager json="@Model.order.ToArray()" adaptor="RemoteSaveAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/CellEditDelete"></e-data-manager>

            <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editsettings>

            <e-grid-columns>

                <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" isPrimaryKey="true" width="120"></e-grid-column>

                <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column>

                <e-grid-column field="Freight" headerText="Freight" format="C2" width="120"></e-grid-column>

                <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>

            </e-grid-columns>

        </ejs-grid>

    </div>

    @*asp-route-parameterName="@Model"*@

    <button type="submit" asp-action="TestSubmit" class="btn btn-primary" style="width: auto">Save</button>

</form>

HomeController -----------------------------------------------------

 [HttpPost]

        public IActionResult TestSubmit(TestViewModel vm)

        {

            var testt = vm; <----------------------------------------- when I try to check the List inside my viewmodel.. it's empty

            return View(vm);

        }

        public IActionResult Index()

        {

            data data = new data();

            data.orderData = data.GetAllRecords();

            ViewBag.dataSource = data.GetAllRecords();

            TestViewModel vm = new TestViewModel();

            vm.order = data.orderData;

            return View(vm);

        }

        public IActionResult UrlDatasource([FromBody]Data dm)

        {

            //bind your data here

            var order = OrdersDetails.GetAllRecords();

            var Data = order.ToList();

            int count = order.Count();

            return dm.requiresCounts ? Json(new { result = Data.Skip(dm.skip).Take(dm.take), count = count }) : Json(Data);

        }

        public IActionResult childUrlDataSource([FromBody]extendDM dm) {

            List<OrdersDetails> DataDetails = new List<OrdersDetails>();

        var ord = dm.@params["EmployeeID"];

            OrdersDetails val = OrdersDetails.GetAllRecords().Where(or => or.EmployeeID == ord).FirstOrDefault();

            DataDetails.Add(val);

            return dm.RequiresCounts ? Json(new { result = DataDetails, count = DataDetails.Count }) : Json(DataDetails);

        }

        public void UpdateDataSource([FromBody]CRUDData crudmodel) {

            if (crudmodel.action == "insert")

            {

                data dt = new data();

                dt.GetAllRecords().Insert(0, crudmodel.data);

            }

            else if (crudmodel.action == "save")

            {

                data dt = new data();

                var ord = crudmodel.data;

                filter_core.Models.OrderDetail val = dt.GetAllRecords().Where(or => or.OrderID == ord.OrderID).FirstOrDefault();

                val.OrderID = ord.OrderID;

                val.Verified = ord.Verified;

                val.EmployeeID = ord.EmployeeID;

                val.CustomerID = ord.CustomerID;

                val.Freight = ord.Freight;

                val.OrderDate = ord.OrderDate;

                val.ShipCity = ord.ShipCity;

            }

            else if (crudmodel.action == "delete") {

                data dt = new data();

                dt.GetAllRecords().Remove(dt.GetAllRecords().Where(or => or.OrderID == int.Parse(crudmodel.data.OrderID.ToString())).FirstOrDefault());

            }

        }

        public ActionResult Update([FromBody]CRUDModel<OrdersDetails> value)

        {

            var ord = value.value;

            OrdersDetails val = OrdersDetails.GetAllRecords().Where(or => or.OrderID == ord.OrderID).FirstOrDefault();

            val.OrderID = ord.OrderID;

            val.Verified = ord.Verified;

            val.EmployeeID = ord.EmployeeID;

            val.CustomerID = ord.CustomerID;

            val.Freight = ord.Freight;

            val.OrderDate = ord.OrderDate;

            val.ShipCity = ord.ShipCity;

            return Json(value.value);

        }

        //insert the record

        public ActionResult Insert([FromBody]CRUDModel<OrdersDetails> value)

        {

            OrdersDetails.GetAllRecords().Insert(0, value.value);

            return Json(value.value);

        }

        //Delete the record

        public ActionResult CellEditDelete([FromBody]CRUDModel<OrdersDetails> value)

        {

            OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().Where(or => or.OrderID == int.Parse(value.key.ToString())).FirstOrDefault());

            return Json(value);

        }

        public ActionResult GetData() {

            var data = OrdersDetails.GetAllRecords();

            return Json(data);

        }

       public class extendDM : DataManagerRequest {

            public Dictionary<string, int> @params { get; set; }

        }

        public class Data

        {

            public bool requiresCounts { get; set; }

            public int skip { get; set; }

            public int take { get; set; }

        }

        public class CRUDData {

            public string action { get; set; }

            public filter_core.Models.OrderDetail data { get; set; }

        }

        public class CRUDModel<T> where T : class

        {

            public string action { get; set; }

            public string table { get; set; }

            public string keyColumn { get; set; }

            public object key { get; set; }

            public T value { get; set; }

            public List<T> added { get; set; }

            public List<T> changed { get; set; }

            public List<T> deleted { get; set; }

            public IDictionary<string, object> @params { get; set; }

        }

    }

    public class OrdersDetails

    {

        public static List<OrdersDetails> order = new List<OrdersDetails>();

        public OrdersDetails()

        {

        }

        public OrdersDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry, DateTime ShippedDate, string ShipAddress)

        {

            this.OrderID = OrderID;

            this.CustomerID = CustomerId;

            this.EmployeeID = EmployeeId;

            this.Freight = Freight;

            this.ShipCity = ShipCity;

            this.Verified = Verified;

            this.OrderDate = OrderDate;

            this.ShipName = ShipName;

            this.ShipCountry = ShipCountry;

            this.ShippedDate = ShippedDate;

            this.ShipAddress = ShipAddress;

        }

        public static List<OrdersDetails> GetAllRecords()

        {

            if (order.Count() == 0)

            {

                int code = 10000;

                for (int i = 1; i < 10; i++)

                {

                    order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));

                    order.Add(new OrdersDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));

                    order.Add(new OrdersDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));

                    order.Add(new OrdersDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));

                    order.Add(new OrdersDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));

                    code += 5;

                }

            }

            return order;

        }

        public int? OrderID { get; set; }

        public string CustomerID { get; set; }

        public int? EmployeeID { get; set; }

        public double? Freight { get; set; }

        public string ShipCity { get; set; }

        public bool Verified { get; set; }

        public DateTime OrderDate { get; set; }

        public string ShipName { get; set; }

        public string ShipCountry { get; set; }

        public DateTime ShippedDate { get; set; }

        public string ShipAddress { get; set; }

    }

 public class TestViewModel <-- My ViewModel

    {

        public List<OrderDetail> order { get; set; }

    }

[Pavithra Subramaniyam]

Hi Prince Ocenar,

Greetings from Syncfusion support.

The EJ2 Grid isn't in form elements. So, it cannot be submitted as an input element inside the form default submit. However if you need to send all the added records in the Grid to the server on external button click, You can achieve your requirement using an AJAX call as demonstrated in the below code snippet, 

Index.cshtml

 

<button id="refresh ">Submit</button> 

<ejs-grid id="Grid" dataSource="ViewBag.dt" allowPaging="true"  height="315"> 

    <e-grid-columns> 

        . . .         

 

    </e-grid-columns> 

 

</ejs-grid> 

<script> 

    document.getElementById("refresh").addEventListener("click", () => { 

        var grid = document.getElementById("Grid").ej2_instances[0]; 

       $.ajax({ 

            url: "/Home/Data", 

            type: "POST", 

            datatype: "json", 

            contentType: "application/json; charset=utf-8", 

            data: JSON.stringify({ gid: JSON.stringify(grid.dataSource.dataSource.json) }), 

 

        });  

    }) 

 

</script> 

 

 

  [HomeController.cs] 

 

public ActionResult Data([FromBody] string gid) 

        { 

            return Json(gid, JsonRequestBehavior.AllowGet); 

        } 

Regards,

Pavithra S

[Prince Ocenar]

Thanks for the reply....

I tried your code and in my view page I can get the stringifydata.. I tried to alert the content of my Grid

but in my Controller.. I still got this..

Is there anything I missed out here? like packages to install or something wrong with my code? 

[Pavithra Subramaniyam]

Hi Prince,

From the screenshot, we suspect that your issue occurs since there is no “FromBody” in the stringifyData action.  So, we suggest adding the [FromBody] to overcome the issue.

public ActionResult  stringifyData([FromBody] string stringifyData) 

        { 

            return Json(gid, JsonRequestBehavior.AllowGet); 

        } 

 

If you are still facing the issue, please share an issue reproducible sample which will be helpful for us to provide a better solution as early as possible.

[Prince Ocenar]

Hi,

Thanks for your help! It is now working!!! Thank you!!!

[Suganya Gopinath]

Hi Prince,

We are glad that the provided solution helped to solve the issue. 

We are marking this thread as solved. 

Regards,

Suganya Gopinath.