0

我正在尝试完成基于文本更改 asp:Button（用户控件）背景图像的任务。它基本上是一个切换操作（开/关）背景图像。

我想使用 getElementByID 将 Text 元素放入我的 javaScript 函数中的 int 变量中。但这似乎不起作用。这是我的 javascript + asp.net 代码：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ButtonControl.ascx.cs" Inherits="WebUI.ButtonControl" %>
<link href="Content/ButtonStyles.css" rel="stylesheet" />

<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
    function toggleButtonImage()
    {

        **THE ERROR IS HERE**
        var btnValue = parseInt(document.getElementById('<%=Button.ClientID%>').value);

        //if Text value greater than one then display image
        if (btnValue > 1)
        {
            $(document).ready(function ()
            {
                $("#AcumenButton").click(function ()
                {
                    $("#AcumenButton").addClass("buttonBackgroundOn");
                    return false;
                });
            });
        }

        // else no image
        else
        {
            $(document).ready(function ()
            {
                $("#Button").click(function ()
                {
                    $("#Button").addClass("buttonBackgroundOff");
                    return false;
                });
            });
        }

    }
</script>

<asp:Button ID="Button" runat="server" Text="3" Width="7.2%" Height="79px" />

这是我的两个类的CSS：

.buttonBackgroundOn 
{
    background: url(/Images/BlobOnButtonImg.PNG) no-repeat !important;
    width: 400%;
    height: 100%;
}

buttonBackgroundOff 
{
    background: url(/Images/PlainBorderButtonImg.PNG) no-repeat !important;
    width: 400%;
    height: 100%;
}

使用此用户控件的页面在其 .cs 类中具有以下内容：

ClientScript.RegisterStartupScript(this.GetType(), "js", "toggleButtonBorder();", false);

我真的不知道我哪里错了。有什么建议吗？

4

2 回答 2

0

经过大量挖掘，我发现 JavaScript 可能不是在这里使用的最佳工具。相反，我为用户控件 ascx.cs 类中的按钮设置了 CssClass，以便为我提供所需的结果：

protected void Page_Load(object sender, EventArgs e)
    {
        ToggleButtonImage(int.Parse(ButtonText));            
    }
public int ToggleButtonImage(int btnTextValue) 
        {
            int btnTextVal = btnTextValue;

            if (btnTextVal > 1)
            {
                Button.CssClass = "buttonBackgroundOn";
            }
            else if (btnTextVal <= 1)
            {
                Button.CssClass = "buttonBackgroundOff";
            }
            return btnTextVal;
        }

这样做要简单得多。

于 2013-09-17T15:44:40.893 回答
0 
<script type="text/javascript">
    $(document).ready(function ()
            {


        **THE ERROR IS HERE**
        var btnValue = parseInt(document.getElementById('<%=AcumenButton.ClientID%>').value);

        //if Text value greater than one then display image
        if (btnValue > 1)
        {
             $("#AcumenButton").click(function ()
                {
                    $("#AcumenButton").addClass("buttonBackgroundOn");
                    return false;
                });

        }

        // else no image
        else
        {

                $("#AcumenButton").click(function ()
                {
                    $("#AcumenButton").addClass("buttonBackgroundOff");
                    return false;
                });

        }

    });
</script>
于 2013-09-17T15:56:09.600 回答