如何将Google Material Design应用于ASP.NET控件（即复选框，按钮等）？ [英] How to apply Google Material Design to ASP.NET Controls (i.e. Checkbox, Button and etc)?

问题描述

我试图将 Google Material Design 应用于我的ASP.NET网页表单控件。我可以很容易地应用到HTML控件，但是ASP.NET没有机会。

原始页面

 < form id =signinformrunat =serverclass =form-validation animated fadeIn> 
< div class =containerid =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 fadeInsrc =/ Assets / global / images / logo / logo_white.png/> 
< asp：PlaceHolder runat =serverID =ErrorMessageVisible =false> 
< p class =text-danger> 
< asp：Literal runat =serverID =FailureText/> 
< / p> 
< / asp：PlaceHolder> 
< div class =form-signup> 
< div class =prepend-icon m-b-5> 
< asp：TextBox runat =serverID =usernameCssClass =form-control form-white usernameplaceholder =Username/> 
< asp：RequiredFieldValidator runat =serverControlToValidate =usernameDisplay =DynamicCssClass =text-danger m-b-0ErrorMessage =用户名字段是必需的。 /> 
< i class =icon-user>< / i> 
< / div> 
< div class =prepend-icon> 
< asp：TextBox runat =serverID =PasswordTextMode =PasswordCssClass =form-control form-white passwordplaceholder =Password/> 
< asp：RequiredFieldValidator runat =serverControlToValidate =PasswordDisplay =DynamicCssClass =text-danger m-b-0ErrorMessage =密码字段是必需的。 /> 
< i class =icon-lock>< / i> 
< / div> 
< div class =checkbox checkbox-material-grey> 
< asp：CheckBox runat =serverID =RememberMeCssClass =md-checkbox/> 
 < / div> 
< / div> 
< div class =checkbox checkbox-material-grey> 
< label class =c-white normal f-11 m-b-15> 
< input type =checkboxrunat =servername =remembercbvalue =option1class =md-checkbox> 
记得我吗？ 
< / label> 
< / div> 
< asp：Button runat =serverOnClick =LogInText =LoginCssClass =btn btn-embossed btn-danger btn-block/> 
< asp：Button runat =serverID =ResendConfirmOnClick =SendEmailConfirmationTokenText =Resend confirmationVisible =falseCssClass =btn btn-default/> 
< p> 
< asp：HyperLink runat =serverID =RegisterHyperLinkViewStateMode =已禁用>注册为新用户< / asp：HyperLink> 
< / p> 
< p> 
< asp：HyperLink runat =serverID =ForgotPasswordHyperLinkViewStateMode =已禁用>忘记密码？< / 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 =checkboxrunat =servername =remembercbvalue =option1class =md-checkbox> 
记得我吗？ 
< / label> 
< / div> 
  

ASP.Net控制

 < div class =checkbox checkbox-material-grey> 
< asp：CheckBox runat =serverID =RememberMeCssClass =md-checkbox/> 
 < / div> 
  

有什么方法可以使用Material Design和ASP.NET控件？

解决方案

我会微调ASP.NET标记，并删除< asp：Checkbox /> < code>< input type =checkboxrunat =server... /> ，这样标记就会呈现为'已经在HTML控制段落中指定。

 < div class =checkbox checkbox-material-grey> 
< asp：Label ID =lblRememberMerunat =serverCssClass =c-white normal f-11 m-b-15AssociatedControlID =cbRememberMe> 
< input type =checkboxrunat =serverid =cbRememberMeclass =md-checkbox/> 
记得我吗？ 
< / asp：标签> 
< / div> 
  

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

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

I'm trying to apply the Google Material Design to my ASP.NET web form controls. I can easily apply to HTML controls, but no chance with ASP.NET.

Original Page

 <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 Control

<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 Control

<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>

Is there any way to use Material Design with ASP.NET controls?

解决方案

I would have tweaked the ASP.NET markup a bit, and dropped the <asp:Checkbox /> in favor for a <input type="checkbox" runat="server" ... /> so that the markup would be rendered as you've specified in the HTML Control paragraph.

<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>

Both label and checkbox elements would be accessible from code behind, since they have the runat="server" attribute.

My guess here is that webforms renders some elements wrapped inside others, and that violates the structure that the CSS framework expects.

这篇关于如何将Google Material Design应用于ASP.NET控件（即复选框，按钮等）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！