Pass Telerik:Grid-data over form-action (MVC) - ajax

Question

I have a very special problem and wasn't yet able to find anything to help me solving it.
I have a form which has a bunch of textboxes, dropdownlists and such which are posted back through the model attached in the view. However I also have a Grid which is dynamically populated through one of the DropDownLists. I want to parse the whole grid back to the forms-controller, but I have no clue how to do that.
An ajax-post doesn't work, because I have no access to the actual model. The only thing I could do is post the controls-values itself, but that approach is somewhat messy.
The model itself has a variable "Mappings" which is of the Type IEnumerable. This is the type I also bind to the grid. So there should be a way to somehow add the mappings inside of the grid to the model. I thought it might work automatically if I name the grid like the name of the property inside of the main model ("Mappings"), but that didn't work. So I am yet again back to square one.
Maybe you guys have an idea how to solve my Problem as I am somewhat out of ideas.
View:
#using (Html.BeginForm("Save", "Profile", FormMethod.Post, new { Id = "addProfileForm", novalidate = "false" }))
{
<ul id="progressbar">
<li class="active">Grundeinstellungen</li>
<li>CRM-Einstellungen</li>
<li>Mapping anlegen</li>
</ul>
<fieldset>
<h2 class="fs-title">Grundinformationen</h2>
#Html.LabelFor(model => model.Name, new { #class = "label req" })
#Html.TextBoxFor(model => model.Name, new { #class = "input" })
#Html.LabelFor(model => model.Description, new { #class = "label" })
#Html.TextAreaFor(model => model.Description, new { #class = "input", rows = "3", cols = "25" })
#Html.LabelFor(model => model.UserGroupId, new { #class = "label req" })
#(Html.Kendo().DropDownListFor(model => model.UserGroupId)
.OptionLabel("Bitte auswählen... ")
.BindTo(Model.UserGroupList)
)
<input type="button" name="next" class="next action-button" value="Weiter" style="display:block"/>
</fieldset>
<fieldset>
<h2 class="fs-title">CRM-Einstellungen</h2>
#Html.LabelFor(model => model.OrdnungsbegriffTypeId, new { #class = "label req" })
#(Html.Kendo().DropDownListFor(model => model.OrdnungsbegriffTypeId)
.OptionLabel("Bitte auswählen...")
.BindTo(Model.OrdnungsbegriffTypeList)
)
#Html.LabelFor(model => model.CrmTypeId, new { #class = "label req" })
#(Html.Kendo().DropDownListFor(model => Model.CrmTypeId)
.Name("CrmTypeId")
.OptionLabel("Bitte auswählen...")
.BindTo(Model.CrmTypeList)
.Events(e =>
e.Select("onCrmTypeSelect"))
)
<br />
<input type="button" name="previous" class="previous action-button" value="Zurueck" />
<input type="button" name="next" class="next action-button" value="Weiter" />
</fieldset>
<fieldset>
<h2 class="fs-title">Mapping anlegen</h2>
#(Html.Kendo().Upload()
.Name("upMappingFile")
.Multiple(false)
.ShowFileList(true)
.TemplateId("fuCsvTemplate")
.Async(a => a
.AutoUpload(true)
.Save("SaveFile", "Mapping")
.Remove("RemoveFile", "Mapping")
)
.Enable(false)
.Events(e => e
.Success("onSuccess"))
.Messages(m => m
.Select("Durchsuchen...")
.HeaderStatusUploading("Uploading...")
.HeaderStatusUploaded("Fertig"))
)
<div id="gridContainer">
</div>
<div id="appendTo" class="k-block"></div>
<input type="button" name="previous" class="previous action-button" value="Zurueck" />
<input type="submit" name="submit" class="submit action-button" value="Speichern"/>
</fieldset>
#Html.Kendo().Notification().Name("crmTypeNotification")
}
Ajax-Post for dynamically creating the grid:
function onSuccess(e) {
var gridNotification = $("#gridNotification").data("kendoNotification");
var crmType = $("#CrmTypeId").data("kendoDropDownList");
var csvHeadRow = e.response.csvHeadRow
var url = '#Url.Action(MVC.Mapping.ReturnMappingGrid())';
$.ajax({
type: "POST",
url: url,
data: JSON.stringify({ csvHead: csvHeadRow, crmType: crmType.text() }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$('#gridContainer').html(data);
gridNotification.show("Die Auswahl der jeweiligen Eigenschaft erfolgt durch Klicken des jeweiligen Eigenschaft-Felds!")
var container = $(gridNotification.options.appendTo);
},
error: function (xmlHttpRequest, textStatus, errorThrown) {
debugger;
console.log(xmlHttpRequest.responseText);
console.log(textStatus);
console.log(errorThrown);
},
async: false
});
}
Partial View Grid:
#(Html.Kendo().Grid<DAKCrmImportModel.Model.Entities.Base.CrmMapping>().Name("Mappings").BindTo(Model)
.Columns(c =>
{
c.Bound(m => m.CsvColumn).Title("Spalte").Width(300);
c.Bound(m => m.CrmProperty).EditorTemplateName("PropertyId");
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Model(m =>
{
m.Id(ma => ma.Id);
m.Field(ma => ma.Id).Editable(false);
})
)
)
CrmProfile-model:
public class CrmProfile
{
public CrmProfile()
{
this.Mappings = new HashSet<CrmMapping>();
this.Jobs = new HashSet<CrmJob>();
}
[Column(Order = 1)]
[Key]
public int Id { get; set; }
[Required]
[Display(Name = "Bezeichnung")]
public string Name { get; set; }
[Display(Name = "Beschreibung")]
public string Description { get; set; }
[Required]
public string CreatedBy { get; set; }
[Column(Order = 2)]
[ForeignKey("UserGroup")]
[DatabaseGenerated(System.ComponentModel.DataAnnotations.Schema.DatabaseGeneratedOption.None)]
[Required]
[Display(Name = "Usergruppe")]
public int UserGroupId { get; set; }
public UserGroup UserGroup { get; set; }
[Column(Order = 3)]
[ForeignKey("CrmType")]
[DatabaseGenerated(System.ComponentModel.DataAnnotations.Schema.DatabaseGeneratedOption.None)]
[Required]
[Display(Name = "Einspielungstyp")]
public int CrmTypeId { get; set; }
public CrmImportType CrmType { get; set; }
[Column(Order = 4)]
[ForeignKey("OrdnungsbegriffType")]
[DatabaseGenerated(System.ComponentModel.DataAnnotations.Schema.DatabaseGeneratedOption.None)]
[Required]
[Display(Name = "Ordnungsbegrifftyp")]
public int OrdnungsbegriffTypeId { get; set; }
public OrdnungsbegriffType OrdnungsbegriffType { get; set; }
public byte[] SourceFile { get; set; }
public string SourceFileName { get; set; }
public string[] SourceFileHeadRow { get; set; }
[Required]
public DateTime CreatedAt { get; set; }
public string LastUpdatedBy { get; set; }
public DateTime? LastUpdatedAt { get; set; }
public DateTime? LastUsedAt { get; set; }
public ICollection<CrmMapping> Mappings { get; set; }
public ICollection<CrmJob> Jobs { get; set; }
[NotMapped]
public IEnumerable<SelectListItem> UserGroupList { get; set; }
[NotMapped]
public IEnumerable<SelectListItem> CrmTypeList { get; set; }
[NotMapped]
public IEnumerable<SelectListItem> OrdnungsbegriffTypeList { get; set; }
}
CrmMapping-model:
public class CrmMapping
{
[Key]
[Column(Order = 0)]
public int Id { get; set; }
[Key]
[Column(Order = 1)]
[DatabaseGenerated(System.ComponentModel.DataAnnotations.Schema.DatabaseGeneratedOption.None)]
[ForeignKey("Profile")]
public int ProfileId { get; set; }
public CrmProfile Profile { get; set; }
[Required]
public string CrmProperty { get; set;}
[Required]
public string CsvColumn { get; set; }
[Required]
public int CsvIndex { get; set; }
[UIHint("PropertyId")]
[NotMapped]
public int PropertyId { get; set; }
[NotMapped]
public IEnumerable<CrmProperty> CrmProperties { get; set; }
}
[UPDATE]
I want to post the grid-data back with ajax, but I don't seem to get the right datatype on serverside.
function postProfileData() {
var url = '/Profile/Save';
$.ajax({
type: "POST",
url: url,
data: $("#addProfileForm").serialize() + "&Mappings=" + getMappings(),
success: function (data) {
debugger;
},
error: function (xmlHttpRequest, textStatus, errorThrown) {
debugger;
console.log(xmlHttpRequest.responseText);
console.log(textStatus);
console.log(errorThrown);
},
async: false
});
}
function getMappings() {
var grid = $("#Mappings").data("kendoGrid");
debugger;
return grid._data;
}
[HttpPost]
public virtual ActionResult Save(CrmProfile crmProfile, List<CrmMapping> Mappings)
{
using (DAKCrmImportContext db = new DAKCrmImportContext())
{
crmProfile.CreatedAt = DateTime.Now;
crmProfile.CreatedBy = System.Web.HttpContext.Current.User.Identity.Name.Split('\\')[1];
try
{
db.CrmProfiles.Add(crmProfile);
db.SaveChanges();
}
catch (DbEntityValidationException e)
{
var vals = e.EntityValidationErrors;
throw;
}
}
return RedirectToAction("Add", "Mapping", crmProfile);
}
[UPDATE2] So the problem is likely that JavaScript doesn't like my Listtype (CrmMapping) and doesn't know what to do with it. I'm not quite sure why, but I think its's because its structure doesn't fit the normal id:value pair. Maybe the problem is that Id is 0 in all ListItems and I'll have to fill it manually, but CrmMapping is actually a model-class so I'd have to set it back to 0 eventually so I'd probably have to create a ViewModel just to parse the grid-data back.
public class CrmMapping
{
[Key]
[Column(Order = 0)]
public int Id { get; set; }
[Key]
[Column(Order = 1)]
[DatabaseGenerated(System.ComponentModel.DataAnnotations.Schema.DatabaseGeneratedOption.None)]
[ForeignKey("Profile")]
public int ProfileId { get; set; }
public CrmProfile Profile { get; set; }
[Required]
public string CrmProperty { get; set;}
[Required]
public string CsvColumn { get; set; }
[Required]
public int CsvIndex { get; set; }
[UIHint("PropertyId")]
[NotMapped]
public int PropertyId { get; set; }
[NotMapped]
public IEnumerable<CrmProperty> CrmProperties { get; set; }
}

