Asp.Net data attributes dynamically updated through JS/jQuery but the updated attributes aren't updated when retrieved through code behind

Question

I have an aspx page of images that, when selected, a popup appears prompting for various information tid bits that I then store the information as data attributes on hidden labels through use of jQuery (ie data-id="####" , data-difficulty="###" , etc.). I acknowledge that this isn't the best way to do it necessarily but I've tried other things (see below) and nothing has worked yet.

I've been attempting, and to no avail, to retrieve the dynamically updated data attributes so the various items can be stored to my local ms sql database. The updating of the attributes works perfectly in that I can view the items being updated properly in Chrome's developer tools. Despite this when I try to pull the same attributes I can see as being updated I'm unable to retrieve the updated values in the code behind and keep getting back the initial values (generally an empty string "").

Here's the implementation on the aspx page:

<asp:Label runat="server" ID="lblSelection" data-id="" data-count="" data-price="" data-difficulty=""  CssClass="selected-items" />

and here's the relevant method being called when the "Submit" button is clicked further down on the same page:

protected void SubmitClicked(object sender, EventArgs e)
{
    var currentID = lblSelection.Attributes["data-id"];
    var currentCount = lblSelection.Attributes["data-count"];
    var currentPrice = lblSelection.Attributes["data-price"];
    var currentDifficulty = lblSelection.Attributes["data-difficulty"];

    if (currentID == null || currentID == "")
    {
              // stop and throw an informative message to the user
    }else{
             // keep processing ...
    } 
}

The trouble is that when I run the project in debug mode and inspect those elements (again, making sure that I can visually see that the attributes are actually updated in the developer tools) they're all the initial value of "". My only guess is that there's some kind of post back issue but I wouldn't think that would happen until my method had been called and fully processed. As a note, I'm populating the images onto the page and updating their attributes already through a sql call based on the id of the item:

<img runat="server" src="" data-id="12345" />

The initial loading all works perfectly so I can clearly set the properties from the code behind fine. For whatever reason though I am unable to pick up the updated attribute values in the code behind after the jQuery updates the label's attributes (following some clicking and whatnot). Any tips or thoughts on this would be greatly appreciated.

Answer 1

What you are trying to do cannot work because:

1. The value of custom attributes is not posted back to the server (as discussed here ).

2. Even if you set the text of the Label in client code, it would also not be available in the Text property in code-behind. A Label is rendered as a span element in the page, and the content of that type of element is not posted back to the server.

A nice list of properties included in a postback is given in this topic: Which values browser collects as a postback data?

As suggested by mshsayem, you should use HiddenFields. If, for some reason, you want to do it differently, you could use hidden TextBoxes, set their value in client code, and retrieve it with the Text property in code-behind. In other words: HiddenFields are not the only controls for which a value set in client-code can be retrieved in code-behind (but they are the obvious choice if the control is not to be displayed).