asp post back issue and html controls

Question

My html.

<input id="rdb1"  type="radio" name="rdbData" checked="checked" />
<input id="rdb2"  type="radio" name="rdbData" />
<asp:Button ID="btnTest" runat="server" Text="Test" OnClick="btnTest_Click" />

Button is only asp:button but radio buttons are not.First time when page is load rdb1 is selected.But when i click the button btnTest with check rdb2, page is refreshed and select 1st redio button.To prevent this i try jquery like this. Inside Document.ready:

var btnTest = "<%=btnTest.ClientID %>";
 $('#' + btnTest).bind("click", function() {
            if ($('#rdb1').attr("checked")) {
                $('#rdb2').attr("checked", false);
                $('#rdb1').attr("checked", true);

            }
            else {
                $('#rdb1').attr("checked", false);
                $('#rdb2').attr("checked", true);
            }
        });

But its not work.How can we handle this type of situation.Where i am getting wrong.Any idea or any alternative.Thanks.

Try to `e.preventDefault` on the `bind()` event – elclanrs Feb 24 '12 at 09:40 — elclanrs, Feb 24 '12 at 09:40

score 1 · Answer 1 · answered Feb 24 '12 at 10:06

If that is the request I would suggest you have a hidden field (server side) which will keep the state of which input radio button is selected (use jquery to update the hidden field when user clicks on the radio buttons). Then on postback as the hidden field is set at runat="server" it will maintain its value (viewstate) and you can simply use jquery to set the right radio button as selected. Does that make sense ?

score 0 · Answer 2 · answered Feb 24 '12 at 09:46

0

Shree

The fact is that client click (added by jQuery) executes before the call to server. If you want to persist the selectin, try using server sided controls:

<input id="rdb1" type="radio" name="rdbData" checked="true" runat="server" />
    <input id="rdb2" type="radio" name="rdbData" runat="server" />
    <asp:Button ID="btnTest" runat="server" Text="Test" OnClick="btnTest_Click" />

Try this if it does work for you.

Hope it helps.

answered Feb 24 '12 at 09:46

Jesús María

1

I am not able to use `server side` control.Its my project demand.Its a sample problem which i face. – 4b0 Feb 24 '12 at 09:49

score 0 · Answer 3 · answered Feb 24 '12 at 09:47

0

When the "Test" button is clicked, the page posts back to the server, which re-renders all client-side controls just as if the page has been loaded for the first time. Since the entire page is reloaded, jQuery will also "forget" about the state of the controls, so that approach won't work either. The simplest way to prevent this is to ensure the radio buttons run on the server side. For instance:

<asp:RadioButton id="rdb1" Checked="True" GroupName="RadioGroup1" runat="server" />
<asp:RadioButton id="rdb2" GroupName="RadioGroup1" runat="server" />

Hope that helps!

answered Feb 24 '12 at 09:47

Brandon

308
1
2
10

I am not able to use `server side` control.Its my project demand.Its a sample problem which i face. – 4b0 Feb 24 '12 at 09:50
Well the Button is a server side control and you are using it. – Stilgar Feb 24 '12 at 09:58
Yap project is big and its a project demand.I don't able to post all thing here.Its a condition.So i mention you already that button is server side. – 4b0 Feb 24 '12 at 10:01

score 0 · Accepted Answer · answered Feb 24 '12 at 10:21

I repeat that the requirement is ABSURD. How are they going to tell you used server-side controls without looking at the code anyway. This is like requiring that you write the code using chopsticks or something.

However just as an exercise I provide the following solution:

<input id="rdb1"  type="radio" name="rbdData" value="rbd1" <%= Rdb1Checked %> />
<input id="rdb2"  type="radio" name="rbdData" value="rbd2" <%= Rdb2Checked %> />
<asp:Button ID="btnTest" runat="server" Text="Test" onclick="btnTest_Click" />

And the code behind:

protected string Rdb1Checked
{
    get
    {
        if (IsPostBack)
        {
            if (Request["rbdData"] == "rbd1")
            {
                return "checked";
            }
            else
            {
                return "";
            }
        }

        return "checked";
    }
}

protected string Rdb2Checked
{
    get
    {
        if (IsPostBack)
        {
            if (Request["rbdData"] == "rbd2")
            {
                return "checked";
            }
            else
            {
                return "";
            }
        }

        return "";
    }
}

Ask why they have these requirements. Maybe they don't want to see the client IDs in which case you may set the ClientIDMode to Static and avoid auto generated IDs. You can remove them completely by setting them to null, etc. Maybe they don't like what Web Forms renders for Radio buttons in which case using server side inputs would be OK. The requirement on its own simply does not make sense.

score -1 · Answer 5 · answered Feb 27 '12 at 11:30

What do you mean? That you have a requirement that does not let you use "servr side controls" or that your IDE does not allow that?

By definition, in ASP.NET all HTML controls inherit from a server control. Simply adding runat="server", you can access that control from codebehind, although it will still render in page as a normal HTML control.

asp post back issue and html controls

5 Answers5

Linked