Asp.Net MVC Master Detail view using kendo grid - asp.net-mvc-5

Question

I want to create contacts view. My model is:
public class Contact
{
public Contact()
{
Documents = new HashSet<Document>();
}
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string ContactNo { get; set; }
public string EmailId { get; set; }
public string Address { get; set; }
public string Notes { get; set; }
public ICollection<Document> Documents { get; set; }
}
public class Document
{
public Document() { }
public int Id { get; set; }
public int ContactId { get; set; }
public string DocumentNo { get; set; }
public string DocumentType { get; set; }
public byte[] FileContent { get; set; }
public string FileName { get; set; }
public int ContentLength { get; set; }
}
I have created view with Contact details and Grid for documents. Actually I am new to MVC so I am searched internet how to achieve this. But I cannot find any workable solution yet. I do not know how to add one or more document and persist document details in grid. What I am trying to achieve is save contact information with uploaded documents (one or more) while submit the form.

Answer 1

You can use the below code to achieve what you desire, using a parent child combination.
The below code is just a sample providing a view only option to detail view.
#model Models.Contact
<div id="ModelView">
<div >#Html.Label("Name")</div>
<div >
#Html.TextBoxFor(model => model.FirstName)
#Html.TextBoxFor(model => model.LastName)
</div>
...
...
<div id="grid"></div>
</div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: model.Documents,
schema: {
model: {
fields: {
//append fiels as per your document model
FileName: { type: "string" },
DocumentType: { type: "number" }
}
}
},
pageSize: 20
},
dataBound: OnDataBound
height: 550,
scrollable: true,
sortable: true,
columns: [
"FileName",
{ field: "FileName", title: "File Name", width: "130px", clientTemplate: "<input type='file' name='docs'/>" },
{ field: "DocumentType", title: "Document Type", width: "130px" }
]
});
});
function OnDataBound(e){
$('[name=docs]').kendoUpload(
{
async:
{
saveUrl: ......
removeUrl: ........
autoUpload: true
},
upload: onUpload, //Your custom function for uploader
success: onSuccess //Write the below function to display approprate message
});
}
</script>
Note: Above code will upload documents one by One rather than all documents at once, just for load balancing.