asp.net用户控件调用js,主界面使用时会放置多个用户控件,只有一个的js会起作用。

fuda_1985 2014-09-23 09:26:29
用户控件界面代码:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="WebApplication1.WebUserControl1" %>
<div>
<asp:Button ID="Button1" runat="server" BackColor="red" Width="40"
BorderStyle="None" OnClick="UserOnClick" style="height: 17px" />
</div>
<script>
var timename;
function text() {
timename = setInterval("change()", 1000);
}

function change() {
var btnId = "<%=GetBtnId()%>";
var btnColor = document.getElementById(btnId).style.backgroundColor;
if (btnColor == 'blue') {
document.getElementById(btnId).style.backgroundColor = 'red';
}
else {
document.getElementById(btnId).style.backgroundColor = 'blue';
}
}

function textClose() {
clearInterval(timename);
}
</script>

用户控件后台代码:
 protected void Page_Load(object sender, EventArgs e)
{

}

private Color _flickerColor1;
public Color FlickerColor1
{
get { return _flickerColor1; }
set { _flickerColor1 = value; }
}

private Color _flickerColor2;
public Color FlickerColor2
{
get { return _flickerColor2; }
set { _flickerColor2 = value; }
}

public Color BackGroud
{
get { return this.Button1.BackColor; }
set { this.Button1.BackColor = value; }
}

private bool isBroken;

public bool IsBroken
{
get { return isBroken; }
set {

isBroken = value;
if (isBroken)
{
Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "<script>text()</script>");
}
else
{
Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "<script>textClose()</script>");
}
}
}

/// <summary>
/// 返回控件
/// </summary>
/// <returns></returns>
public string GetBtnId()
{
return this.Button1.ClientID.ToString();
}

void timer_Tick(object sender, EventArgs e)
{
if (isBroken)
{
if (Button1.BackColor == Color.Red)
{
Button1.BackColor = Color.Black;
}
else
{
Button1.BackColor = Color.Red;
}
}
}


public event EventHandler Login; //添加事件句柄

protected void UserOnClick(object sender, EventArgs e)
{
if (Login != null)
Login(this, new EventArgs()); //激活Login事件
}


调用界面前台:

<%@ Register src="WebUserControl1.ascx" tagname="WebUserControl1" tagprefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div style="margin:4,4,4,4;">

<asp:Button ID="Button1" runat="server" Text="是否停止闪烁" onclick="Button1_Click" />
<uc1:WebUserControl1 ID="WebUserControl13" runat="server" BackGroud="Black" />
<uc1:WebUserControl1 ID="WebUserControl12" runat="server" BackGroud="Black" />
<uc1:WebUserControl1 ID="WebUserControl11" runat="server" BackGroud="Black" />
</div>
</form>

</body>
</html>

调用界面后台:

protected void Page_Load(object sender, EventArgs e)
{

}

protected void OnLoginPress(Object Render, EventArgs e)
{
this.RegisterClientScriptBlock("", "<script>alert(1);</script>");
}

protected void Button1_Click(object sender, EventArgs e)
{
if (!WebUserControl11.IsBroken)
{
WebUserControl11.IsBroken = true;
}
else
{
WebUserControl11.IsBroken = true;
}

if (!WebUserControl12.IsBroken)
{
WebUserControl12.IsBroken = true;
}
else
{
WebUserControl12.IsBroken = true;
}
}

现在的问题是,当只使用一个用户控件,闪烁变色时,是没问题的,多个时会出问题,我想应该是用胡控件中的JS方法名都是一个造成的,就是在用户控件后台注册JS,我就可以控制js的方法名,但是在后台注册的定时器js无效了,想不出来用什么办法来实现自己的功能了。
...全文
1406 15 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
fuda_1985 2014-09-25
  • 打赏
  • 举报
回复
引用 14 楼 fuda_1985 的回复:
[quote=引用 13 楼 fuda_1985 的回复:] ... [quote=引用 12 楼 wyumening 的回复:] [quote=引用 11 楼 fuda_1985 的回复:] 这是调用的地方:
 public bool IsBroken
        {
            get { return isBroken; }
            set {
                
                isBroken = value;
                if (isBroken)
                {
                    Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "<script>alert('"+this.ClientID.ToString()+"');Mycontrl.prototype.Refresh('" + this.ClientID.ToString() + "','" + this.FlickerColor1.ToString() + "','" + this.FlickerColor2.ToString() + "')</script>");
                }
                else
                {
                    Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "<script>textClose()</script>");
                }
            }
        }
