2

我在插入模式下有一个 DetailsView：

<asp:CommandField ShowInsertButton="True" ButtonType="Button" ControlStyle-CssClass="myButton" InsertText="My Insert text" />

当然，Insert/Cancel 两个按钮的样式相同。

是否可以将这两个分别设置为一蓝一黄？

在 FormView 中，您可以像这样单独定义按钮：

<asp:Button CommandName="Insert" Text="Insert" class="myButtonStyle1"  ID="myButtonID1" runat="server" CausesValidation="True" />

<asp:Button CommandName="Cancel" Text="Cancel" class="myButtonStyle2"  ID="myButtonID2" runat="server" CausesValidation="False" />

DetailsView 有类似的东西吗？

4

3 回答 3

1

最简单的解决方案是将“新建、插入、取消”CommandField 转换为 TemplateField。如果您使用 WYSIWYG 编辑器，则在 OK 按钮上方有一个按钮。这将生成以下（审查的）代码，您可以轻松地对其进行样式设置。

        <asp:TemplateField ShowHeader="False">
            <InsertItemTemplate>
                <asp:Button ID="LinkButton1" runat="server" CssClass="insertButton" CausesValidation="True" CommandName="Insert" Text="Insert" />
                &nbsp;<asp:Button ID="LinkButton2" runat="server" CssClass="cancelButton" CausesValidation="False" CommandName="Cancel" Text="Cancel" />
            </InsertItemTemplate>
        </asp:TemplateField>

注意：我在下面的按钮中添加了 CssClass 属性，其 CSS 类名称为“insertButton、cancelButton”，它们都可以在您的样式表中进行配置。

更多注释：

  1. 当需要按钮（不是链接按钮）时，不要使用结束标记 ( </asp:button>) - 将其替换为内联/标记。否则，它将无法正常工作。

  2. 使用仅插入模式时，不需要审查的 ItemTemplate — 将其删除。

  3. 避免使用 ControlStyle 控件，否则可能会导致类否决。

于 2012-06-01T17:21:04.710 回答
0

感谢 kapil-khandelwal，这是一个使用 jQuery 的解决方案，在 Zachary 新添加的答案之前一直在使用：

<script type="text/javascript" src="../Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            $("input").each(function () {
                if ($(this).attr("type") == "submit") {
                    if ($(this).val() == "Insert") { $(this).addClass("Insert"); };
                };
                if ($(this).attr("type") == "button") {
                    if ($(this).val() == "Cancel") { $(this).addClass("Cancel"); };
                };
            });
        });
    </script>
于 2012-06-01T16:46:57.787 回答
0

使用 jQuery (http://docs.jquery.com/Downloading_jQuery#Download_jQuery)：

<script src="../jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        var list = $("input[type=button]");
        list.each(function (itemIndex) {
            if ($(this).val() == "Cancel")
            { $(this).addClass("Cancel"); }
            else {
                if ($(this).val() == "Insert")
                { $(this).addClass("Insert"); }
            }
        });
    });
</script>

只需在 CSS 文件中添加两个类（“插入”和“取消”）。例如。

 <style type="text/css">
.Insert {background-color:Red;}
    .Cancel {background-color:Black;}
</style>
于 2012-05-23T11:46:27.633 回答