ASP.NET MVC Razor 条件渲染元素答案

【问题标题】：ASP.NET MVC Razor conditional rendering an elementASP.NET MVC Razor 条件渲染元素
【发布时间】：2021-03-10 20:01:56
【问题描述】：

如何在 Razor 2 中有条件地渲染 HTML 元素？

例如，假设我有标签

    <div class="someclass">
         <p>@somevalue</p>
    </div>

如果@somevalue 的值等于1，我想抑制标记的呈现。在Razor 中是否有一种简单的方法来执行此操作，类似于我可能“隐藏” 在浏览器中使用 Knockout.js 标记，我可能会：

    <div class="someclass" data-bind="showWhenTrue: someValue != 1">
         <p data-bind="text: someValue"></p>
    </div>

目前，我最好的 Razor 替代方案是这样做：

      @if (someValue != 1) {
         <div class="someclass">
               <p>@somevalue</p>
         </div>
      }

【问题讨论】：

标签： asp.net-mvc razor

【解决方案1】：

有很多方法可以做到这一点。首先，应该注意的是，您的淘汰代码实际上并没有从输出中删除 html，它只是将其显示设置为隐藏。

您拥有的剃刀代码实际上从呈现的 HTML 中删除了代码，所以这是完全不同的事情。

要回答您的问题，我们需要知道您要达到的目标是什么。如果你只是想隐藏显示，你可以简单地做这样的事情：

<div class="someclass" style="display: @{ somevalue == 1 ? @:"none" : @:"block" };">
     <p>@somevalue</p>
</div>

你也可以用一个类来做：

<div class="someclass @{ somevalue == 1 ? @:"HideMe" : @:"ShowMe" }">
     <p>@somevalue</p>
</div>

如果你想从输出中删除代码，那么你可以做你已经做过的事情。我不确定你觉得它有什么令人反感的......但如果你想要其他替代方案，你可以创建一个 Html 帮助器，你可以使用 razor 帮助器，你可以使用 Display 或 EditorTemplate....

列表实际上很长，我只是在摸索……

【讨论】：

我是这样做的：@(string.IsNullOrEmpty(somevalue) ? "hideme" : "")
令人反感的是 @( ...) 有时会破坏整个文档的自动格式设置和剩余标签内容的智能感知。 knockoutjs 有 data-bind="if: someBoolean" 和 angular 有 *ngIf="someBoolean"。我本来希望 razor 有一些内置的东西来帮助我们保持标记整洁
“hidden”不是 CSS 属性“display”的有效值。
我在 style 属性中使用 @: 语法时遇到了问题。我的解决方案是添加一个剃刀字符串变量 @{var displayContent= ViewBag.ShowConditition ？ "block" : "hide"} 并渲染 html,

content

【解决方案2】：

一个优雅（且可重复使用）的解决方案是为 Html 编写一个扩展方法来进行文本的条件渲染（有点像 Excel 中的 IF()） - 例如

   public static MvcHtmlString ConditionalRender(this HtmlHelper helper, bool condition, string trueString, string falseString = "")
   {
       return MvcHtmlString.Create((condition) ? trueString : falseString);
   }

然后你可以在你的代码中使用它：

   <div class="someclass" style="display: @Html.ConditionalRender(somevalue == 1, "none","block")">
        <p>@somevalue</p>
   </div>

【讨论】：