同一页面上更多的ascx实例

时间:2019-07-03 11:47:24

标签: javascript asp.net user-controls ascx

我有一个asp.net ascx调用ProductSearch

在ascx中,我有这4个控件

<asp:TextBox runat="server" ID="txtSearchProduct" type="text" class="form-control typeahead" data-provide="typeahead" autocomplete="off">
</asp:TextBox>
<asp:TextBox runat="server" ID="txtProductNames" CssClass="hidden"> 
</asp:TextBox>
<asp:TextBox runat="server" ID="txtSearchProductID" Style="display: none;"> 
</asp:TextBox>
<asp:TextBox runat="server" ID="txtCaricati" Style="display: none;"> 
</asp:TextBox>

在此ascx中,我有一个javascript函数,它使用所有可能的值填充typeahead文本框:

function LoadProducts() {
    var data = $("#<%=txtProductNames.ClientID%>").val();

    var $input = $(".typeahead");
    var jsonObj = $.parseJSON(data);
    var sourceArr = [];
    for (var i = 0; i < jsonObj.length; i++) {
        sourceArr.push(formatRow(jsonObj[i].id, jsonObj[i].code, jsonObj[i].name));
    }

    // init Typeahead
    $input.typeahead({
        ...
    }

现在,问题是我有一个aspx页面,需要两次实现ascx。 在主体div中一个,在模式div中一个(被html隐藏,但模式不可见)。

使用F12工具浏览html,我发现我有两次相同的函数LoadProducts()。

第一个函数使用其ClientId对象,第二个函数也使用。

我从后面的代码中调用函数LoadProducts(),并且执行了在代码中找到的第一个函数,也许是错误的。

我需要一种方法来确定javascript函数,具体取决于我使用的是哪个ascx实例。

有没有办法做到这一点?如果我不够清楚,请问我问题。

2 个答案:

答案 0 :(得分:2)

如果您不希望使用“全局” LoadProducts,那就更好了,您需要使每个javascript函数都唯一。 为此,您可以使用用户控件本身的ID。

因此您可以在ascx内执行此操作

<script>
    function LoadProducts_<%= this.ID %>() {
        alert('Products Loaded.')
    }

    LoadProducts_<%= this.ID %>();
</script>

因此,如果您有2个这样的用户控件

<uc1:WebUserControl1 ID="WebUserControl1" runat="server" />
<uc1:WebUserControl1 ID="WebUserControl2" runat="server" />

您将拥有这样的javascript函数

function LoadProducts_WebUserControl1() {

}

答案 1 :(得分:0)

我认为即使在同一页面上有数百个控件,您也只需要脚本一次。 尝试这个。 将脚本移到服务器端

**check if (!cs.IsClientScriptBlockRegistered(csType, csName))**

我认为这就是您的主管想要的。

<%@ Page Language="C#"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
  public void Page_Load(Object sender, EventArgs e)
  {
    // Define the name and type of the client script on the page.
    String csName = "ButtonClickScript";
    Type csType = this.GetType();

    // Get a ClientScriptManager reference from the Page class.
    ClientScriptManager cs = Page.ClientScript;

    // Check to see if the client script is already registered.
    if (!cs.IsClientScriptBlockRegistered(csType, csName))
    {
      StringBuilder csText = new StringBuilder();
      csText.Append("<script type=\"text/javascript\"> function DoClick() {");
      csText.Append("Form1.Message.value='Text from client script.'; }");
      csText.Append("</script>");
      cs.RegisterClientScriptBlock(csType, csName, csText.ToString());
    }
  }
</script>
<html  >
  <head>
    <title>RegisterClientScriptBlock Example</title>
  </head>
  <body>
     <form id="Form1"
         runat="server">
        <input type="text" id="Message" /> <input type="button" value="ClickMe" onclick="DoClick()" />
     </form>
  </body>
</html>