Setting ASP.NET Button attributes client side and read attribute value server side

How can I retrieve a Button custom attribute after the attribute value has been changed using javascript?

Example:

Asp file

<asp:Button ID="Button1" runat="server" Text="Button1" />
<asp:Button ID="Button2" runat="server" Text="Button2" OnClick="Button2_Click" />

<script type="text/javascript">
var btn1 = '#<% Button1.ClientID %>';
var btn2 = '#<% Button2.ClientID %>';

$(btn1).click(function(e) {
    e.preventDefault();
    $(btn2).attr("actIndex", "2");
});

</script>

CodeBehind file

protected void Page_Load(object sender, EventArgs e)
{
    if(!IsPostBack)
        Button2.Attributes.Add("actIndex","1");
}

protected void Button2_Click(object sender, EventArgs e)
{
     Button btn = (Button)sender;

     // this should be 2 if button1 has been clicked
     string actIndex = btn.Attributes["actIndex"]; 
}

If I click Button1 then I click Button2 the actIndex value is still “1” but if I use page inspect the Button2 actIndex attribute is “2”, somehow the attribute value is not passed to postBack action.

How can I solve this mystery?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I think the problem you have is because the attributes are not being posted back to have their information rebuilt server side.

The control’s state is built server side and stored in the ViewState before it serves up the page. Then you modify the value using javascript which has no effect because that vaule is not being posted back to the server. On PostBack, the server rebuilds the control from the known ViewState which has the default value you originally assigned which is the value 1.

To get around this you need to store the value in some type of control (thinking a HiddenField control) that will get posted back to the server and then rebuild the attribute server side.

eg (semi pseudo code):

// In your javascript write to a hidden control
$("#yourHiddenFieldControlName").val("2");

// Then in your server side c# code you look for this value on post back and if found,
// assign it to you attribute
if (!string.IsNullOrEmpty(yourHiddenFieldControlName.Value))
{
    Button2.Attributes["actIndex"] = yourHiddenFieldControlName.Value;
}

Your control needs to be handled manually if you are modifying it client side with javascript.

Method 2

only form elements can actually postback data. The server side will take the postback data and load it into the form element provided that the runat=server is set.

in markup or html:

<input type="hidden" runat="server" ID="txtHiddenDestControl" />

javascript:

document.getElementById('<%= txtHiddenDestControl.ClientID %>').value = '1';

code behind:

string postedVal = txtHiddenDestControl.Value.ToString();

Method 3

NO need for Javascript below code will work for you

 protected void Page_Load(object sender, EventArgs e)
    {
        Button2.Attributes.Add("actIndex", "1");
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        string Value = Button2.Attributes["actIndex"].ToString();//1
        Button2.Attributes.Remove("actIndex");
        Button2.Attributes.Add("actIndex", "2");
         Value = Button2.Attributes["actIndex"].ToString();//2

    }

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0