2

挿入モードのDetailsViewがあります。

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

もちろん、挿入/キャンセルの両方のボタンは同じスタイルになります。

これら2つを別々に1つの青と1つの黄色にスタイリングすることは可能ですか？

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

最も簡単な解決策は、「新規、挿入、キャンセル」コマンドフィールドをテンプレートフィールドに変換することです。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. ボタンが必要な場合（linkBut​​tonsではない）、終了タグ（）を使用しないでください-インラインマーク</asp:button>に置き換えてください。/そうしないと、機能しません。

  2. 挿入のみモードを使用する場合、打ち切られたItemTemplateは必要ありません—削除してください。

  3. ControlStyleコントロールを使用しないでください。使用しないと、クラスが無効になる可能性があります。

于 2012-06-01T17:21:04.710 に答える
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ファイルに2つのクラス（「挿入」と「キャンセル」）を追加するだけです。たとえば

 <style type="text/css">
.Insert {background-color:Red;}
    .Cancel {background-color:Black;}
</style>
于 2012-05-23T11:46:27.633 に答える
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 に答える