javascript - 同一页面上的更多 ascx 实例

Question

我有一个 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 函数，它用所有可能的值填充预先输入的文本框:

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() 并执行代码中找到的第一个，可能是错误的。

我需要一种方法来根据我使用的 ascx 实例来识别 javascript 函数。

有什么办法吗？如果我还不够清楚，请问我问题。

Answer 1

如果您不想要“全局”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() {

}