如何有条件地启用或禁用 Kendo UI 按钮？答案

【问题标题】：How to conditionally enable or disable Kendo UI buttons?如何有条件地启用或禁用 Kendo UI 按钮？
【发布时间】：2015-07-07 08:24:03
【问题描述】：

我在控制器函数中有这本字典：

Dictionary<string, bool> Editable = new Dictionary<string, bool>();
switch (Mode)
{
    case VIEW_MODE.VIEW:

        Editable.Add("FirstName", true);
        Editable.Add("MiddleName", true);
        Editable.Add("LastName", true);
        Editable.Add("DateOfBirth", true);
        Editable.Add("Age", true);
        Editable.Add("Height", true);
        Editable.Add("CityName", true);
        Editable.Add("MemberType", true);
        Editable.Add("MemberRoleList", true);
        Editable.Add("Mobile", true);
        Editable.Add("Email", true);
        Editable.Add("PIN", true);
        Editable.Add("Phone", true);
        Editable.Add("Btnsave", true);
        Editable.Add("BtnsaveAjax", true);
        Editable.Add("BtnEditAjax", false);
        break;
    case VIEW_MODE.ADD:

        Editable.Add("FirstName", false);
        Editable.Add("MiddleName", false);
        Editable.Add("LastName", false);
        Editable.Add("DateOfBirth", false);
        Editable.Add("Age", false);
        Editable.Add("Height", false);
        Editable.Add("CityName", false);
        Editable.Add("MemberType", false);
        Editable.Add("MemberRoleList", false);
        Editable.Add("Mobile", false);
        Editable.Add("Email", false);
        Editable.Add("PIN", false);
        Editable.Add("Phone", false);
        Editable.Add("Remark", false);
        Editable.Add("Btnsave", false);
        Editable.Add("BtnsaveAjax", false);
        Editable.Add("BtnEditAjax", true);

        break;
    case VIEW_MODE.EDIT:

        Editable.Add("FirstName", false);
        Editable.Add("MiddleName", false);
        Editable.Add("LastName", false);
        Editable.Add("DateOfBirth", false);
        Editable.Add("Age", false);
        Editable.Add("Height", false);
        Editable.Add("CityName", false);
        Editable.Add("MemberType", false);
        Editable.Add("MemberRoleList", false);
        Editable.Add("Mobile", false);
        Editable.Add("Email", false);
        Editable.Add("PIN", false);
        Editable.Add("Phone", false);
        Editable.Add("Remark", false);                  
        Editable.Add("Btnsave", false);
        Editable.Add("BtnsaveAjax", false);
        Editable.Add("BtnEditAjax", true);
}

根据这本字典，我需要在视图中启用或禁用我的表单按钮之一：

@(Html.Kendo().Button()
    .Name("BtnsaveAjax")
    .Content("Save - AJAX")
    .Enable(true)
    .HtmlAttributes(new { style = "float:right", type = "button" })
    .Events(ev => ev.Click("saveDetails"))
)

我需要使用 if 条件启用或禁用此按钮，这将检查我的可编辑 btnsaveAjax 是真还是假。

【问题讨论】：

官方文档值得一看。特别是“启用”部分。 docs.telerik.com/kendo-ui/api/javascript/ui/button
欢迎来到 Stack Overflow！我编辑了您的问题以修复一些标点符号错误。我还正确缩进了正文：4 个空格用于缩进代码示例 - 请参阅编辑帮助以获取有关格式的更多信息。祝你好运！

标签： c# asp.net-mvc-4 razor kendo-ui

【解决方案1】：

您可以在控制器中检查并通过ViewBag 传递它，例如：

if (Editable["BtnsaveAjax"] == true)
    ViewBag.btnIsEnabled = true;
else
    ViewBag.btnIsEnabled = false;

在你的按钮中是这样的：

@(Html.Kendo().Button()
    .Name("BtnsaveAjax")
    .Content("Save - AJAX")
    .Enable((bool)ViewBag.btnIsEnabled)
    .HtmlAttributes(new { style = "float:right", type = "button" })
    .Events(ev => ev.Click("saveDetails"))
)

【讨论】：