如何将 Google Material 设计应用于 ASP.NET 控件（即复选框、按钮等）？

Question

我正在尝试将 Google Material Design 应用于我的 ASP.NET 网络表单控件。我可以轻松地应用于 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>

有什么方法可以使用 Material Design with 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>

label 和 checkbox 元素都可以从代码隐藏访问，因为它们具有 runat="server" 属性。

我的猜测是 webforms 渲染了一些包含在其他元素中的元素，这违反了 CSS 框架所期望的结构。

如何将 Google Material 设计应用于 ASP.NET 控件（即复选框、按钮等）？

How to apply Google Material Design to ASP.NET Controls (i.e. Checkbox, Button and etc)?

html

css

asp.net

webforms

material-design

原始页面

HTML控制

ASP.Net对照