Asp.net mvc 弹出编辑模式下的多列

我认为弹出式编辑模式是最好的编辑模式，但是对于一个更大的模型，弹出式会变得很长，看起来不太好

我已经找到了一个解决方案，我很好奇你对这个解决方案的想法/反馈/增强

我创建了两个自定义属性：

public class NumberOfColumnsAttribute : Attribute, IMetadataAware
{
    private readonly int _numberOfColumns;

    public NumberOfColumnsAttribute(int numberOfColumns)
    {
        _numberOfColumns = numberOfColumns;
    }

    public void OnMetadataCreated(ModelMetadata metadata)
    {
        if (!metadata.AdditionalValues.ContainsKey("NumberOfColumns"))
        {
            metadata.AdditionalValues.Add("NumberOfColumns", _numberOfColumns);
        }
    }
}

public class ShowInColumnAttribute : Attribute, IMetadataAware
{
    private readonly int _column;

    public ShowInColumnAttribute(int column)
    {
        _column = column;
    }

    public void OnMetadataCreated(ModelMetadata metadata)
    {
        if (!metadata.AdditionalValues.ContainsKey("ShowInColumn"))
        {
            metadata.AdditionalValues.Add("ShowInColumn", _column);
        }
    }
}

然后在编辑模型上方使用[NumberOfColumns（m）]属性，并在属性上方使用[ShowInColumn（n）]属性（如果未应用任何属性，则假定n=1）

我在Views/Shared/EditorModels/中创建了一个Object.cshtml文件，如下所示

@if (ViewData.TemplateInfo.TemplateDepth > 1)
{
    @ViewData.ModelMetadata.SimpleDisplayText
} else {

    for (var i = 1; i <= (int)(!ViewData.ModelMetadata.AdditionalValues.ContainsKey("NumberOfColumns") ? 1 : ViewData.ModelMetadata.AdditionalValues["NumberOfColumns"]);i++)
    {
        <div class="editor-column">
        @foreach (var prop in ViewData.ModelMetadata.Properties.Where(pm => pm.ShowForEdit && !ViewData.TemplateInfo.Visited(pm) && ((int)(!pm.AdditionalValues.ContainsKey("ShowInColumn") ? 1 : pm.AdditionalValues["ShowInColumn"])) == i))
        {
            if (prop.HideSurroundingHtml) {
                @Html.Editor(prop.PropertyName)
            } else {
                <div class="editor-label">
                    @Html.Label(prop.PropertyName)
                    @(prop.IsRequired ? "*" : "")
                </div>
                <div class="editor-field">
                    @Html.Editor(prop.PropertyName)
                    @Html.ValidationMessage(prop.PropertyName, "*")
                </div>
            }
        }
        </div>
    }
    <div class="editor-seperator"></div>
}

---

你觉得怎么样？

我想，这会简单得多。请在宽屏幕上运行此脚本

var crudServiceBaseUrl=“///demos.telerik.com/kendo ui/service”，
dataSource=新建kendo.data.dataSource({
运输：{
阅读：{
url:crudServiceBaseUrl+“/Products”，
数据类型：“jsonp”
},
更新：{
url:crudServiceBaseUrl+“/Products/Update”，
数据类型：“jsonp”
},
销毁：{
url:crudServiceBaseUrl+“/Products/Destroy”，
数据类型：“jsonp”
},
创建：{
url:crudServiceBaseUrl+“/Products/Create”，
数据类型：“jsonp”
},
parameterMap：功能（选项、操作）{
if（操作！=“读取”&&options.models）{
返回{models:kendo.stringify（options.models）}；
}
}
},
批次：对，
页面大小：20，
模式：{
型号：{
id:“产品id”，
字段：{
ProductID:{可编辑：false，可空：true}，
产品名称：{验证：{必需：true}}，
单价：{type:“number”，验证：{required:true，min:1}，
中止：{type:“boolean”}，
UnitsInStock:{type:“number”，验证：{min:0，必需：true}
}
}
}
});
$（“#网格”）.kendoGrid({
数据源：数据源，
pageable:对，
身高：550，
工具栏：[“创建”]，
栏目：[
{字段：“产品名称”，标题：“产品名称”}，
{字段：“单价”，标题：“单价”，格式：{0:c}，宽度：{120px}，
{字段：“单位库存”，标题：“库存单位”，宽度：“120px”}，
{字段：“中断”，宽度：“120px”}，
{命令：[“编辑”、“销毁”]，标题：“”，宽度：“250px”}]，
可编辑：“弹出”，
编辑：fnMultipleLayoutForm
});
函数fnMultipleLayoutForm（）{
$（.k-edit-form-container”）.prepend（“”）；
$（.k-edit-form-container”）.children（.k-edit-label，.k-edit-field”）.slice（0，parseInt（$（.k-edit-form-container”）.children（.k-edit-label，.k-edit-field”）.length/2））.appendTo（.column1”）；
$（.k-edit-form-container”）.children（.k-edit-label，.k-edit-field”）.appendTo（.column2”）；
$（.k-edit-form-container”）.css（“宽度”、“自动”）；
$（'.k-window'）.css（{top:'50%'，left:'50%'，margin:'-'+（$（'.k-window'）.height（）/2）+'px 0-'+（$（'.k-window'）.width（）/2）+'px'}）；
};
干得不错，真是太棒了！您如何允许一个特别大的控件跨越3列？
.k-edit-form-container {
    width: auto;
}
.editor-column {
    width: 400px;
    float: left;
}
.editor-seperator {
    clear: both;
}