如何為 DisplayFor() 創建 MVC Razor 模板

Question

我的視圖模型中有幾個屬性僅用於顯示，但我需要使用 jQuery 檢索它們的值以在頁面上執行計算。 標准的Html.DisplayFor()方法只是將它們的值寫入頁面。 我想創建一個剃刀模板，允許我將每個元素呈現為：

<span id="ElementsId">Element's value</span>

我知道我可以在Html.DisplayFor() 中指定一個模板來使用特定模板來呈現屬性，但在該模板中我如何識別要寫入span標簽的id屬性？

@Html.DisplayFor(model => model.Element, "MyTemplate");

Answer 1

好的，我找到了，其實很簡單。 在我的Views\\Shared\\DisplayTemplates文件夾中，我有包含以下內容的Reading.cshtml ：

@model System.Int32
<span id="@ViewData.ModelMetadata.PropertyName">@Model</span>

這使用屬性名稱作為id屬性和屬性值作為內容呈現正確的標簽：

<span id="Reading">1234</span>

在視圖文件中，可以使用以下命令調用它：

@Html.DisplayFor(model => model.Reading, "Reading")

或者，如果模型屬性使用UIHint("Reading")裝飾，則模板名稱可以不包含在DisplayFor()調用之外，它仍將使用模板進行渲染：

@Html.DisplayFor(model => model.Reading)

這應該同樣適用於自定義編輯器模板。

Answer 2

我閱讀了許多關於為布爾屬性定義@Html.DisplayFor模板的 SO 帖子，但我無法清楚地理解它們。 您的問題就此結束，在掌握了它之后，我決定添加一個新答案，包括實現該問題所需的所有步驟。 它可能對其他人有幫助。

1. 創建模板

首先需要在下面的路徑中添加一個Partial View （路徑很重要）：

Views/Shared/DisplayTemplates/

例如，我創建了一個名為_ElementTemplate的Partial View並像這樣填充它：

<span>
    @(@Model ? "Yes" : "No")
</span>

2. 在模型中添加UIHint

要在您的property和template之間建立連接，您應該在模型類中添加如下所示的UIHint屬性：

[UIHint("_YesOrNoTemplate")]
public bool MyProperty { get; set; }

3.在視圖中使用@Html.DisplayNameFor

在您需要此屬性的每個視圖中，您可以使用以下代碼：

<div>
    @Html.DisplayFor(modelItem => item.MyProperty)
</div>

輸出

上面的代碼在我的示例中呈現為下面的代碼（ if (MyProperty == true) ）：

<div>
    <span>
        Yes
    </span>
</div>

設置屬性

要設置id或其他 html 屬性，您可以像這樣使用ModelMetadata ：

<span id="@ViewData.ModelMetadata.PropertyName">
    @(@Model ? "Yes" : "No")
</span>

帶屬性的輸出

<div id="MyProperty">
    <span>
        Yes
    </span>
</div>

Answer 3

您可以將此id視圖模型的一部分並在顯示模板中使用它：

<span id="@Model.Id">@Html.DisplayFor(x => x.Value)</span>

Answer 4

有一篇文章解釋了 Razor 中的Templates （顯示 + 編輯器）以及UIHint屬性。

Answer 5

我遇到了與原始帖子完全相同的問題。

不確定最后一條評論是否有效。 它會使 HTML id 屬性成為運行時值，因此不能用設計時名稱引用。

我使用了 DisplayFor 的重載，它允許您將新對象添加到數據字典 (ViewBag)

我的模型是一個名為 Project 的 C# 對象，具有各種屬性。 在我看來，我有這個：

@Html.DisplayFor(model => model.ProjectName, "StringDisplaySetHtmlID", new { HtmlID = "project-name" })

這是使用一個名為 StringDisplaySetHtmlID 的自定義模板，最后一個參數將一個鍵值對添加到 Viewbag。

我的模板文件如下所示：

@model string
<span class = "display-field" id = "@(ViewBag.HtmlID)">@Model</span> 

我還在此處設置了一個用於樣式目的的類。 我使用了鍵名 HtmlID 而不僅僅是 ID 來避免潛在的常見命名沖突。

現在在我的 javascript 中，我可以使用以下 jquery 獲取 span 的內容：

var projectName = $('#project-name').text()

Answer 6

構建將輸出以下內容的顯示模板的最佳方法：

<span id="ElementsId">Element's value</span>

會是這樣：

<span id="@Html.IdForModel()">@Html.DisplayTextFor(m => m)</span>

首次發布此問題時，這些助手可能還不存在，但這以大衛的回答為基礎，有兩種方式：

1. 使用@Html.DisplayTextFor(m => m)而不是@Model仍然會在呈現值時使用數據注釋，而不是僅僅在其上運行ToString() 。
2. 在模型嵌套或重復的情況下，使用@Html.IdForModel()而不是@ViewData.ModelMetadata.PropertyName會更可取，並且 ID 不會只是屬性名稱。