Представление Asp.Net MVC Master Detail с использованием сетки кендо

Я хочу создать вид контактов. Моя модель:

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; }
}

Я создал представление с контактными данными и сеткой для документов. На самом деле я новичок в MVC, поэтому я искал в Интернете, как этого добиться. Но я пока не могу найти никакого работающего решения. Я не знаю, как добавить один или несколько документов и сохранить сведения о документе в сетке. Чего я пытаюсь добиться, так это сохранить контактную информацию с загруженными документами (одним или несколькими) при отправке формы.


kendo-grid asp.net-mvc-5 kendo-asp.net-mvc telerik-mvc
person Arun    schedule 07.07.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать приведенный ниже код для достижения желаемого, используя комбинацию родительского и дочернего элементов. Приведенный ниже код является всего лишь примером, предоставляющим возможность просмотра только для подробного просмотра.

@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>

Примечание. Приведенный выше код будет загружать документы один за другим, а не все документы сразу, просто для балансировки нагрузки.

person D_Learning    schedule 07.07.2014
comment
На самом деле, у меня есть представление с одной контактной моделью и сеткой для документов. Мой вопрос заключается в том, как использовать элемент управления загрузкой внутри сетки и опубликовать его с помощью события отправки. Я хочу загрузить более одного файла. - person Arun; 08.07.2014
comment
Да, вы можете добиться того же, что и выше, с той лишь разницей, что вам нужно будет указать отдельный контроллер создания/обновления/чтения для модели документа для лучшего контроля над вставкой и обновлением. - person D_Learning; 08.07.2014
comment
@Arun Я предполагаю, что вы не просматриваете модель контактов в сетке, как я показал, это правильно? - person D_Learning; 08.07.2014
comment
Да, я не использую сетку для модели контактов. Предположим, если я использую отдельный контроллер для модели документа, как он будет связан с ContactId (внешний ключ)? Потому что идентификатор контакта создается после вставки в базу данных. - person Arun; 09.07.2014
comment
Есть много способов добиться вышеизложенного с использованием разных контроллеров, но если вы хотите использовать свою текущую структуру, тогда также будет работать приведенный выше код. Единственная функция js, которую вам нужно добавить, будет onSuccess, в которой вам нужно будет добавить информацию о документе из загружаемого файла в сетку, чтобы эта информация была захвачена основной моделью (моделью контактов). - person D_Learning; 09.07.2014