如何将应用于ASP.NET控件(即复选框、按钮等)？

Question

我正在尝试将Google Material Design应用于我的ASP.NET web表单控件。我可以很容易地应用于HTML控件，但没有机会使用ASP.NET。

原始页

 <form id="signinform" runat="server" class="form-validation animated fadeIn">
        <div class="container" id="login-block">
        <div class="row">
            <div class="col-sm-6 col-md-4 col-md-offset-4">
                <div class="account-wall">
                    <img class="user-img animated fadeIn" src="/Assets/global/images/logo/logo_white.png" />
                    <asp:PlaceHolder runat="server" ID="ErrorMessage" Visible="false">
                        <p class="text-danger">
                            <asp:Literal runat="server" ID="FailureText" />
                        </p>
                    </asp:PlaceHolder>
                    <div class="form-signup">
                        <div class="prepend-icon m-b-5">
                            <asp:TextBox runat="server" ID="username" CssClass="form-control form-white username" placeholder="Username" />
                            <asp:RequiredFieldValidator runat="server" ControlToValidate="username" Display="Dynamic" CssClass="text-danger m-b-0" ErrorMessage="The username field is required." />
                            <i class="icon-user"></i>
                        </div>
                        <div class="prepend-icon">
                            <asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="form-control form-white password" placeholder="Password" />
                            <asp:RequiredFieldValidator runat="server" ControlToValidate="Password" Display="Dynamic" CssClass="text-danger m-b-0" ErrorMessage="The password field is required." />
                            <i class="icon-lock"></i>
                        </div>
                        <div class="checkbox checkbox-material-grey">
                            <asp:CheckBox runat="server" ID="RememberMe" CssClass="md-checkbox" />
                            <asp:Label runat="server" CssClass="c-white normal f-11 m-b-15" AssociatedControlID="RememberMe">Remember me?</asp:Label>
                        </div>  
                    </div>
                    <div class="checkbox checkbox-material-grey">
                        <label class="c-white normal f-11 m-b-15">
                            <input type="checkbox" runat="server" name="remembercb" value="option1" class="md-checkbox">
                            Remember me?
                        </label>
                    </div>
                    <asp:Button runat="server" OnClick="LogIn" Text="Login" CssClass="btn btn-embossed btn-danger btn-block" />
                    <asp:Button runat="server" ID="ResendConfirm" OnClick="SendEmailConfirmationToken" Text="Resend confirmation" Visible="false" CssClass="btn btn-default" />
                    <p>
                        <asp:HyperLink runat="server" ID="RegisterHyperLink" ViewStateMode="Disabled">Register as a new user</asp:HyperLink>
                    </p>
                    <p>
                        <asp:HyperLink runat="server" ID="ForgotPasswordHyperLink" ViewStateMode="Disabled">Forgot your password?</asp:HyperLink>
                    </p>
                </div>
            </div>
        </div>
    </div>
</form>

HTML控件

<div class="checkbox checkbox-material-grey">
    <label class="c-white normal f-11 m-b-15">
        <input type="checkbox" runat="server" name="remembercb" value="option1" class="md-checkbox">
        Remember me?
    </label>
</div>

ASP.Net控制

<div class="checkbox checkbox-material-grey">
    <asp:CheckBox runat="server" ID="RememberMe" CssClass="md-checkbox" />
    <asp:Label runat="server" CssClass="c-white normal f-11 m-b-15" AssociatedControlID="RememberMe">Remember me?</asp:Label>
</div>

是否有任何方法使用材料设计与ASP.NET控件？

Answer 1

我会稍微修改一下ASP.NET标记，并放弃<asp:Checkbox />，转而使用<input type="checkbox" runat="server" ... />，这样标记就会按照HTML段落中指定的那样呈现。

<div class="checkbox checkbox-material-grey">
        <asp:Label ID="lblRememberMe" runat="server" CssClass="c-white normal f-11 m-b-15" AssociatedControlID="cbRememberMe">
            <input type="checkbox" runat="server" id="cbRememberMe" class="md-checkbox"  />
            Remember me ?
        </asp:Label>
    </div>

标签和复选框元素都可以从后面的代码中访问，因为它们具有runat="server"属性。

我在这里的猜测是，webforms呈现了一些封装在其他元素中的元素，这违反了CSS框架所期望的结构。