Answer 1

Since you're creating the grid from the #model instead of using ajax calls for the datasource.Read, you could just create hidden inputs using a for loop, and as long as they're in the form tag they would post back.
Something like
#(Html.Kendo().Grid<DAKCrmImportModel.Model.Entities.Base.CrmMapping>().Name("Mappings").BindTo(Model)
.Columns(c =>
{
c.Bound(m => m.CsvColumn).Title("Spalte").Width(300);
c.Bound(m => m.CrmProperty).EditorTemplateName("PropertyId");
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Model(m =>
{
m.Id(ma => ma.Id);
m.Field(ma => ma.Id).Editable(false);
})
)
)
#for (int i = 0; i < Model.Count; i++)
{
#Html.Hidden("Mappings[" + i.ToString() + "].Id", Model[i].Id)
#Html.Hidden("Mappings[" + i.ToString() + "].CsvColumn", Model[i].CsvColumn)
#Html.Hidden("Mappings[" + i.ToString() + "].CrmProperty", Model[i].CrmProperty)
}
If you edit any of the columns, the new values won't get posted back using this method so you should probably wire up the ajax datasource events to Read, Create, Edit and Delete if you want to be able to maintain the grid data correctly

Answer 2

Ok, after trying a bunch of things I finally found a solution. To do this I need a javscript-expension:
$.fn.serializeObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
This is needed to serialize the form as an object instead of posting the form itself.
The next thing we have to do is create a ViewModel which has properties for the model of the form we want to submit/post and the additional data we want to get into the controller-action.
using DAKCrmImportModel.Model.Entities.Base;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace DAKCrmImport.Models
{
public class CrmProfileAddVM
{
public CrmProfile Profile { get; set; }
public CrmMapping[] Mappings { get; set; }
}
}
We have to declare CrmMapping as Array here, because thats the datatype the Telerik-grid uses.
Now let's do the ajax-function which contains our ViewModel with the form-data (Profile) and the grid._data (Mappings).
function postProfileData() {
var url = '#Url.Action(MVC.Profile.Save())';
$.ajax({
type: "POST",
url: url,
//.serialize()
//data: $("#addProfileForm").serialize(), "crmMappingList": getMappings(),
contentType: 'application/json',
data: JSON.stringify({
Profile: $("form#addProfileForm").serializeObject(),
Mappings: getMappings()
}),
//data: { Mappings: getMappings() },
success: function (data) {
debugger;
},
error: function (xmlHttpRequest, textStatus, errorThrown) {
debugger;
console.log(xmlHttpRequest.responseText);
console.log(textStatus);
console.log(errorThrown);
},
async: false
});
}
function getMappings() {
var grid = $("#Mappings").data("kendoGrid");
return grid._data;
}
Finally the last thing we have to do is change the controller-Action Parameter so that we have access to the instance of our ViewModel.
[HttpPost]
public virtual ActionResult Save(CrmProfileAddVM model)
{
using (DAKCrmImportContext db = new DAKCrmImportContext())
{
//crmProfile.CreatedAt = DateTime.Now;
//crmProfile.CreatedBy = System.Web.HttpContext.Current.User.Identity.Name.Split('\\')[1];
//try
//{
// db.CrmProfiles.Add(crmProfile);
// db.SaveChanges();
//}
//catch (DbEntityValidationException e)
//{
// var vals = e.EntityValidationErrors;
// throw;
//}
}
return RedirectToAction("Add", "Mapping", null);
}