Configuring ASP.NET Button Client Side Attributes and Reading the Server Side Attribute Value
How do I get a custom attribute Button
after changing the value of an attribute 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 the Button2
value actIndex
is still "1", but if I use the page, check that the attribute Button2
actIndex
is "2", then somehow the attribute value is not passed to the postBack action.
How can I solve this mystery?
source to share
I think the problem is that the attributes are not sent back to retrieve their information on the server side.
The control state is built on the server side and persists in ViewState
until it serves the page. Then you change the value with javascript, which has no effect, because this vaule is not sent back to the server. In PostBack, the server rebuilds the control from a known control to ViewState
its original default, which is the value 1
.
To get around this, you need to store the value in some type of control (thinking of a control HiddenField
), which will be sent back to the server, and then rebuild the attribute server.
for example (semi-pseudocode):
// 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 change it client-side with javascript.
source to share
only form elements can actually return data. The server side takes the postback data and loads it into the form element, provided 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();
source to share
NO Javascript needed 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
}
source to share