在 ASP .NET C# 中使用 JQuery 自动完成的多个用户控件

Question

我的项目中有多个用户控件。请在下面找到两个这样的用户控件标记。

放置用户控件

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Places.ascx.cs" Inherits="Places" EnableTheming="true" %>
<script type="text/javascript">

    $(document).ready(function () {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(EndRequest);
        SetAutoComplete();
    });
    function SetAutoComplete() {
        $("[id$=txtLocation]").autocomplete({
            source: function (request, response) {
                AjaxCall("<%= ResolveUrl("~/UControls/WebMethods.aspx/GetLocations") %>", request.term, response)
            },
            select: function (e, i) {
                $("[id$=hfLocation]").val(i.item.val);
            },
            minLength: 1
        });
        }
</script>
<asp:TextBox ID="txtLocation" runat="server"></asp:TextBox>
<asp:HiddenField ID="hfLocation" runat="server" />

技能用户控制

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UCSkill.ascx.cs" Inherits="UCSkill" EnableTheming="true" %>
    <script type="text/javascript">
        $(document).ready(function () {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_endRequest(EndRequest);
            SetAutoComplete();
        });
        function SetAutoComplete() {
            $("[id$=txtSkill]").autocomplete({
                source: function (request, response) {
                    AjaxCall("<%= ResolveUrl("~/UControls/WebMethods.aspx/GetSkills") %>", request.term, response)
                },
                select: function (e, i) {
                    $("[id$=hfSkillID]").val(i.item.val);
                },
                minLength: 1
            });
        }
    </script>
<asp:TextBox ID="txtSkill" runat="server" SkinID="lg-TB"></asp:TextBox>
<asp:Button ID="btnAddSkill" runat="server" Text="Add" OnClick="btnAddSkill_Click" />
<asp:HiddenField ID="hfSkillID" runat="server" />

现在我的问题是，如果在同一页面中使用两个用户控件，如下所示，只有底部的那个有效，

即，我的 PlacesUC 有效而 SkillsUC 无效，它只是保持空白，甚至不会抛出任何错误。如果我将 PlacesUC 移到顶部并将 SkillsUC 移到底部，那么我的 SkillsUC 有效而 PlacesUC 无效。为了清楚起见，页面中的最后一个用户控件单独工作。将所有用户控件置于其上方不起作用。可能是与ready函数或autocomplete函数冲突。

如何解决？

<%@ Page Language="C#" CodeFile="Test.aspx.cs" Inherits="Test" MasterPageFile="~/UI/HomePage.master" %>
<%@ Register Src="~/UControls/Places.ascx" TagPrefix="uc1" TagName="Places" %>
<%@ Register Src="~/UControls/UCSkill.ascx" TagPrefix="uc1" TagName="UCSkill" %>

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

编辑：-

我的Ajax调用函数如下

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

我的主页如下

<%@ Master Language="C#" CodeFile="HomePage.master.cs" Inherits="HomePage" %>

<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>e-Recruitment</title>
</head>
<body style="padding-left: 5px; padding-right: 5px">
    <style type="text/css">
        .borderless td, .borderless th {
            border: none;
        }

        .checkboxlist-inline li, .radiobuttonlist-inline li {
            display: inline-block;
        }

        .checkboxlist-inline, .radiobuttonlist-inline {
            margin-left: 8px;
        }

            .checkboxlist-inline label, .radiobuttonlist-inline label {
                padding-left: 0;
                padding-right: 8px;
            }
    </style>
    <script src="../Scripts/jquery-3.2.1.slim.min.js"></script>
    <script src="../Scripts/popper.min.js"></script>
    <script src="../Scripts/bootstrap.min.js"></script>

    <script src="../Scripts/jquery-1.10.0.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
    <link href="../Scripts/jquery-ui.css" rel="stylesheet" />
    <form id="MainForm" runat="server"  enctype="multipart/form-data">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Company" Name="Company.JavaScript.CompanyScript.js" />
            </Scripts>
        </asp:ScriptManager>
        <asp:UpdatePanel ID="MainUpdPanel" runat="server">
            <ContentTemplate>
                <div id="ParentDiv" class="container-fluid">
                    <div class="row">
                        <div class="col-md-1">
                            <img src="../Content/Images/logonew.png" class="img-responsive" />
                        </div>
                        <div class="col-md-11">
                            <asp:ContentPlaceHolder ID="HeadContent" runat="server">
                            </asp:ContentPlaceHolder>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <asp:ContentPlaceHolder ID="PageContent" runat="server">
                            </asp:ContentPlaceHolder>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <br />
                            <table class="table table-hover">
                                <tr>
                                    <td style="width: 10%">
                                        <asp:Label ID="lblTheme" runat="server" Text="Site Theme"></asp:Label>
                                    </td>
                                    <td style="width: 20%; text-align: left">
                                        <asp:DropDownList ID="ddlTheme" AutoPostBack="true" runat="server" OnSelectedIndexChanged="ddlTheme_SelectedIndexChanged">
                                        </asp:DropDownList>
                                    </td>
                                    <td style="width: 70%; text-align: right">
                                        <small><i>&copy;<asp:Label ID="lblComp" runat="server" Text=" Company 2018"></asp:Label>
                                            &reg;<asp:Label ID="lblRights" runat="server" Text=" All Rights Reserved"></asp:Label></i></small>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

Answer 1

请将 Jquery 更新为 select 最接近调用您的

的控件

SetAutoComplete();

代码然后所有控件都将工作。

Answer 2

请检查您的 doucment.ready 代码中的这一行。

prm.add_endRequest(EndRequest);

页面异常

EndRequest is not defined error

.

Answer 3

谢谢大家的帮助，终于解决了下面的问题。

所有函数名称都应该是唯一的。
页面回发时UpdatePanel内容发生变化，需要重新注册事件

综合以上两点，新代码如下

放置用户控件

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Places.ascx.cs" Inherits="Places" 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) {
                AjaxCall("<%= ResolveUrl("~/UControls/WebMethods.aspx/GetLocations") %>", request.term, response)
            },
            select: function (e, i) {
                $("[id$=hfLocation]").val(i.item.val);
            },
            minLength: 1
        });
        }
</script>
<asp:TextBox ID="txtLocation" runat="server"></asp:TextBox>
<asp:HiddenField ID="hfLocation" runat="server" />

技能用户控制

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UCSkill.ascx.cs" Inherits="UCSkill" EnableTheming="true" %>
    <script type="text/javascript">
        $(function () {
            GetSkills();
        });
        var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
        prmInstance.add_endRequest(function () {
            GetSkills();
        });
        function GetSkills() {
            $("[id$=txtSkill]").autocomplete({
                source: function (request, response) {
                    AjaxCall("<%= ResolveUrl("~/UControls/WebMethods.aspx/GetSkills") %>", request.term, response)
                },
                select: function (e, i) {
                    $("[id$=hfSkillID]").val(i.item.val);
                },
                minLength: 1
            });
        }
    </script>
<asp:TextBox ID="txtSkill" runat="server" SkinID="lg-TB"></asp:TextBox>
<asp:Button ID="btnAddSkill" runat="server" Text="Add" OnClick="btnAddSkill_Click" />
<asp:HiddenField ID="hfSkillID" runat="server" />

在 ASP .NET C# 中使用 JQuery 自动完成的多个用户控件

Multiple UserControls with JQuery Autocomplete in ASP .NET C#

c#

asp.net

jquery-ui-autocomplete

twitter-bootstrap