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
