回发期间如何在客户端设置标签样式

Question

Asp.net 4.0 webform web application... I'm trying to wrap my head around this scenario and wanted to throw this out there to obtain an explanation.

On my page, I have an HTML table. In one of the cells, I have a checkbox that performs some functionality on the server-side when clicked. This has been in place. What I am trying to do is to perform manipulation of controls (styling, disabling, etc.) when this checkbox is clicked and then continue with the server-side call.

Here's a snipet:

<table>
        <tr>
            <td style="width:10%; color: #FFFFFF;">                    
            </td>
            <td style="width:15%; color: #FFFFFF;">         
            </td>
            <td class="TdAvailable" id="TdTeam" style="width:15%; color: #FFFFFF;" align="left">
                Team
            </td>
            <td class="TdAvailable" id="TdPrimaryContact"  style="width:15%; color: #FFFFFF;" align="left">
                Primary Contact
            </td>
            <td style="width:15%; color: #FFFFFF;" align="left">
                Status
            </td>
            <td style="width:15%; color: #FFFFFF;" align="left">
                Type
            </td>
        </tr>
    <tr>
        <td>
            <asp:CheckBox ID="chkShowFavorites" runat="server" Text="Show Favorites" 
                ForeColor="White" OnCheckedChanged="FavCheckChange" onclick="HighlightControls()"
                AutoPostBack="True" />                 
        </td>
     </tr>

...
...
...
</table>

javascript

 <script type = "text/javascript">
     function HighlightControls() {
         document.getElementById("MainContent_TdTeam").style.color = "red";
     }
 </script>

This is going to be expanded to include more controls than this one but I'm just trying to see what my options are before developing too much.

During debugging I see the label turn red but then returns to white after postback.

How can I perform my styling in the client-side and keep the settings after postback?

Answer 1

Any changes to your DOM elements (css classes, styles) will be lost between postbacks unless you find a way to persist it. You could use a hidden field to store the elementID + the new class name or style so when you post back, your code can interrogate the hidden field and perform the necessary changes.

Answer 2

The only thing that I can think of would be to interrogate the control state on the server side when the page is posted back and apply the same logic that you are applying client side. So if you have a checkbox that when checked changed a cell to be red, you will need to write some server side code to check the value of that check box and then change the color of the cell.

Its either that or could you replace your postback with an ajax call and only update the parts of the form that need to be changed?