javascript - 当我从下拉列表中选择公司名称时 UpdatePanel AutopostBack=true 并且自动完成文本框不起作用

Question

在 UpdatePanel 一个下拉列表中，当我从下拉列表中选择值时 AutopostBack=true 且自动完成文本框不起作用。

我第二次问这个问题了。我的问题没有解决。任何人都可以帮助我解决这个问题。

Ajax - Jquery:

<script type="text/javascript">        

        //On Page Load.
        $(function () {
            SetAutoCompleteGuest();
        });

        //On UpdatePanel Refresh.
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null) {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
                    SetAutoCompleteGuest();
                }
            });
        };


        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(SetAutoCompleteGuest());

       //$(document).ready(function () {

        function SetAutoCompleteGuest() {

            $(".autoguest").autocomplete({
                // source: "AutoGuest.ashx"

                source: function (request, response) {
                    var customer = new Array();
                    $.ajax({
                        async: true,
                        cache: false,
                        type: "POST",
                        dataType: "json",
                        //data: {
                        //    term: request.term
                        //},
                        url: "AutoGuest.ashx?ClCompId=<%=ddlCompany.SelectedValue %>&Comp_Id=<%=Comp_Id.Text%>",
                        success: function (data) {
                            for (var i = 0; i < data.length ; i++) {
                                customer[i] = {
                                    label: data[i].label,
                                    id: data[i].id,
                                    Value: data[i].Value,
                                    Email: data[i].Email
                                };
                                response(customer);
                            }
                        }

                    });

                },
                select: function (event, ui) {
                    $("[id$=txtMobileNo]").attr('value', ui.item.Value);
                    //  $("#hdnVndrChuf_Id").attr('value', ui.item.id);
                    $("[id$=txtNameOfGuest]").attr('value', ui.item.label);
                    $("[id$=txtEmail]").attr('value', ui.item.Email);
                }
            });
        }

        //});
    </script>

更新面板:

<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">

                        <ContentTemplate>
                            <div class="outline">
                                <div class="row">
                                    <div class="col label">
                                        <asp:Label ID="Label8" runat="server" Text="Company"></asp:Label>
                                    </div>
                                    <div class="col">
                                        <asp:DropDownList ID="ddlCompany" class="select_width" AutoPostBack="true" runat="server" OnSelectedIndexChanged="ddlCompany_SelectedIndexChanged"></asp:DropDownList>
                                        <asp:ImageButton ID="ImgRefreshClComp" runat="server" CssClass="refresh" Style="padding: 0px; width: 18px; height: 18px; border: 0px!important; margin-top: 11px;" OnClick="ImgRefreshClComp_Click" ImageUrl="~/Images/images2.png" />
                                        <asp:HyperLink class="btn btn-link save_button" ID="HplAddComp" runat="server" CssClass="error_msg"><h6 style="font-size:12px; font-weight:bold;">Add Company</h6></asp:HyperLink>
                                        <asp:ModalPopupExtender ID="mpclcomp" runat="server" PopupControlID="PnlClComp" TargetControlID="HplAddComp" BackgroundCssClass="modalBackground">
                                        </asp:ModalPopupExtender>   
                                    </div>
                               </div>
                            </div>
                          </ContentTemplate>
<asp:UpdatePanel>

触发器:

<Triggers>
                            <%--<asp:AsyncPostBackTrigger ControlID="ImgRefresh" />
                            <asp:AsyncPostBackTrigger ControlID="ddlFleetCategory" />
                            <asp:AsyncPostBackTrigger ControlID="ddlFleetType" />--%>

                           <asp:AsyncPostBackTrigger ControlID="ddlCompany" EventName="SelectedIndexChanged"/>

                           <%--<asp:PostBackTrigger ControlID="ddlCompany"/>--%>

                        </Triggers>

AutoGuest.ashx:

<%@ WebHandler Language="C#" Class="AutoGuest" %>
using System;
using System.Web;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
using System.Text;
using System.Collections.Generic;
using System.Web.Script.Serialization;

public class GuestDTO
{
    public int id { get; set; }
    public string label { get; set; }
    public string Value { get; set; }
    public string Email { get; set; }
} 

public class AutoGuest : IHttpHandler {

    public void ProcessRequest (HttpContext context) {

        string Prefix = context.Request["term"] ?? "";
        int CL_Comp_Id = Convert.ToInt32(context.Request.QueryString["ClCompId"] ?? "");
        int Comp_Id = Convert.ToInt32(context.Request.QueryString["Comp_Id"] ?? "");

        string cs = ConfigurationManager.ConnectionStrings["t_fleet"].ConnectionString;
        //List<string> data = new List<string>();
        List<GuestDTO> data = new List<GuestDTO>();

        using (SqlConnection conn = new SqlConnection(cs))
        {
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "sp_Select_Guest_Details";
                cmd.Parameters.AddWithValue("@Guest_Nm", Prefix);
                cmd.Parameters.AddWithValue("@CL_Comp_Id", CL_Comp_Id);
                cmd.Parameters.AddWithValue("@Comp_Id", Comp_Id);
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Connection = conn;
                StringBuilder sb = new StringBuilder();
                conn.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        data.Add(new GuestDTO()
                        {
                            //id = Convert.ToInt32(sdr["Vndr_Chuf_Id"]),
                            label =  sdr["Rep_Guest"].ToString(),
                            Value = sdr["Guest_Mob_No"].ToString(),
                            Email = sdr["Guest_Email"].ToString()

                        });
                    }
                }
                JavaScriptSerializer js = new JavaScriptSerializer();
                conn.Close();
                context.Response.Write(js.Serialize(data.ToArray()));
            }
        }      
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

谢谢，请在我的电子邮件 ID - bdevkar11@gmail.com 上分享解决方案

Answer 1

如下更改您的 jquery 函数，

<script type="text/javascript">        

    //On Page Load.
    SetAutoCompleteGuest();

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

    function EndRequestHandler(sender, args) {
        SetAutoCompleteGuest();           
    }


    function SetAutoCompleteGuest() {
        $(document).ready(function () {

            $(".autoguest").autocomplete({
                // source: "AutoGuest.ashx"

                source: function (request, response) {
                    var customer = new Array();
                    $.ajax({
                        async: true,
                        cache: false,
                        type: "POST",
                        dataType: "json",
                        //data: {
                        //    term: request.term
                        //},
                        url: "AutoGuest.ashx?ClCompId=<%=ddlCompany.SelectedValue %>&Comp_Id=<%=Comp_Id.Text%>",
                        success: function (data) {
                            for (var i = 0; i < data.length ; i++) {
                                customer[i] = {
                                    label: data[i].label,
                                    id: data[i].id,
                                    Value: data[i].Value,
                                    Email: data[i].Email
                                };
                                response(customer);
                            }
                        }

                    });

                },
                select: function (event, ui) {
                    $("[id$=txtMobileNo]").attr('value', ui.item.Value);
                    //  $("#hdnVndrChuf_Id").attr('value', ui.item.id);
                    $("[id$=txtNameOfGuest]").attr('value', ui.item.label);
                    $("[id$=txtEmail]").attr('value', ui.item.Email);
                }
            });
        });
    }

</script>

确保将此 jquery 放在页面末尾。