当有两个属性调用的时候,确实跑了两次这段代码,但是页面最终看源的HTML,发现只有第一次的js写到界面了。后面的未写。
注意RegisterStartupScript这个方法,这个方法的第二个参数表示key,如果key设置的相同的话,就会第一个覆盖下面的jsScript代码,而失去效应,所以在用的时候如果会有多个用户控件要把key设置不同,你可以看看是不是这方面的问题[/quote] 我看看去。[/quote] 这确实解决了一个问题。另外,我找到一个更简单的方法来写js.不用匿名。定义方法是使用 function Test<%=this.ClientID %>() { setInterval("ChangeColor"+"<%=this.ClientID %>"+"()", 1000); } 后台调用时: Page.ClientScript.RegisterStartupScript(Page.GetType(), this.ClientID, "<script>Test" + this.ClientID + "()</script>"); 从来没注意RegisterStartupScript方法那个KEY人作用。[/quote] 这样写更简单,只要会C#的都能看明白,js很差都可以看懂。
fuda_1985 2014-09-25
  • 打赏
  • 举报
回复
引用 13 楼 fuda_1985 的回复:
... [quote=引用 12 楼 wyumening 的回复:] [quote=引用 11 楼 fuda_1985 的回复:] 这是调用的地方:
 public bool IsBroken
        {
            get { return isBroken; }
            set {
                
                isBroken = value;
                if (isBroken)
                {
                    Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "<script>alert('"+this.ClientID.ToString()+"');Mycontrl.prototype.Refresh('" + this.ClientID.ToString() + "','" + this.FlickerColor1.ToString() + "','" + this.FlickerColor2.ToString() + "')</script>");
                }
                else
                {
                    Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "<script>textClose()</script>");
                }
            }
        }
当有两个属性调用的时候,确实跑了两次这段代码,但是页面最终看源的HTML,发现只有第一次的js写到界面了。后面的未写。
注意RegisterStartupScript这个方法,这个方法的第二个参数表示key,如果key设置的相同的话,就会第一个覆盖下面的jsScript代码,而失去效应,所以在用的时候如果会有多个用户控件要把key设置不同,你可以看看是不是这方面的问题[/quote] 我看看去。[/quote] 这确实解决了一个问题。另外,我找到一个更简单的方法来写js.不用匿名。定义方法是使用 function Test<%=this.ClientID %>() { setInterval("ChangeColor"+"<%=this.ClientID %>"+"()", 1000); } 后台调用时: Page.ClientScript.RegisterStartupScript(Page.GetType(), this.ClientID, "<script>Test" + this.ClientID + "()</script>"); 从来没注意RegisterStartupScript方法那个KEY人作用。
fuda_1985 2014-09-25
  • 打赏
  • 举报
回复
...
引用 12 楼 wyumening 的回复:
[quote=引用 11 楼 fuda_1985 的回复:] 这是调用的地方:
 public bool IsBroken
        {
            get { return isBroken; }
            set {
                
                isBroken = value;
                if (isBroken)
                {
                    Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "<script>alert('"+this.ClientID.ToString()+"');Mycontrl.prototype.Refresh('" + this.ClientID.ToString() + "','" + this.FlickerColor1.ToString() + "','" + this.FlickerColor2.ToString() + "')</script>");
                }
                else
                {
                    Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "<script>textClose()</script>");
                }
            }
        }
当有两个属性调用的时候,确实跑了两次这段代码,但是页面最终看源的HTML,发现只有第一次的js写到界面了。后面的未写。
注意RegisterStartupScript这个方法,这个方法的第二个参数表示key,如果key设置的相同的话,就会第一个覆盖下面的jsScript代码,而失去效应,所以在用的时候如果会有多个用户控件要把key设置不同,你可以看看是不是这方面的问题[/quote] 我看看去。
jun471537173 2014-09-24
  • 打赏
  • 举报
回复
把属性用viewstate存取试试
宝_爸 2014-09-24
  • 打赏
  • 举报
回复
肯定只有一个起作用了。 要是我的话,我会用jquery, 把js代码放到单独的.js中, 每个user control都引用它, 在onready 中启动定时器,注意每引用一次,ready就会执行一次,需要判断timer是不是存在; 或者放在页面中,确保只执行一次。 Usercontrol的button 给一个class, internal 触发的时候用jquery 的selector通过class取得所有的buttons($(".classname")). 在一个一个的改变颜色。
wyumening 2014-09-24
  • 打赏
  • 举报
回复
既然问题是由于多个用户控件中js方法重名造成的,那么你可以使用匿名函数给setinterval函数传递参数,这样就不会有js函数名重复的问题了,例如:
window.setInterval(function()
    {
        intervalRun(param);
    }, 888);
你可以把intervalRun(param) 替换成具体的js代码
正宗熊猫哥 2014-09-24
  • 打赏
  • 举报
回复
爱莫能助,能帮助你的都在睡觉呢
fuda_1985 2014-09-24
  • 打赏
  • 举报
回复
没人提供点帮助么?
wyumening 2014-09-24
  • 打赏
  • 举报
回复
引用 11 楼 fuda_1985 的回复:
这是调用的地方:
 public bool IsBroken
        {
            get { return isBroken; }
            set {
                
                isBroken = value;
                if (isBroken)
                {
                    Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "<script>alert('"+this.ClientID.ToString()+"');Mycontrl.prototype.Refresh('" + this.ClientID.ToString() + "','" + this.FlickerColor1.ToString() + "','" + this.FlickerColor2.ToString() + "')</script>");
                }
                else
                {
                    Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "<script>textClose()</script>");
                }
            }
        }
