如何更优雅地禁用按钮答案

【问题标题】：How to disable a button more elegantly如何更优雅地禁用按钮
【发布时间】：2012-04-27 07:41:17
【问题描述】：

我的观点之一是以下剃须刀代码：

@if (item.PMApproved != true) {
                    <input type="button" class="btnresetinvoice button" value="Reset" data-invoiceid="@item.InvoiceId" />
                }
                else {
                    <input type="button" class="btnresetinvoice button" value="Reset" data-invoiceid="@item.InvoiceId" disabled="disabled" />
                }

相当粗糙。基本上我想在特定条件下禁用按钮，因为您可以从代码中解决问题。什么是更理想的方法？

【问题讨论】：

这是什么语言（除了 HTML）？
什么可能更可取？您在自己的解决方案中发现了哪些缺陷？
razor template engine 允许通过 @ 前缀编写 C# 脚本。

标签： html asp.net-mvc-3 razor

【解决方案1】：

我不知道您使用的是什么语言，但您可以将 if 语句移到更接近两行之间的实际差异：

<input type="button" class="btnresetinvoice button" value="Reset"
       data-invoiceid="@item.InvoiceId"
       @{ if(item.PMApproved != true) { 
             @:disabled="disabled" 
        } }
/>

【讨论】：

似乎不接受 if 语句中的禁用部分。它说当前上下文中不存在名称“禁用”
@AnonyMouse - 感谢 Yogu，现已修复。将来，您应该在问题中包含语言，这样人们就不必猜测语法了。
我正在尝试在我的代码中使用它，但@: 似乎在我的代码中隐藏了}，这会导致语法错误，对此有何想法？
@Mykroft 也许尝试将明文放在自己的行上？还是只是 <% ... %> 语法？
我最终选择了this.write。没什么大不了的，但您可能需要重新检查答案中的代码，并确保它与最后的 /> 一起使用。

【解决方案2】：

帮助者可以提供帮助：

public static class HtmlExtensions
{
    public static IHtmlString ApproveButton(this HtmlHelper htmlHelper, MyViewModel item)
    {
        var button = new TagBuilder("input");
        button.Attributes["type"] = "button";
        button.Attributes["value"] = "Reset";
        button.AddCssClass("btnresetinvoice");
        button.AddCssClass("button");
        button.Attributes["data-invoiceid"] = item.InvoiceId.ToString();
        if (item.PMApproved)
        {
            button.Attributes["disabled"] = "disabled";
        }
        return new HtmlString(button.ToString(TagRenderMode.SelfClosing));
    }
}

然后：

@Html.ApproveButton(item)

【讨论】：

【解决方案3】：

试试这个

<button type="submit" disabled="@(!item.PMApproved)"></button>

【讨论】：

此页面上唯一适用于我的解决方案.Net Core 2.1

【解决方案4】：

<input type="button" value="Reset" @{@((!item.PMApproved) ? null : new { disabled = "disabled" })}; />

不需要那些臃肿的代码，保持简单:-)

【讨论】：

【解决方案5】：

一种以标记为中心的解决方案，辅以一种新的扩展方法：

public static class HtmlExtensions
{
   public static HtmlString DisabledIf(this HtmlHelper html, bool condition)
   {
      return new HtmlString(condition ? "disabled=\"disabled\"" : "");
   }
}

在您看来，重复使用 wazoo：

<button type="reset" @Html.DisabledIf(someCondition)>Clear Fields</button>

很好地可重用，并且渲染的标记在空白方面非常干净：

<button type="reset" disabled="disabled">Clear Fields</button>

【讨论】：

真正遵循框架精神的出色解决方案。确保将方法放在 MVC 可以看到的命名空间中。

【解决方案6】：

<button @(isEnabled ? null : "disabled")>Butt</button>

【讨论】：

【解决方案7】：

可能的简单方法：

<input type="button" @(item.PMApproved ? "disabled" : "") />

【讨论】：

【解决方案8】：

使用asp.net mvc5剃须刀：

@if(condition)
{
   <button data-toggle="collapse" data-target="#content">Details</button>
}
else
{
   <button disabled>Details</button>
}

它会阻止尝试从 DevTools 启用按钮，因为 DevTools 看不到剃刀

【讨论】：