Apply jQuery AutoComplete to dynamically added ASP.Net TextBox using jQuery Ajax in C# and VB.Net

micah
 
on Nov 14, 2021 10:20 PM
Sample_158137.zip
816 Views

How do i make this dynamic Textbox autocomplete solution work?

I have this code that generates new textbox by button click and then i want to make the item textbox inside the table  autocomplete, but it seems not working.

<asp:UpdatePanel ID="up1" runat="server">                
    <ContentTemplate>
        <div class="">
        </div>
        <div>
            <table>
                <tr>
                    <td>
                        <asp:PlaceHolder ID="ph1" runat="server" />
                        <br />
                        <asp:Button ID="btnAdd" runat="server" Text="Add" CssClass="btn btn-primary"  />
                    </td>
                </tr>
            </table>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
<br /><br />
 <div class=" pull-right">
     <asp:Button Text="Save" runat="server" OnClick="OnSave" CssClass="btn btn-default"/>
     <asp:Button Text="Calculate" runat="server" OnClick="Calculate" CssClass="btn btn-warning"/>
 </div>
<asp:Literal ID="ltlCount" runat="server" Text="0" Visible="false" />
<asp:Literal ID="ltlRemoved" runat="server" Visible="false" />
</div>

 

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UserControl.ascx.cs" Inherits="Ebk.UserControl" %>
<table>
    <tr>
        <td>Item</td>
        <td>Price</td>
        <td>Qty</td>
        <td>Half</td>
    </tr>
    <tr>
        <td><asp:TextBox ID="txtItem" runat="server" CssClass="form-control"/></td>
        <td><asp:TextBox ID="txtPrice" runat="server" CssClass="form-control"/></td>
        <td><asp:TextBox ID="txtQuantity" runat="server" CssClass="form-control" /></td>
        <td><asp:TextBox ID="txthalf" runat="server" CssClass="form-control" /></td>
        <td><asp:Button ID="btnRemove" runat="server" OnClick="btnRemove_Click" Text="Remove" CssClass="btn btn-warning" /></td>
    </tr>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
    rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
    type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

 

[WebMethod]
public static string[] GetItems(string prefix)
{
    List<string> countries = new List<string>();
    using (SqlConnection conn = new SqlConnection())
    {
        conn.ConnectionString = ConfigurationManager.ConnectionStrings["DB"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = "SELECT DISTINCT Item FROM Store_Table WHERE Item LIKE @SearchText + '%'";
            cmd.Parameters.AddWithValue("@SearchText", prefix);
            cmd.Connection = conn;
            conn.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    countries.Add(string.Format("{0}-{1}", sdr["Item"], sdr["Item"]));
                }
            }
            conn.Close();
        }
    }
 
    return countries.ToArray();
}
 
private void AddAndRemoveDynamicControls()
{
    Control c = GetPostBackControl(Page);
    if ((c != null) && c.GetType() == typeof(Button))
    {
        if ((c as Button).Text != "Save" && (c as Button).Text != "Calculate")
        {
            if (c.ID.ToString() == "btnAdd")
            {
                ltlCount.Text = (Convert.ToInt16(ltlCount.Text) + 1).ToString();
 
            }
        }
    }
    ph1.Controls.Clear();
    int ControlID = 0;
    for (int i = 0; i <= (Convert.ToInt16(ltlCount.Text) - 1); i++)
    {
        UserControl DynamicUserControl = (UserControl)LoadControl("UserControl.ascx");
        while (InDeletedList("uc" + ControlID) == true)
        {
            ControlID += 1;
        }
        DynamicUserControl.ID = "uc" + ControlID;
        DynamicUserControl.RemoveUserControl += this.HandleRemoveUserControl;
        ph1.Controls.Add(DynamicUserControl);
        ControlID += 1;
    }
}

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
arjunv
 
on Nov 15, 2021 01:39 AM
on Nov 15, 2021 01:39 AM

Hi Micah,

Please refer below sample.

Database

I have made use of the following table Customers with the schema as follows.

I have already inserted few records in the table.

You can download the database table SQL by clicking the download link below.

Download SQL file

HTML

Default

<asp:ScriptManager ID="sm1" runat="server" />
<asp:GridView runat="server" ID="gvCustomers" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="CustomerId" HeaderText="ID" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:TemplateField HeaderText="Country">
            <ItemTemplate>
                <asp:TextBox runat="server" ID="txtCountry" CssClass="Country"></asp:TextBox>
                <asp:HiddenField ID="hfCountry" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<br />
<asp:UpdatePanel ID="up1" runat="server">
    <ContentTemplate>
        <div class="">
        </div>
        <div>
            <table>
                <tr>
                    <td>
                        <asp:PlaceHolder ID="ph1" runat="server" />
                        <br />
                        <asp:Button ID="btnAdd" runat="server" Text="Add" CssClass="btn btn-primary" />
                    </td>
                </tr>
            </table>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
