Question 382264 in CSS Question posted in
Some basic documentation can be found here.

CSS Class doesn't work when I change ImageUrl for Image Button Asp.Net/VB.Net

I’m new to programming so please be gentle. I am making a little Deal or No Deal style game where you open boxes. They are in an update panel and the boxes are set up for different size screens with CSS. It all plays perfectly but when a box is clicked and the ImageUrl is changed, the CSS class is not working. Could it be something to do with the update panel? Here’s my code:

<asp:UpdatePanel ID="upPnlBoxes" style="margin-top:-10px;" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
    <Triggers>
        <asp:AsyncPostBackTrigger controlid="btnBox1" eventname="Click" />
        <asp:AsyncPostBackTrigger controlid="btnBox2" eventname="Click" />
    </Triggers>
    <ContentTemplate>
        <div style="position:absolute; top: 420px;">
            <asp:ImageButton ID="btnBox1" visible="false" class="playboxsize" commandArgument="1" ImageUrl="~/files/images/icons/boxes/MONMClosedBox1.png" runat="server" onClick="btnBoxSelected_Click" />
            <asp:ImageButton ID="btnBox2" visible="false" class="playboxsize" commandArgument="2" ImageUrl="~/files/images/icons/boxes/MONMClosedBox2.png" runat="server" onClick="btnBoxSelected_Click" /> 
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

VB.Net

If session("round")="chooseBoxes" Then
    Select Case boxNo
        Case"1"
            btnBox1.imageUrl="~/files/images/icons/boxes/MONMOpenBox" & session("BoxValue1") & ".png"
            btnBox1.enabled="false"
            session("ValueOpened")=session("BoxValue1")
            session("BoxValue1")=0
        Case"2".....
    End Select
End If
Tags:

2

Answers


  1. 0

    You can try changing the style of the box to force a redraw of the element.

     Case "1"
            btnBox1.ImageUrl = "~/files/images/icons/boxes/MONMOpenBox" & session("BoxValue1") & ".png"
            btnBox1.Enabled = False
            ' Server-side changes are made here

            ' Register a script to execute on the client-side after update
            ScriptManager.RegisterStartupScript(Me, Me.GetType(), "ReapplyStylesBox1", "setTimeout(function() { var b = document.getElementById('" & btnBox1.ClientID & "'); b.style.width = '100%'; setTimeout(function() { b.style.width = 'initial'; }, 10); }, 0);", True)

            session("ValueOpened") = session("BoxValue1")
            session("BoxValue1") = 0
        Case "2"
    Login or Signup to reply.
  2. 0

    Ok, so let’s try some sample code.

    Our markup:

        <div style="padding: 35px">

        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>


        <style>
            .myball {
                width: 64px;
                height: 64px;
            }
        </style>


        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:ImageButton ID="ImageButton1" runat="server"
                    ImageUrl="~/Content/Balls/b0.png"
                    CssClass="myball"
                    OnClick="ImageButton1_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>

    As noted, there is no need (nor reason) to use AsyncPostBackTriggers. You only want to use AsyncPostBackTrigger when the button is outside of the update panel, but you want such buttons to behave as if there were inside the update panel.

    So, now our code:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        ' first page load
        Session("ballnum") = 0
    End If


End Sub

Protected Sub ImageButton1_Click(sender As Object, e As ImageClickEventArgs)

    Dim ballnum As Integer = Session("ballnum")

    ballnum += 1

    If ballnum > 8 Then
        ballnum = 0
    End If
    Session("ballnum") = ballnum

    ImageButton1.ImageUrl = "~/Content/Balls/b" & Session("ballnum") & ".png"

End Sub

    Note that EVEN with an update panel, the page load event does trigger each time you click on a button – including those inside of an update panel. This means you still must place setup code inside of the If Not IsPostBack stub, else it will run again on each button click. So, even with an update panel, the page load event fires first, and then the code stub for the given button/imagebutton then runs.

    So, with above, the result is now this:

    enter image description here

    However, do keep in mind that the web page on.load (JavaScript client side) does NOT trigger each time. So, if you have some JavaScript code that runs after the page loads and sets up some style for controls on the page, that will of course not work. However, so far with the information you provided, that does not look to be the case.

    So, build a test web page, try your minimal code on that test page, and see if it works. This would suggest that some other code, and that of some jQuery, or JavaScript code runs on the first page load setting some style is the issue here, since that code does NOT run each time, and the jQuery $(window).on(‘load’, function () {} does NOT run each time when using a update panel.

    So as above shows, we are un-able to re-produce your issue, and thus we are missing additional information here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search