顯示Html.ListBoxFor關聯類的一個附加屬性

Question

編輯和部分答案：我不知道如何顯示多列，但如果不是這樣，則必須在Call類中重寫ToString。

---

我有Person （他們接聽電話）：

 public class Person {
        public int Id { get; set; }

        [DisplayName("First Name")]
        public string FirstName { get; set; }

        [DisplayName("Last Name")]
        public string LastName { get; set; }

        public virtual ICollection<Call> ReceivedCalls { get; set; }
    }

一個類ApplicationUser （它們進行調用）：

 public class ApplicationUser : IdentityUser {
        public virtual ICollection<Call> MadeCalls { get; set; }
 }

它們之間的關聯類是Call ：

 public class Call {
        public int Id { get; set; }
        public virtual Person Callee { get; set; }
        public virtual ApplicationUser Caller { get; set; }
        public DateTime TimeStamp { get; set; } //Additional Attribute
    }

他們在數據庫中協同工作非常出色。 但是我在使用@Html.ListBoxFor方法顯示ListBox時遇到麻煩，在每行中都會有誰調用的信息以及何時調用的信息： Caller.UserName | Call.TimeStamp 每個接聽的電話（人）的Caller.UserName | Call.TimeStamp 。

我想在Razor View中以強烈反對的方式顯示這些信息：

@model WebApplication2.Models.Person

我已經試過了：

@Html.ListBoxFor(m => m.ReceivedCalls, new MultiSelectList(Model.ReceivedCalls, "TimeStamp" ), new {Multiple = "multiple"})

它正在被翻譯（輸出HTML）為：

<select Multiple="multiple" id="ReceivedCalls" multiple="multiple" name="ReceivedCalls"><option selected="selected">System.Data.Entity.DynamicProxies.Call_2FC3E1C25C19BA21E6B64CAB2894602434775435359AAB76E58C6F8411451A49</option>
<option selected="selected">System.Data.Entity.DynamicProxies.Call_2FC3E1C25C19BA21E6B64CAB2894602434775435359AAB76E58C6F8411451A49</option>
</select>

它看起來像：

問題：如何顯示ListBox，每行中哪里有誰呼叫的信息以及何時呼叫： Caller.UserName | Call.TimeStamp 為每個接聽的電話（按人）顯示的Caller.UserName | Call.TimeStamp 。

---

**編輯：**

有一些語法錯誤：

        // Create collection of anonymous objects (adjust format to suit your needs)
        var receivedCalls = person.ReceivedCalls.Select(c => new {
            ID = c.Id,
            DisplayName = string.Format("{0}: {1:D}", c.Caller.UserName, c.TimeStamp)
        });
        // Initialise view model
        PersonVM model = new PersonVM();
        // Map properties from person to model

        // Assign select list
        model.CallList = new MultiSelectList(receivedCalls, "ID", "DisplaName");

視圖：

@Html.ListBoxFor(m => m.ReceivedCalls, new MultiSelectList(Model.ReceivedCalls))

---

如果我只是在Call重寫ToString，結果將完全相同：

   public override string ToString() {
            if (Caller != null)
                return Caller.UserName + " called at " + TimeStamp;
            return "called at " + TimeStamp;
        }

@Html.ListBoxFor(m => m.ReceivedCalls, new MultiSelectList(Model.ReceivedCalls, "TimeStamp"), new { Multiple = "multiple", style = "width: 100%;" })

所以我認為它仍然依賴於ToString。

Answer 1

您應該創建一個視圖模型來顯示和綁定您的屬性

查看模型

public class PersonVM
{
  public int Id { get; set; }
  public string FirstName { get; set; }
  public string LastName { get; set; }
  public int[] ReceivedCalls { get; set; } // this will bind to the selected calls
  public MultiSelectList CallList { get; set; } // to display the calls   
}

調節器

// Create collection of anonymous objects (adjust format to suit your needs)
var receivedCalls = person.ReceivedCalls.Select(c => new 
{
  ID = c.ID,
  DisplayName = string.Format("{0}: {1:D}", c.Callee.UserName, c.TimeStamp)
}
// Initialise view model
PersonVM model = new PersonVM();
// Map properties from person to model
...
// Assign select list
model.CallList  = new MultiSelectList(receivedCalls , "ID", "DisplaName");
return View(model);

視圖

@model YourAssembly.PersonVM
....
@Html.ListBoxFor(m => m.ReceivedCalls, Model.CallList)

編輯

根據OP的要求，即最近調用的集合僅用於顯示（而不用於編輯），調整視圖以使用無序列表（基於OP的模型，而不是上面建議的視圖模型）

@model WebApplication2.Models.Person
....
<ul>
  @foreach(var call in Model.ReceivedCalls)
  {
    <li>@call</li> // this will use the .ToString() method
  }
</ul>

然后只需根據需要設置元素的樣式，例如設置固定高度並使其可滾動且沒有項目符號

<style>
  ul {
    height:60px;
    overflow-y:scroll;
  }
  li {
    list-style:none;
  }
</style>