<div class=" pull-right">
    <asp:Button Text="Save" runat="server" CssClass="btn btn-default" />
    <asp:Button Text="Calculate" runat="server" CssClass="btn btn-warning" />
</div>
<asp:Literal ID="ltlCount" runat="server" Text="0" Visible="false" />
<asp:Literal ID="ltlRemoved" runat="server" Visible="false" />

Usercontrol

<table>
    <tr>
        <td>ID</td>
        <td>Name</td>
        <td>Country</td>
    </tr>
    <tr>
        <td>
            <asp:TextBox ID="txtID" runat="server" /></td>
        <td>
            <asp:TextBox ID="txtName" runat="server" /></td>
        <td>
            <asp:TextBox ID="txtCountry" runat="server" CssClass="Country" /></td>
        <td>
            <asp:Button ID="btnRemove" runat="server" OnClick="btnRemove_Click" Text="Remove" /></td>
    </tr>
</table>

Namespace

using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;

Code

Default

protected void Page_Load(object sender, System.EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.BindGrid();
    }
    AddAndRemoveDynamicControls();
}

private void BindGrid()
{
    string conn = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conn))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT CustomerId, Name, Country FROM Customers", con))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    gvCustomers.DataSource = dt;
                    gvCustomers.DataBind();
                }
            }
        }
    }
}

private void AddAndRemoveDynamicControls()
{
    Control c = GetPostBackControl(Page);
    if ((c != null) && c.GetType() == typeof(Button))
    {
        if ((c as Button).Text != "Save")
        {
            if (c.ID.ToString() == "btnAdd")
            {
                ltlCount.Text = (Convert.ToInt16(ltlCount.Text) + 1).ToString();
            }
        }
    }
    ph1.Controls.Clear();
    int ControlID = 0;
    for (int i = 0; i <= (Convert.ToInt16(ltlCount.Text) - 1); i++)
    {
        UserControl DynamicUserControl = (UserControl)LoadControl("UserControl.ascx");
        while (InDeletedList("uc" + ControlID) == true)
        {
            ControlID += 1;
        }
        DynamicUserControl.ID = "uc" + ControlID;
        DynamicUserControl.RemoveUserControl += this.HandleRemoveUserControl;
        ph1.Controls.Add(DynamicUserControl);
        ControlID += 1;
    }
}

public void HandleRemoveUserControl(object sender, EventArgs e)
{
    Button remove = (sender as Button);
    UserControl DynamicUserControl = (UserControl)remove.Parent;
    ph1.Controls.Remove((UserControl)remove.Parent);
    ltlRemoved.Text += DynamicUserControl.ID + "|";
    ltlCount.Text = (Convert.ToInt16(ltlCount.Text) - 1).ToString();
}

private bool InDeletedList(string ControlID)
{
    string[] DeletedList = ltlRemoved.Text.Split('|');
    for (int i = 0; i <= DeletedList.GetLength(0) - 1; i++)
    {
        if (ControlID.ToLower() == DeletedList[i].ToLower())
        {
            return true;
        }
    }
    return false;
}

public Control GetPostBackControl(Page page)
{
    Control control = null;

    string ctrlname = page.Request.Params.Get("__EVENTTARGET");
    if ((ctrlname != null) & ctrlname != string.Empty)
    {
        control = page.FindControl(ctrlname);
    }
    else
    {
        foreach (string ctl in page.Request.Form)
        {
            Control c = page.FindControl(ctl);
            if (c is System.Web.UI.WebControls.Button)
            {
                control = c;
                break;
            }
        }
    }
    return control;
}

[WebMethod]
public static string[] GetCountries(string prefix)
{
    List<string> countries = new List<string>();
    using (SqlConnection conn = new SqlConnection())
    {
        conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand())
        {
            cmd.CommandText = "SELECT DISTINCT Country FROM Customers WHERE Country LIKE @SearchText + '%'";
            cmd.Parameters.AddWithValue("@SearchText", prefix);
            cmd.Connection = conn;
            conn.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    countries.Add(string.Format("{0}-{1}", sdr["Country"], sdr["Country"]));
                }
            }
            conn.Close();
        }
    }

    return countries.ToArray();
}

Usercontrol

protected internal void btnRemove_Click(object sender, System.EventArgs e)
{
    RemoveUserControl(sender, e);
}

JavaScript

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
    rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
    type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script type="text/javascript">
    $(function () {
        ApplyAutoComplete();

        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null) {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
                    ApplyAutoComplete();
                }
            });
        };
    });

    function ApplyAutoComplete() {
        $(".Country").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: 'CS.aspx/GetCountries',
                    data: "{ 'prefix': '" + request.term + "'}",
                    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);
                    }
                });
            },
            select: function (e, i) {
                //$(this).parent().find("input[type=hidden]").val(i.item.val);
            },
            minLength: 1
        }).focus(function () {
            $(this).autocomplete("search");
        });
    }
</script>

Screenshot