MVC: Passing model from view to controller on saving IGGrid

Hello Infragistics community, 

I have made a little sample project to illustrate my problem. This is how the page looks like. 

My model that I pass to the View is the class Company. 

public class Company
{
     public int ID { get; set; }
     public string CompanyName { get; set; }
     public string Address { get; set; }
     public IQueryable<Employee> EmployeeList { get; set; }
}

And the Employee Class: 

public class Employee
{
      public int ID { get; set; }
      public string FirstName { get; set; }
      public string LastName { get; set; }
}

This is how my controller looks like (w/out the jquery script part…)=> 

and my View looks like this. 

I need to save the data from the company and from the employee table after clicking the "save" button. This has to be executed on one button click, since im doing some complex validations. I have no issuse saving the employee table, but i have problems saving the company attributes ( company name & company address). 

Thank you very much

Hello,

In the screenshot provided, it looks like the input element is after the curly brace, I suggest putting it within the curly brace of the Html.BeginForm.

Please provide more information on how you are handling saving the data within the controller.

Hello Sam. Thank you for your reply. This is how the SaveData method in the controller looks like: 

[HttpPost]
public ActionResult SaveData()
{

   GridModel gridModel = new GridModel();
   List<Transaction<Employee>> transactions = gridModel.LoadTransactions<Employee>…

   (HttpContext.Request.Form["ig_transactions"]);

   // here im getting the changes of the employee table. This works fine

   //But how do I get the changes of my company? 

   foreach (Transaction<Employee> t in transactions)
   {
        //do something..
   }

   JsonResult result = new JsonResult();
   Dictionary<string, bool> response = new Dictionary<string, bool>();
   response.Add("Success", true);
   result.Data = response;
   return result;
}

I tryed putting the input element inside the curly brackets of the form, but it didnt work. 

This is how my complete view looks like:

<!– Ignite UI Required Combined CSS Files –>
<link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/themes/infragistics/infragistics.theme.css&quot; rel="stylesheet" type="text/css" />
<link href="http://cdn-na.infragistics.com/igniteui/2016.1/latest/css/structure/infragistics.css&quot; rel="stylesheet" type="text/css" />

<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js&quot; type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js&quot; type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js&quot; type="text/javascript"></script>

<!– Ignite UI Required Combined JavaScript Files –>
<script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.core.js&quot; type="text/javascript"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2016.1/latest/js/infragistics.lob.js&quot; type="text/javascript"></script>
<!– Used to add modal loading indicator for igGrid –>
<script src="http://www.igniteui.com/js/grid-modal-loading-inicator.js"></script&gt;

@using Infragistics.Web.Mvc
@model WebApplication1.Models.Company
@{
ViewBag.Title = "Index";
}
<h2>Edit – Company</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
<div class="form-group">
@Html.LabelFor(model => model.CompanyName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.CompanyName, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })
</div>
</div>
</div>
<hr />
<hr />
<h2>Employee List</h2>
@(Html.Infragistics()
.Grid(Model.EmployeeList).ID("Grid").Width("100%").Height("150px").PrimaryKey("ID")
.AutoGenerateColumns(false).AutoGenerateLayouts(false).EnableHoverStyles(false)
.Columns(column =>
{
column.For(x => x.FirstName).HeaderText("First Name").Width("40%");
column.For(x => x.LastName).HeaderText("Last Name").Width("40%");
})
.Features(features =>
{
features.Updating().ColumnSettings(cs =>
{
}).EnableAddRow(false).EnableDeleteRow(false);
})
.UpdateUrl(Url.Action("SaveData"))
.DataBind()
.Render()
)
<input type="button" id="saveChanges" class="button-style" value="Save" />
}

<script>
var updates, loadingIndicator;

$(function () {
var grid = $("#Grid"), comboDataSource = {};
$("#saveChanges").igButton({ labelText: $("#saveChanges").val(), disabled: false });

loadingIndicator = new GridModalLoadingIndicator(grid);

$("#saveChanges").on('igbuttonclick',
function (e) {

grid.igGrid("saveChanges", function saveSuccess() {
loadingIndicator.hide();
});
loadingIndicator.show();
return false;
}
);
});

</script>

Hello,

Thanks for providing the information.

I noticed that in your client-side code, you are handling the button click event which is then sending to the controller the transactions being sent but there is nothing here to handle submitting the recently created form. I recommend giving this documentation a read on working with forms in ASP.NET MVC: http://www.asp.net/web-pages/overview/ui-layouts-and-themes/4-working-with-forms. This documentation does not cover the use of forms with Razer but it's a good starting ground to familiarize yourself with forms without the abstraction from Razer. After giving that a look, I suggest giving this a look: https://msdn.microsoft.com/en-us/library/system.web.mvc.html.formextensions.beginform(v=vs.118).aspx.

Also note that to submit a form not that the <input> element will have a type of submit which is missing in your sample. I also do not recommend utilizing igButton and instead utilize just vanilla HTML5 elements for form handling.

Also note that this is not something we traditionally support as this is not entirely related to our controls.

Hello Sam. 

Thank you for your reply. 

"Also note that to submit a form not that the <input> element will have a type of submit which is missing in your sample"

I explicitly removed the submit button. I had this in my view: 

<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-default" value="Save Company" />
</div>
</div>

This button would have only saved the company name and company address, but not my changes from my employee table. My goal is to save the changes from the company form and from the employee table with only one save button. Is there a way to pass the current state of the Model to my SaveData() controller method? 

So my SaveData will look something like this SaveData(Company myCompany)

and in my View I would pass the current Modelstate => UpdateUrl(Url.Action("SaveData", Model)) 

Thank you very much. 

Hello,

In this case, you won't be able to use the input with type submit as it will be sent to a single route which will only handle the form data.

I did some research and found that there is no supported way to attach data to the igGrid payload when using updateUrl. This would be considered a product idea and can be submitted here: http://ideas.infragistics.com. Therefore, you would need to add an event handler to the button in your page and get the form and grid data and send it within the body of a POST to your route.

Within your client side code, you can try serializing the form (https://api.jquery.com/serialize/) which will return a string corresponding to the form and use the pendingTransactions method to create a custom payload that can be handled by your route.

Hello

This is great!

If you have further questions, please do not hesitate to contact us again. Cd22 apk