javascript class change to asp:button control not available on server side

Question

So I have looked for days for a solution online to this, and I've tried different ways of doing this, but can't seem to find a complete solution. So please HELP!

I have a form that a user is filling out online. At one point in the form, they select keywords they want to associate with their input. I have created a table layout of buttons with each keyword in a button.

<asp:Button 
    ID="button1" 
    Text="Kid Friendly" 
    CssClass="button_off"  
    runat="server" 
    onclientclick="change_select(this);" 
    OnClick="return false;" >
</asp:Button>
<br />
<asp:Button 
    ID="button2" 
    Text="Romantic" 
    CssClass="button_off"  
    runat="server" 
    onclientclick="change_select(this);" 
    OnClick="return false;" >
</asp:Button>
<br />

..and so on. The buttons have a background of blue. If a user clicks on a button, it runs javascript to change the class of the button, which changes the background to green.

function change_select(objs)
{
    var mydoc = objs.className;
    if (mydoc == "button_off") 
    {
        objs.className = "button_on";
        document.getElementById("button1").setAttribute("SkinID", "3");
    }
    else 
    {
        objs.className = "button_off";
    }
}

Then at the bottom, I have a button to submit the info:

 <asp:Button ID="button4" Text="Verify"  runat="server" onclick="verify" >

When I test the page, clicking on the buttons changes the class and the backgrounds change back and forth, but when I try to grab the class of each element on the server side, it always comes back as "button_off".

protected void verify(object sender, EventArgs e)
{
    var myValue = button1.CssClass.ToString();
    string myInfo = "<h3>Your buttons</h3><p>Here is the class: " + myValue;

    myResults.InnerHtml = myInfo.ToString()
}

How can the C# on the server side get that the user has changed the class? I did try changing these to HTML elements Kid Friendly, but I couldn't figure out how to reference the HTML element on the Server side. I found posts on areas with code to do that (referencing HTMLElement), but that code never worked on my development machine.

Yes, I could just make the keywords labels and add checkboxes next to each one, but that is so boring; I was trying to create a more interesting interface here. Please help!

Answer 1

尝试在提交时将CSS类存储在隐藏字段中。