ASP.NET MVC Razor条件渲染元素

Question

如何在 Razor 2 中有条件地呈现 HTML 元素？

例如，假设我有标记：

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

如果@somevalue的值等于1，我希望抑制<-div->标签的渲染。在Razor中是否有一种简单的方法来实现这一点，类似于我如何在浏览器中使用Knockout.js“隐藏”<-div->标签的方式：

    <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>
      }

- user18539

Answer 1

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

而你所使用的razor代码，则会从渲染的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....

这个列表实际上非常长，我只是提及其中一部分...

- Erik Funkenbusch

---

我是这样做的： @(string.IsNullOrEmpty(somevalue) ? "hideme" : "") - user18539

有问题的是@(…)有时会破坏整个文档的自动格式化和标签内容其余部分的智能感知。Knockoutjs 使用 data-bind="if: someBoolean"，Angular 使用 *ngIf="someBoolean"。我本来期望 Razor 会有类似内置功能，帮助我们保持标记的清晰简洁。 - Brian Lowe

“hidden” 不是 CSS 属性 “display”的有效值。 - Jack Miller

我在使用@：语法时遇到了问题，它位于样式属性内。我的解决方案是添加一个Razor字符串变量@{var displayContent= ViewBag.ShowConditition ? "block" : "hide"}并呈现HTML，<div style="display: @displayContent"> <p>内容</p> </div> - Bender

Answer 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>

- Andy Blackman