黑马程序员_同一页面使用用多次同一用户控件

最新推荐文章于 2023-04-19 11:32:28 发布

whilelie

最新推荐文章于 2023-04-19 11:32:28 发布

阅读量2.3k

点赞数

分类专栏： C# 文章标签：脚本 javascript usercontrols div server

本文链接：https://blog.csdn.net/whilelie/article/details/7558305

版权

C# 专栏收录该内容

13 篇文章

订阅专栏

本文探讨了在ASP.NET中为用户控件注册JavaScript方法时遇到的问题，特别是当页面多次包含同一控件时如何避免JS方法重复注册及冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

“----------ASP.Net+Android+IOS开发、Net培训、期待与您交流！----------”

开发asp.net控件的时候，有时候需要为控件定义javascript方法，当页面加载该控件的时候，javascript方法也会一同被加载。但是这样有可能会产生一个问题，当页面中只包含该控件一次，那么不会产生问题，但是如果包含该控件多次，则可能产生javascript方法的调用问题。举一个例子，如下：

定一个控件：userControl.ascx，该控件的作用就是当选中checkbox时，会显示div中的"Hello!"，反之则隐藏。

1.新建一个用户控件webUserControl.ascx

前端

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="webUserControl.ascx.cs" Inherits="UserControls_webUserControl" %>
<asp:CheckBox runat="server" ID="checkBox1" Text="ShowHello" />
<div id="divShow" style="display:none;" runat="server">
Hello!
</div>

后端

  protected void Page_Load(object sender, EventArgs e)
    {

        /*
         无需检查以前是否已经注册过了
         客户端脚本由它的键和类型唯一标识。具有相同的键和类型的脚本被视为重复脚本。只有使用给定的类型和键对的脚本才能使用该页面进行注册。试图注册一个已经注册的脚本不会创建重复的脚本。
         很明白的
         如果你
         RegisterClientScriptBlock(this.getType(),"myjs","脚本内容");
         两次执行该代码,并不会输出两次脚本
         因为两次执行时this.getType()和"myjs"是没有改变的
        */
        string script = "<script src='js/JScript.js'></script>";//路径???(有待解决)
        Page.ClientScript.RegisterStartupScript(this.GetType(), "myjs", script);

        string ckb = this.ClientID + "_checkBox1";
        string div = this.ClientID + "_divShow";
        checkBox1.Attributes.Add("onclick", "showDiv('"+ckb+"','"+div+"')");
    }

新建一个js文件

function showDiv(ckb, div) {
    var checkBox = document.getElementById(ckb);
    var div = document.getElementById(div);
    if (checkBox.checked == true) {
        div.style.display = "";
    }
    else {
        div.style.display = "none";
     }
 }

新建一个aspx页面用于测试

<body>
    <form id="form1" runat="server">
    <div>
   <p> <uc:webUserControl runat="server" id="ucwebUserControl"></uc:webUserControl></p>
   <p> <uc:webUserControl runat="server" id="WebUserControl1"></uc:webUserControl></p>
   
    </div>
    </form>
</body>

执行结果: