☰

当我将 ImageUrl 更改为图像按钮 Asp.Net/VB.Net 时，CSS 类不起作用

tag-icon • tag-icon css asp.net vb.net
当我将 ImageUrl 更改为图像按钮 Asp.Net/VB.Net 时，CSS 类不起作用

我是编程新手，所以请多多包涵。我正在制作一款 Deal or No Deal 风格的小游戏，玩家需要打开盒子。它们位于更新面板中，并且使用 CSS 为不同尺寸的屏幕设置了盒子。一切都完美播放，但是当单击一个盒子并更改 ImageUrl 时，CSS 类不起作用。这可能与更新面板有关吗？这是我的代码：

<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

答案1

好的，让我们尝试一些示例代码。

我们的标价：

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

如上所述，没有必要（也没有理由）使用 AsyncPostBackTriggers。您只想在按钮位于更新面板之外时使用 AsyncPostBackTrigger，但您希望这些按钮的行为就像在更新面板内部一样。

那么，现在我们的代码：

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

请注意，即使使用更新面板，每次单击按钮（包括更新面板内的按钮）时都会触发页面加载事件。这意味着您仍然必须将设置代码放在 If Not IsPostBack 存根内，否则每次单击按钮时它都会再次运行。因此，即使使用更新面板，页面加载事件也会先触发，然后运行给定按钮/图像按钮的代码存根。

因此，根据上述内容，结果现在是这样的：

在此处输入图片描述

但是，请记住，网页上的 on.load（JavaScript 客户端）并非每次都触发。因此，如果您有一些在页面加载后运行的 JavaScript 代码，并为页面上的控件设置一些样式，这当然不会起作用。但是，到目前为止，根据您提供的信息，情况似乎并非如此。

因此，请构建一个测试网页，在该测试页面上尝试您的最小代码，看看它是否有效。这表明一些其他代码以及一些 jQuery 或 JavaScript 代码在第一次加载页面时运行，设置一些样式是这里的问题。因此，对于许多东西（例如特殊的 jQuery 小部件等），它们通常无法在更新面板中工作，因为 on.load JavaScript“初始化”代码不会在每次使用更新面板时运行。

因此，jQuery $(window).on('load', function () {} 不会每次使用更新面板时运行。

正如上面显示的，我们无法重现您的问题，因此我们这里缺少更多信息。

相关内容