当有两个属性调用的时候,确实跑了两次这段代码,但是页面最终看源的HTML,发现只有第一次的js写到界面了。后面的未写。
注意RegisterStartupScript这个方法,这个方法的第二个参数表示key,如果key设置的相同的话,就会第一个覆盖下面的jsScript代码,而失去效应,所以在用的时候如果会有多个用户控件要把key设置不同,你可以看看是不是这方面的问题
fuda_1985 2014-09-24
  • 打赏
  • 举报
回复
这是调用的地方:
 public bool IsBroken
        {
            get { return isBroken; }
            set {
                
                isBroken = value;
                if (isBroken)
                {
                    Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "<script>alert('"+this.ClientID.ToString()+"');Mycontrl.prototype.Refresh('" + this.ClientID.ToString() + "','" + this.FlickerColor1.ToString() + "','" + this.FlickerColor2.ToString() + "')</script>");
                }
                else
                {
                    Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "<script>textClose()</script>");
                }
            }
        }
当有两个属性调用的时候,确实跑了两次这段代码,但是页面最终看源的HTML,发现只有第一次的js写到界面了。后面的未写。
fuda_1985 2014-09-24
  • 打赏
  • 举报
回复
引用 7 楼 wyumening 的回复:
既然问题是由于多个用户控件中js方法重名造成的,那么你可以使用匿名函数给setinterval函数传递参数,这样就不会有js函数名重复的问题了,例如:
window.setInterval(function()
    {
        intervalRun(param);
    }, 888);
你可以把intervalRun(param) 替换成具体的js代码

<script>
    var Mycontrl = function () {
        this.clientID = null;
        this.btn = null;

        var ArrayList = null;
        this.beginChange = function (clientId, color1, color2) {
            clientID = clientId;
            Mycontrl.prototype.ArrayList[clientId] = this;

            //var func = new Function("Mycontrl.prototype.ArrayList[" + clientId + "].ChangeColor('" + clientId + "','" + color1 + "','" + color2 + "')");

            var func = new Function("Mycontrl.prototype.ArrayList['" + clientId + "'].ChangeColor()");
            alert(clientId);
            setInterval(func, 1000);
        }

        this.ChangeColor = function () {
            var btnColor = document.getElementById(clientID + "_Button1").style.backgroundColor;
            if (btnColor == "red") {
                document.getElementById(clientID + "_Button1").style.backgroundColor = 'blue';
            }
            else {
                document.getElementById(clientID + "_Button1").style.backgroundColor = 'red';
            }
        }



        //        this.ChangeColor = function (clientid, color1, color2) {
        //            var btnColor = document.getElementById(clientid).style.backgroundColor;
        //            if (btnColor == color1) {
        //                document.getElementById(clientid).style.backgroundColor = color2;
        //            }
        //            else {
        //                document.getElementById(clientid).style.backgroundColor = color1;
        //            }
        //        }

    }
    Mycontrl.prototype.ArrayList = null;

    Mycontrl.prototype.Refresh = function (clientid, color1, color2) {
        if (!Mycontrl.prototype.ArrayList) {
            Mycontrl.prototype.ArrayList = new Array();
        }
        var obj = Mycontrl.prototype.ArrayList[clientid];
       
        if (typeof (obj) == "undefined" || obj == null) {
            obj = new Mycontrl();
        }
        obj.beginChange(clientid, color1, color2);
    }

</script>
你说的匿名方法,我也想过,这是我把js改过之后的代码,结果调用发现一个问题,初衷是想通过clientID来调用不一样的方法,但是单步跟踪的时候发现代码确实应该是调用两次,但是最终呈现的html只调用了一次js的方法,另一个调用未写到界面。我的调用是在用户控件的属性器的Set属性里调用的。
fuda_1985 2014-09-23
  • 打赏
  • 举报
回复
闪不闪想通过放出来的属性来控制。
fuda_1985 2014-09-23
  • 打赏
  • 举报
回复
关键就是不能用客户端来处理。。。到时这种控件会有一两百个。
阿瞒 2014-09-23
  • 打赏
  • 举报
回复
用客户端技术来实现容易些啥: 把自定义控件放在一个div中,通过遍历这个div下的自定义控件,通过获取他的 BackGroud值或css值来知道当前是处于哪种状态(是闪烁还是停止闪状态,再通过更改他的 BackGroud或css值来控制信号色彩,用js或jq都很方便!,还有:你在网页右键查看网页面码,看下你的自定义控件的ID是不是发生变化了::WebUserControl12,WebUserControl11。。。 用客户端的方式来处理好些,我也遇到你这样的过问题过。 至于是否登录或登录事件,用Ajax处理了。
fuda_1985 2014-09-23
  • 打赏
  • 举报
回复
...晕,没人知道?

62,243

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