1

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 (i.e. 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.

Redrascal
  • 125
  • 7
  • Why don't use just ``? That way you can store data in that field via js and retrieve in code-behind. – mshsayem Apr 17 '16 at 04:30
  • Well that is currently effectively what I'm doing. I have the label set to `display: none` on the page anyway. I could try it but I doubt I'd have any more luck pulling information from HiddenField considering it's not working with HtmlImage or Label. – Redrascal Apr 17 '16 at 06:05

1 Answers1

3

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

Community
  • 1
  • 1
ConnorsFan
  • 70,558
  • 13
  • 122
  • 146
  • I've not gotten the chance to try it out just yet (though I'm about to) and I'll try Hidden control here in a few minutes. I've been looking into understanding view state. As a thought, is it possible to do something like a preventDefault that you see in JS so that the values could be preserved on callback? – Redrascal Apr 17 '16 at 19:38
  • I updated my answer. My reference to the ViewState was incorrect. Its purpose is to preserve the properties set in code-behind, not in client code. – ConnorsFan Apr 17 '16 at 20:17
  • 1
    I ended up using a hidden field and setting it's value property with a json I built in JS since I needed to pass multiple parameters. Then deserialize in back end and voila, readable parameterized json. – Redrascal Apr 19 '16 at 16:39