如何使用动态模型创建动态表

Question

I want to make one table, so I can load a class into it and the table will be automatically generated.

This is what I am looking for, but I have no idea how I can realize this:

@model dynamic
<table>
<thead>
    <tr>
    @foreach(var record in model.results)
    {
        <th>@Html.labelfor(item.indexof(...))</th>
    }

    </tr>
</thead>
@if (Model.Result.Count() > 0)
{
    <tbody>
        @for(int i = 0; i < Model.Result.Count(); i++)
        {
            <tr>
                @foreach (var item in Model.Result)
                {  
                    <td>@item.indexOf(...)</td>
                }
            </tr>
        }
    </tbody>
}
else
{
    <p class="errordata">No data found...</p>
}

This is my ViewModel:

public class issueModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Color { get; set; }
    public string FontColor { get; set; }
    public int Count { get; set; }
    public string Description { get; set; }
    public string Abbreviation { get; set; }
    public string icon { get; set; }
    public List<dynamic> Result { get; set; }
}

In the "List result" can be different, this is an example class that might be in the result:

public partial class someClass
{
    [Display(Name = "PID_1")]
    public int? someProp_1{ get; set; }

    [Display(Name = "PID_2")]
    public int? someProp_2{ get; set; }

    [StringLength(255)]
    public string PermName1 { get; set; }

    [StringLength(255)]
    public string PermName2 { get; set; }

    public string description{ get; set; }

    public int? Prioriteit { get; set; }

    [StringLength(50)]
    public string Login { get; set; }

    public int id{ get; set; }
}

I tried to use .indexOf on a dynamic item, but that doesn't work. Is the somehow a way to do this? Or do I have to make separate views with separate tables?

Answer 1

You need Reflection for this scenario. You should build a new Html Helper. This helper iterate over all public properties of your model, and create a table with that info, then you only need to call helper in your view:

Helper Class:

namespace System.Web.Mvc
{
    public static class TableHelperExtensions
    {
        public static string BuildTr(object _obj)
        {
            var properties = _obj.GetType().GetProperties();
            var tr = "<tr>";

            foreach(var property in properties) {
                tr += String.Format("<td>{0}</td>", property.GetValue(_obj));
            }

            tr += "</tr>";

            return (tr);
        }

        public static string BuildTrHeader(object _obj)
        {
            var properties = _obj.GetType().GetProperties();
            var tr = "<tr>";

            foreach (var property in properties)
            {
                tr += String.Format("<th>{0}</th>", property.Name);
            }

            tr += "</tr>";

            return (tr);
        }

        public static HtmlString BuildTable(this HtmlHelper helper, object _obj)
        {
            if(!IsCollection(_obj.GetType())) {
                throw new InvalidOperationException("BuildTable helper can be called only on collection object");
            }

            var tableStart = String.Format(@"<table>
                            <thead>
                                {0}
                            </thead>
                            <tbody>", BuildTrHeader((_obj as IEnumerable<object>).ElementAt(0)));

            var tableBody = String.Empty;

            var coll = _obj as IEnumerable<object>;

            foreach(var _ in coll){
                tableBody += BuildTr(_);
            }

            var tableEnd = @"
                            </tbody>
                        </table>";;

            return new HtmlString(tableStart + tableBody + tableEnd);
        }

        static bool IsCollection(Type type)
        {
            return type.GetInterface(typeof(IEnumerable<>).FullName) != null;
        } 
    }
}

Example view:

@{
    Layout = null;

    var objs = new List<object>();

    objs.Add(new { a = "Hello", b = "World" });
    objs.Add(new { a = "World", b = "Hello" });
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Test</title>
</head>
<body>
    @Html.BuildTable(objs)
</body>
</html>

Answer 2

Take a look at ModelMetadata . Also look at ModelMetadataProvider and maybe even CustomMetadataProvider.

I use these to generically render complete editor dialogs.

ModelMetadata metadata = (ModelMetadata)ViewData.ModelMetadata;
ModelMetadata[] properties = metadata.Properties.Where(pm => pm.ShowForEdit && (pm.IsReadOnly || !ViewData.TemplateInfo.Visited(pm))).ToArray();
foreach (TemplateMetadata prop in properties)
{
    if (!prop.HideSurroundingHtml)
    {
        @Html.Label(prop.PropertyName, prop.DisplayName + ((prop.ModelType != typeof(bool) && prop.IsRequired) ? " *" : ""))
    }
}