Question

I am trying to display the values from a partial view within the main Index view but having a hard time understanding why the [Display(Name = "")] attribute isn’t being respected. The controller has a class where two of the properties have the [Display(Name = "")] attribute set but not displaying.

I’m fine if I can’t make use of these properties with what I am doing so long as some understanding as to why it’s not possible to do without something like @Html.DisplayFor or @Html.EditorFor would be helpful.

There is also a good chance I may have something wrong in the code which is the reason why.

Controller

    [OutputCache(Duration = 0)]
    public JsonResult OrderPreview(int id)
    {
        if (ModelState.IsValid)
        {
            try
            {
                // Commented code
                        try
                        {
                            byte[] data = image.Save(image);

                            // Testing with a Dictionary works but maybe not ideal???
                            //Dictionary<string,object> attributes = new Dictionary<string, object>();
                            //attributes.Add("Job", order.Job);
                            //attributes.Add("Order Id", id);
                            //attributes.Add("Customer Count", order.CustomerCount);
                            //attributes.Add("Height", design.Height);
                            //attributes.Add("Width", design.Width);

                            var orderPreviewResult = new OrderPreviewResult.OrderPreview()
                                                         {
                                                             Job = order.Job,
                                                             OrderId = id,
                                                             CustomerCount = order.CustomerCount,
                                                             Height = design.Height,
                                                             Width = design.Width
                                                         };

                            var attributeList = new List<OrderPreviewResult.OrderPreview>();
                            attributeList.Add(orderPreviewResult);

                            return Json(new OrderPreviewResult()
                            {
                                //Attributes = attributes,
                                OrderPreviewAttributes = attributeList,
                                PngBase64 = Convert.ToBase64String(data)
                            }, JsonRequestBehavior.AllowGet);
                // Commented code
            }
            catch (Exception e)
            {
                ModelState.AddModelError("", e.Message);
            }
        }

        var result = new OrderPreviewResult();
        result.Errors = new List<string>();

        // Add the errors to the result
        foreach (var value in ModelState)
        {
            foreach (var error in value.Value.Errors)
            {
                result.Errors.Add(error.ErrorMessage);
            }
        }

        return Json(result, JsonRequestBehavior.AllowGet);
    }
}

public class OrderPreviewResult
{
    public string PngBase64 { get; set; }
    public List<string> Errors { get; set; }
    //public Dictionary<string, object> Attributes { get; set; }

    public List<OrderPreview> OrderPreviewAttributes { get; set; }

    public class OrderPreview
    {
        [Display(Name = "Order Id")]
        public int OrderId { get; set; }

        public string Job { get; set; }

        [Display(Name = "Customer Count")]
        public uint CustomerCount { get; set; }

        public uint Height { get; set; }

        public uint Width { get; set; }
    }
}

Index.cshtml View

@{
    ViewBag.Title = "Orders";
}

@section css
{
    <link href="@Url.Content("~/Content/DataTables-1.8.2/css/DT_bootstrap.css")" rel="stylesheet" type="text/css" />
}


@section scripts
{
    <script src="@Url.Content("~/Content/Datatables-1.8.2/js/jquery.dataTables.min.js")" type="text/javascript"></script>
}

<div class="page-header">
    <h1>Orders</h1>
</div>

<script type="text/javascript">

$(document).ready(function () {
        // Commented code
});

function OnShowPreview() {
    $("#LoadingIndicator").show();
    $("#PreviewImage").hide();
    $("#PreviewErrorText").hide();
    $("#PreviewAttributesText").hide();

    var id = $('.modal-body #orderId').val();

    $.ajax({
        type: "POST",
        url: '@Url.Action("OrderPreview")/' + id,
        data: id,

        success: function (data) {
            $("#LoadingIndicator").hide();

            if (data.Errors != null) {

                var errorList = $("#PreviewErrorText ul");
                errorList.html('');

                $(data.Errors).each(function (i, item) {
                    errorList.append('<li>' + item + '</li>');
                });

                $("#PreviewErrorText").show();
            } else {
                $("#PreviewImage").attr('src', 'data:image/png;base64,' + data.PngBase64);
                $("#PreviewImage").show();

                if (/* data.Attributes != null */ data.OrderPreviewAttributes != null) {

                    //var attributes = data.Attributes;
                    var attributes = data.OrderPreviewAttributes[0];

                    var attributeList = $("#PreviewAttributesText");
                    attributeList.html('');
                    attributeList.append('<h4>Attributes:</h4>');

                    var table = $("<table class='table table-condensed table-striped'>");

                    for (var key in attributes) {
                        if (attributes[key] != null) {
                            if (attributes.hasOwnProperty(key)) { // this will check if key is owned by data object and not by any of it's ancestors
                                table.append('<tr><th scope="row">' + key + ':</th><td>' + attributes[key] + '</td></tr>');
                            }
                        }
                    }

                    table.appendTo(attributeList);

                    $("#PreviewAttributesText").show();
                }
            }
        }
    });
}

function GeneratePreview(e) {
    // Prevent the default submit from occurring
    if (e.preventDefault)
        e.preventDefault();
    else
    //fix for IE
        e.returnValue = false;

    $('.modal-body #orderId').val(e.srcElement.id);

    // Show the dialog
    $('#OrderPreviewModal').modal('show');
}

</script>

@Html.Partial("_OrderPreview")

_OrderPreview.cshtml Partial View

<div class="modal hide fade" id="OrderPreviewModal" tabindex="-1" role="dialog">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3 id="OrderPreviewModalLabel">Order Preview</h3>
    </div>
    <div class="modal-body">
        <div>
            <input type="hidden" name="orderId" id="orderId" value="" />
            <div id="LoadingIndicator" style="display: table-cell; vertical-align: middle">
                <img alt="Loading..." src="@Url.Content("~/Content/ajax-loader.gif")" style="display:block; margin-left: auto; margin-right: auto" />
            </div>
            <img id="PreviewImage" alt="Preview" src="" style="display: block; margin-left: auto; margin-right: auto" />

            <div id="PreviewAttributesText">

            </div>

            <div id="PreviewErrorText" style="color: red">
                <p>Errors occurred:</p>
                <ul />
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Close</button>
    </div>
</div>

Answer 1

Sometimes you need the DisplayName of a Model property, and you don’t want/need to use @Html.DisplayFor()

So, you can make a HtmlHelper to just retrieve the DisplayName for a property.

public static MvcHtmlString GetDisplayName<TModel, TProperty>( this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression )
{
    var metaData = ModelMetadata.FromLambdaExpression<TModel, TProperty>(expression, htmlHelper.ViewData);
    string value = metaData.DisplayName ?? (metaData.PropertyName ?? ExpressionHelper.GetExpressionText(expression));
    return MvcHtmlString.Create(value);
}

And in your view, just use:

@Html.GetDisplayName(x => x.YourProperty)