Question

我想创建联系人视图。我的模特是：

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的新手，所以我搜索互联网如何实现这一目标。但我找不到任何可行的解决方案。我不知道如何添加一个或多个文档并在网格中保留文档详细信息。我想要实现的是在提交表单时将联系信息与上传的文档（一个或多个）保存在一起。

Answer 1

您可以使用以下代码，使用父子组合实现您的目标。以下代码只是提供详细视图的仅查看选项的示例。

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

注意：上面的代码将逐个上传文档，而不是一次上传所有文档，仅用于负载平衡。

使用kendo网格的Asp.Net MVC Master Detail视图

1 个答案: