Hi simflex,
Please refer below sample.
HTML
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ajax:ModalPopupExtender ID="installAddress_MPE" runat="server" TargetControlID="lnkFake"
PopupControlID="installnew" CancelControlID="btnClose" BackgroundCssClass="modalBackground popup" />
<asp:LinkButton ID="lnkFake" Text="" runat="server" />
<asp:Panel ID="installnew" runat="server" CssClass="modalPopup" align="center" Style="display: none;">
<asp:Table ID="Table4" class="popupdiv" Style="background-color: white; font-size: 12pt;
color: Black; width: 900px;" runat="server">
<asp:TableRow>
<asp:TableCell ID="TableCell3" Style="background-color: green; font-size: 12pt; color: White;"
runat="server" ColumnSpan="6">
<asp:Label ID="installAddressHeader" runat="server" Text="New Installation Address Entry" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableHeaderCell CssClass="align-right"> </asp:TableHeaderCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell ID="TableCell1" Style="background-color: olive; font-size: 12pt; color: White;"
runat="server" ColumnSpan="6">
<asp:Label ID="Label1" runat="server" Style="float: left; width: 100%; text-align: center;
font-weight: bold !important;" Text="PROPERTY ADDRESS INFORMATION" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableHeaderCell CssClass="align-right">Install Address:</asp:TableHeaderCell>
<asp:TableCell ColumnSpan="2">
<asp:TextBox ID="instAddress" runat="server" /></asp:TableCell>
<asp:TableHeaderCell CssClass="align-right">Water Account #:</asp:TableHeaderCell>
<asp:TableCell ColumnSpan="2">
<asp:TextBox ID="instAddressAccount" runat="server" /></asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableHeaderCell CssClass="align-right">City:</asp:TableHeaderCell>
<asp:TableCell>
<asp:DropDownList ID="instAddressCity" AutoPostBack="true" runat="server" />
<%--OnSelectedIndexChanged="instAddressCity_Changed"--%>
</asp:TableCell>
<asp:TableHeaderCell CssClass="align-left">State:</asp:TableHeaderCell>
<asp:TableCell>
<asp:Label ID="instAddressState" runat="server" Text="GA" /></asp:TableCell>
<asp:TableHeaderCell CssClass="align-left">Zip:</asp:TableHeaderCell>
<asp:TableCell>
<asp:DropDownList ID="instAddressZip" runat="server" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableHeaderCell ColumnSpan="5" CssClass="align-left">Install address same as mailing address?</asp:TableHeaderCell>
<asp:TableCell>
<asp:CheckBox ID="SameAsMailing" runat="server" /></asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableHeaderCell ColumnSpan="3" CssClass="align-left">Address:</asp:TableHeaderCell>
<asp:TableCell ColumnSpan="3">
<asp:TextBox ID="mailStreetAddress" runat="server" /></asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableHeaderCell CssClass="align-left">City:</asp:TableHeaderCell>
<asp:TableCell>
<asp:TextBox ID="mailCity" runat="server" /></asp:TableCell>
<asp:TableHeaderCell CssClass="align-left">State:</asp:TableHeaderCell>
<asp:TableCell>
<asp:TextBox ID="mailState" runat="server" /></asp:TableCell>
<asp:TableHeaderCell CssClass="align-left">Zip:</asp:TableHeaderCell>
<asp:TableCell>
<asp:TextBox ID="mailZip" runat="server" /></asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableHeaderCell CssClass="align-left">Total toilets:</asp:TableHeaderCell>
<asp:TableCell ColumnSpan="2">
<asp:DropDownList ID="instAddressToilets" runat="server">
<asp:ListItem Selected="True" Text="0" Value="0" />
<asp:ListItem Text="1" Value="1" />
<asp:ListItem Text="2" Value="2" />
<asp:ListItem Text="3" Value="3" />
<asp:ListItem Text="4" Value="4" />
<asp:ListItem Text="5" Value="5" />
<asp:ListItem Text="6" Value="6" />
<asp:ListItem Text="7" Value="7" />
<asp:ListItem Text="8" Value="8" />
</asp:DropDownList>
</asp:TableCell>
<asp:TableHeaderCell CssClass="align-right">Year Built:</asp:TableHeaderCell>
<asp:TableCell ColumnSpan="2">
<asp:TextBox ID="instYearBuilt" runat="server" /></asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableHeaderCell CssClass="align-right"> </asp:TableHeaderCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell ID="TableCell2" Style="background-color: olive; font-size: 12pt; color: White;"
runat="server" ColumnSpan="6">
<asp:Label ID="Label3" Style="float: left; width: 100%; text-align: center; font-weight: bold !important;"
runat="server" Text="OWNER / APPLICANT INFORMATION" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell ColumnSpan="4" Style="text-align: left;">
<asp:Label ID="dataTest" runat="server" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell Style="white-space: nowrap">Primary First Name:</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="primaryFirstName" runat="server" /></asp:TableCell>
<asp:TableCell Style="white-space: nowrap">Primary Last Name:</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="primaryLastName" runat="server" /></asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell Style="white-space: nowrap">Secondary First Name:</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="secondaryFirstName" runat="server" /></asp:TableCell>
<asp:TableCell Style="white-space: nowrap">Secondary Last Name:</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="secondaryLastName" runat="server" /></asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell> </asp:TableCell>
<asp:TableCell>Modifier:</asp:TableCell>
<asp:TableCell>
<asp:DropDownList ID="ownerModifier" runat="server">
<asp:ListItem Selected="True" Text="None" Value="0" />
<asp:ListItem Text="And" Value="And" />
<asp:ListItem Text="Or" Value="Or" />
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>Primary Phone:</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="phoneNumber" runat="server" />
<ajax:MaskedEditExtender ID="phoneNumberMask" runat="server" TargetControlID="phoneNumber"
ClearMaskOnLostFocus="false" Mask="(999) 999-9999" MaskType="Number" />
</asp:TableCell>
<asp:TableCell>Alternate Phone:</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="altPhoneNumber" runat="server" />
<ajax:MaskedEditExtender ID="altPhoneNumberMask" runat="server" TargetControlID="altPhoneNumber"
ClearMaskOnLostFocus="false" Mask="(999) 999-9999" MaskType="Number" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>Email:</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="emailAddress" runat="server" />
<asp:RegularExpressionValidator ID="emailRegEx" runat="server" ControlToValidate="emailAddress"
Text="*!*" ErrorMessage="A valid Email Address must be supplied for Owner/Applicant Email Address"
ValidationExpression="^(['_a-z0-9-]+)(\.['_a-z0-9-]+)*@([a-z0-9-]+)(\.[a-z0-9-]+)*(\.[a-z]{2,5})$" />
</asp:TableCell>
<asp:TableCell>Business:</asp:TableCell>
<asp:TableCell>
<asp:CheckBox ID="isBusiness" runat="server" Checked="true" Enabled="false" Visible="false" /></asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableHeaderCell CssClass="align-right"> </asp:TableHeaderCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell ID="TableCell4" Style="background-color: olive; font-size: 12pt; color: White;"
runat="server" ColumnSpan="6">
<asp:Label ID="Label4" runat="server" Style="float: left; width: 100%; text-align: center;
font-weight: bold !important;" Text="TOILET INFORMATION" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<div id="divRebatable" class="popupdiv">
<br />
<div id="newtoilet">
<asp:TextBox ID="txt_toiletsizes" placeholder="Enter new Toiltet GPF to dropdown"
runat="server"></asp:TextBox>
<asp:TextBox ID="txt_newAmount" placeholder="Enter amount" Width="100px" runat="server"></asp:TextBox>
<asp:Button ID="btn_add" runat="server" Text="Add It" /></div>
<asp:CheckBox ID="chkAdd" runat="server" Text="Add new GPF" /><br />
<br />
<asp:Table ID="rebateTable" runat="server">
<asp:TableRow ID="allToilets" runat="server">
<asp:TableHeaderCell>How many toilets did you upgrade?</asp:TableHeaderCell>
<asp:TableCell>
<asp:DropDownList ID="ddlNumber" runat="server" AutoPostBack="true">
<%--OnSelectedIndexChanged="ddlNumber_SelectedIndexChanged"--%>
<asp:ListItem Text="--Select--" Value=""></asp:ListItem>
<asp:ListItem Text="1" Value="1"></asp:ListItem>
<asp:ListItem Text="2" Value="2"></asp:ListItem>
<asp:ListItem Text="3" Value="3"></asp:ListItem>
</asp:DropDownList>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</div>
<br />
<div class="popupdiv">
<asp:Repeater ID="DynamicRepeater" runat="server">
<%--OnItemDataBound="OnItemDataBound"--%>
<HeaderTemplate>
<table border="1">
<tr>
<th>
Toilet GPF
</th>
<th>
Toilet<br />
Model #
</th>
<th>
Tank Model #
</th>
<th>
Bowl Model#
</th>
<th>
Purchased<br />
From
</th>
<th>
Purchase<br />
Date
</th>
<th>
Plumber/<br />
Installer
</th>
<th>
Installation<br />
Date
</th>
<th>
Date<br />
Upgraded
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:DropDownList ID="ddlToiletGPF" AutoPostBack="true" runat="server">
<%--OnSelectedIndexChanged="OnSelectedIndexChanged"--%>
</asp:DropDownList>
</td>
<td>
<asp:TextBox ID="ToiletModelNumber" Style="width: 100%" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="TankModelNumber" Style="width: 100%" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="BowlmodelNumber" Style="width: 100%" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="PurchasedFrom" Style="width: 100%" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="PurchaseDate" Style="width: 100%" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="Installer" Style="width: 100%" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="InstallationDate" Style="width: 100%" runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="DateUpgraded" Style="width: 100%" runat="server"></asp:TextBox>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<br />
<asp:Label ID="lblSuccess" runat="server" Text=""></asp:Label>
</div>
<asp:Button ID="btnClose" runat="server" Text="Cancel" />
</asp:Panel>
<asp:TableRow>
<asp:TableCell Width="100%" HorizontalAlign="Center" ColumnSpan="6">
Enter search term:
<asp:TextBox ID="txtSearch" runat="server" />
<asp:Button ID="btnSearch" Text="Search" runat="server" OnClick="OnSearch" />
<asp:LinkButton ID="showTips" runat="server" Text="Search Tips" />
<div id="divBackground">
</div>
<asp:HiddenField ID="hfCountry" runat="server" />
</asp:TableCell>
</asp:TableRow>
<asp:HiddenField ID="hfIsExist" runat="server" />
<link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("[id$=txtSearch]").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/CS.aspx/GetCustomers") %>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
if (data.d.length > 0) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
$("[id$=hfIsExist]").val('true');
}
else {
$("[id$=hfIsExist]").val('false');
}
},
error: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("[id$=hfCountry]").val(i.item.val);
$("[id$=hfIsExist]").val('true');
},
minLength: 1
});
});
</script>
Namespaces
C#
using System.Data;
using System.Configuration;
using System.Web.Services;
using System.Data.SqlClient;
VB.Net
Imports System.Data
Imports System.Web.Services
Imports System.Configuration
Imports System.Data.SqlClient
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindRepeater();
}
}
[WebMethod()]
public static string[] GetCustomers(string prefix)
{
List<string> fillAddress = new List<string>();
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select Name, Country from Customers where Name like @SearchText + '%'";
cmd.Parameters.AddWithValue("@SearchText", prefix);
cmd.Connection = conn;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
fillAddress.Add(string.Format("{0}-{1}", sdr["Name"], sdr["Country"]));
}
conn.Close();
}
}
return fillAddress.ToArray();
}
protected void OnSearch(object sender, EventArgs e)
{
if (hfIsExist.Value != "true")
{
installAddress_MPE.Show();
}
else
{
installAddress_MPE.Hide();
}
}
private void BindRepeater()
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3]{
new DataColumn("Toilet Size"),
new DataColumn("Model #"),
new DataColumn("Date Upgraded")
});
DropDownList ddl = DynamicRepeater.FindControl("ddlToiletGPF") as DropDownList;
TextBox txt = DynamicRepeater.FindControl("ModelNumber") as TextBox;
TextBox txt2 = DynamicRepeater.FindControl("DateUpgraded") as TextBox;
dt.Rows.Add(ddl, txt, txt2);
DynamicRepeater.DataSource = dt;
DynamicRepeater.DataBind();
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Me.BindRepeater()
End If
End Sub
<WebMethod()>
Public Shared Function GetCustomers(ByVal prefix As String) As String()
Dim fillAddress As List(Of String) = New List(Of String)()
Using conn As SqlConnection = New SqlConnection()
conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using cmd As SqlCommand = New SqlCommand()
cmd.CommandText = "select Name, Country from Customers where Name like @SearchText + '%'"
cmd.Parameters.AddWithValue("@SearchText", prefix)
cmd.Connection = conn
conn.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
fillAddress.Add(String.Format("{0}-{1}", sdr("Name"), sdr("Country")))
End While
End Using
conn.Close()
End Using
End Using
Return fillAddress.ToArray()
End Function
Protected Sub OnSearch(ByVal sender As Object, ByVal e As EventArgs)
If hfIsExist.Value <> "true" Then
installAddress_MPE.Show()
Else
installAddress_MPE.Hide()
End If
End Sub
Private Sub BindRepeater()
Dim dt As DataTable = New DataTable()
dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Toilet Size"), New DataColumn("Model #"), New DataColumn("Date Upgraded")})
Dim ddl As DropDownList = TryCast(DynamicRepeater.FindControl("ddlToiletGPF"), DropDownList)
Dim txt As TextBox = TryCast(DynamicRepeater.FindControl("ModelNumber"), TextBox)
Dim txt2 As TextBox = TryCast(DynamicRepeater.FindControl("DateUpgraded"), TextBox)
dt.Rows.Add(ddl, txt, txt2)
DynamicRepeater.DataSource = dt
DynamicRepeater.DataBind()
End Sub
