.net 页面 postBack 时 <ul> 的 css 丢失

Question

我有一个 html 列表，在每个标签 中放置一个图标，用户选择一个图标，我得到分配给图标的值和用户选择的选项（图标）我用 css 突出显示它样式，我遇到的问题是，当发送表单时，如果 FieldValidator 被任何字段激活，则数据不会发送到数据库，但所选图标的样式会丢失。如何保存样式？

这是选择图标时的样子

这是发送数据时的样子

        $(document).ready(function () {
            
            var iconos = document.querySelectorAll('.fa');
            
            var input = document.getElementById('<%=txtIcono.ClientID%>');
            
            for (var i = 0; i < iconos.length; i++) {
                
                iconos[i].addEventListener('click', function () {
                    
                    input.value = this.className;
                });
            }

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.list-inline li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    margin-bottom: 10px;
}

.social-icons .fa {
    font-size: 1em;
}

.social-icons .fa {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #FFF;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.social-icons.icon-circle .fa {
    border-radius: 50%;
}

.social-icons.icon-rounded .fa {
    border-radius: 5px;
}

.social-icons.icon-flat .fa {
    border-radius: 0;
}

.social-icons .fa:hover, .social-icons .fa:active {
    background-color: blue;
    color: #FFF;
    -webkit-box-shadow: 1px 1px 3px #333;
    -moz-box-shadow: 1px 1px 3px #333;
    box-shadow: 1px 1px 3px #333;
}

.social-icons.icon-zoom .fa:hover, .social-icons.icon-zoom .fa:active {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.social-icons.icon-rotate .fa:hover, .social-icons.icon-rotate .fa:active {
    -webkit-transform: scale(1.1) rotate(360deg);
    -moz-transform: scale(1.1) rotate(360deg);
    -ms-transform: scale(1.1) rotate(360deg);
    -o-transform: scale(1.1) rotate(360deg);
    transform: scale(1.1) rotate(360deg);
}

.enlace > a:focus .fa {
    cursor: pointer;
    background-color: gold;
    border-radius: 50%;
}

<table>
                        <tr>
                            <td style="width: 126px">Seleccione un Icono:</td>
                            <td>
                                <ul id="navegador" class="social-icons icon-circle list-unstyled list-inline">
                                    <li class="enlace"><a href="#"><i class="fa fa-android"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-apple"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-bitcoin"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-css3"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-dropbox"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-facebook-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-html5"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-instagram"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-linux"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-pinterest"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-pinterest-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-skype"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-trello"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-tumblr"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-tumblr-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-twitter-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-windows"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-youtube"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-youtube-play"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-youtube-square"></i></a></li>
                                </ul>
                                <asp:TextBox runat="server" ID="txtIcono" MaxLength="100" SkinID="txtGral" Width="168px" hidden="true"></asp:TextBox>
                                <asp:RequiredFieldValidator runat="server" ID="rfIcono" ControlToValidate="txtIcono" ErrorMessage="*Seleccione un icono para el anuncio." Display="Dynamic">*</asp:RequiredFieldValidator>
                            </td>
                        </tr>
</table>

Answer 1

您无需回发来验证数据。使用RequiredFieldValidator.EnableClientScript = true在客户端进行验证。

Answer 2

一些伪代码。 文件.aspx：

<%-- add hf --%>
<asp:HiddenField ID="hfID" runat="server">

文件.js：

function onIconClick() {
//highlight Icon
var hf =document.getElementByID("hfID");
hf.value = hf.value + ";clickedIcon" 
} 
function onPageLoad() {
var hf =document.getElementByID("hfID");
var iconsToHighlight = hf.value.split(";");
for(i=0;i<iconsToHighlight. Length;i++) {
HighlightIcon(iconsToHighlight[i]) ;
} 
} 

我不确定，但您可能必须添加标签 asp:scriptmanager 才能使 on pageload 正常工作。或者，如果您使用 jquery，我认为它会自动包含，但不要相信我的话