ASP .NET 冲突中具有 HiddenFields 的单个自动完成 UserControl 的多个实例

Question

我的用户控件在同一页面中使用两次时出现问题。以下是我的位置用户控件。

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UCLocations.ascx.cs" Inherits="UCLocations" EnableTheming="true" %>
<script type="text/javascript">
    $(function () {
        GetLocations();
    });
    var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
    prmInstance.add_endRequest(function () {
        GetLocations();
    });
    function GetLocations() {
        $("[id$=txtLocation]").autocomplete({
            source: function (request, response) {
                AjaxCallSession("<%= ResolveUrl("~/CompanyControls/WebMethods.aspx/GetLocationsFiltered") %>", request.term, $("[id$=hfSession]").val(), response)
            },
            select: function (e, i) {
                $("[id$=hfLocation]").val(i.item.val);
            },
            minLength: 1
        });
        }
</script>
<asp:TextBox ID="txtLocation" runat="server" Visible="false"></asp:TextBox>
<asp:HiddenField ID="hfLocation" runat="server"/>
<asp:HiddenField ID="hfSession" runat="server"/>
<asp:Button ID="btnAddLocation" runat="server" Text="Add" OnClick="btnAddLocation_Click" Visible="false" />
<br />
<br />
<asp:GridView ID="grvLocations" runat="server" OnRowDeleting="grvLocations_RowDeleting" AutoGenerateColumns="false"
    DataKeyNames="Value" Visible="false">
    <Columns>
        <asp:BoundField DataField="Value" />
        <asp:BoundField DataField="Text" HeaderText="Location" />
        <asp:CommandField ShowDeleteButton="True" ButtonType="Image" DeleteImageUrl="~/Content/Images/Delete.jpg" />
    </Columns>
</asp:GridView>

以下是我使用用户控件的页面。

<%@ Page Language="C#" CodeFile="Test.aspx.cs" Inherits="Test" MasterPageFile="~/UI/HomePage.master" %>

<%@ Register Src="~/CompanyControls/UCLocations.ascx" TagPrefix="uc1" TagName="UCLocations" %>


<asp:Content ContentPlaceHolderID="PageContent" runat="server">
    <div class="row">
        <div class="col-md-12 form-inline">
            <table class="table table-sm">
                <tr>
                    <td>
                        <uc1:UCLocations runat="server" ID="lc" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <uc1:UCLocations runat="server" ID="lc2" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
</asp:Content>

问题是每次调用 GetLocationsFiltered 方法时，仅传递第一个用户控件的 hfsession。如何解决这个冲突。

将 ClientIDMode 设置为静态无效（问题仍然存在，第一个 hfsession 被传递），也像 $('#<%= hfSession.ClientID %>' 一样访问控制。 val() 也没有工作（只有第二个 UC 工作，第一个完全停止工作）。还有其他建议。

Ajax功能如下

function AjaxCallSession(url, prefix, sessionkey, response) {
    $.ajax({
        url: url,
        data: "{ 'prefix': '" + prefix + "', 'sessionkey': '" + sessionkey + "' }",
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        success: function (r) {
            response($.map(r.d, function (item) {
                return {
                    label: item.split('|')[0],
                    val: item.split('|')[1]
                }
            }))
        },
        error: function (r) {
            alert(r.responseText);
        },
        failure: function (r) {
            alert(r.responseText);
        }
    });
}

Answer 1

终于找到答案了。

由于以下问题，我的代码无法运行。

名称冲突，因为两个用户控件的 Jquery 函数具有相同的名称，只有最后呈现的用户控件附加到 jquery 自动完成功能，通过添加解决此问题<%= this.ID %> 到我在用户控件中的 Jquery 函数。
控件名称冲突，通过使用 clientID 访问我的 JQuery 脚本中的控件解决了这个问题 $("#<%=txtLocation.ClientID%>")

我最终的Usercontrol代码如下

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UCLocations.ascx.cs" Inherits="UCLocations" EnableTheming="true" %>
<script type="text/javascript">
    $(function () {
        GetLocations<%= this.ID %>();
    });
    var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
    prmInstance.add_endRequest(function () {
        GetLocations<%= this.ID %>();
    });
    function GetLocations<%= this.ID %>() {
        $("#<%=txtLocation.ClientID%>").autocomplete({
            source: function (request, response) {
                AjaxCallSession("<%= ResolveUrl("~/CompanyControls/WebMethods.aspx/GetLocationsFiltered") %>", request.term, $('#<%= hfSession.ClientID %>').val(), response)
            },
            select: function (e, i) {
                $('#<%= hfLocation.ClientID %>').val(i.item.val);
            },
            minLength: 1
        });
        }
</script>
<asp:TextBox ID="txtLocation" runat="server" Visible="false"></asp:TextBox>
<asp:HiddenField ID="hfLocation" runat="server" />
<asp:HiddenField ID="hfSession" runat="server" />
<asp:Button ID="btnAddLocation" runat="server" Text="Add" OnClick="btnAddLocation_Click" Visible="false" />
<br />
<br />
<asp:GridView ID="grvLocations" runat="server" OnRowDeleting="grvLocations_RowDeleting" AutoGenerateColumns="false"
    DataKeyNames="Value" Visible="false">
    <Columns>
        <asp:BoundField DataField="Value" />
        <asp:BoundField DataField="Text" HeaderText="Location" />
        <asp:CommandField ShowDeleteButton="True" ButtonType="Image" DeleteImageUrl="~/Content/Images/Delete.jpg" />
    </Columns>
</asp:GridView>

ASP .NET 冲突中具有 HiddenFields 的单个自动完成 UserControl 的多个实例

Multiple Instances of single Autocomplete UserControl with HiddenFields in ASP .NET conflict

c#

asp.net

user-controls

jquery-ui-autocomplete

twitter-bootstrap