We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
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; }
}
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
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?
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.
Hi,
Thanks for your help! It is now working!!! Thank you!!!
Hi Prince,
We are glad that the provided solution helped to solve the issue.
We are marking this thread as solved.
Regards,
Suganya Gopinath.
