Hi kchetna,
HTML
<%@ Page Title="" Language="C#" MasterPageFile="~/RetailsSystem.Master" AutoEventWireup="true"
CodeBehind="WebForm2.aspx.cs" Inherits="RetailsSystem.Web.WebForm2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("[id$=txtSearch]").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/WebForm2.aspx/GetCustomers") %>',
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) {
$("[id$=hfCustomerId]").val(i.item.val);
},
minLength: 1
});
});
</script>
<style>
.lblval
{
font-family: Arial;
font-size: 12px;
color: navy;
}
.auto-style1
{
font-family: Arial;
font-size: 12px;
color: navy;
width: 20%;
height: 26px;
text-align: left;
}
.auto-style2
{
width: 1%;
height: 26px;
}
.auto-style3
{
width: 29%;
height: 26px;
text-align: left;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<table style="width: 90%; border-style: dotted; border-width: thin;">
<tr>
<td style="text-align: center; height: 50px; text-decoration: underline; font-size: x-large;
color: black;">
<strong>
<asp:Label ID="lblInfoOrProb" runat="server"></asp:Label>
Case Sheet</strong>
</td>
</tr>
</table>
<table>
<tr>
<td style="text-align: left;">
<asp:Button ID="Button3" runat="server" class="btn btn-primary btn-sm" Text="Save As Draft" />
<asp:Button ID="Button4" runat="server" class="btn btn-primary btn-sm" Text="Post Problem/Information" />
<asp:Button ID="Button5" runat="server" class="btn btn-primary btn-sm" Text="Submit/Send to Seek Solution" />
<asp:Button ID="Button7" runat="server" class="btn btn-primary btn-sm" Text="Discard & Send to Coordinator" />
<asp:Button ID="Button8" runat="server" class="btn btn-primary btn-sm" Text="Reply for Solution" />
<asp:Button ID="Button6" runat="server" class="btn btn-primary btn-sm" Text="Cancel" />
</td>
</tr>
</table>
<table style="width: 90%">
<tr>
<td class="auto-style1">
Job Code Enter search term:
<asp:TextBox ID="txtSearch" runat="server" />
<asp:HiddenField ID="hfCustomerId" runat="server" />
<asp:Button ID="Button9" Text="Submit" runat="server" />
<asp:TextBox ID="txtJob" runat="server"></asp:TextBox>
<cc1:AutoCompleteExtender ServiceMethod="SearchCustomers" MinimumPrefixLength="1"
CompletionInterval="100" EnableCaching="false" CompletionSetCount="10" TargetControlID="txtJob"
ID="AutoCompleteExtender1" runat="server" FirstRowSelected="false">
</cc1:AutoCompleteExtender>
<cc1:TextBoxWatermarkExtender ID="tbweJobNo" runat="server" TargetControlID="txtJob"
WatermarkText="Type Job No Here to Populate Record" WatermarkCssClass="watermarked"
Enabled="True" />
<asp:Button ID="btnRef" runat="server" Text="ref" Visible="true" />
<asp:HiddenField ID="hiddJob" runat="server" />
</td>
<td class="auto-style2">
:
</td>
<td class="auto-style3">
<asp:DropDownList ID="ddlJobCode" runat="server">
</asp:DropDownList>
</td>
<td class="auto-style1">
Job Title
</td>
<td class="auto-style2">
:
</td>
<td class="auto-style3">
<asp:TextBox ID="DropDownList1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 20%; text-align: left;" class="lblval">
Site Office Reference
</td>
<td style="width: 1%">
:
</td>
<td style="width: 29%; text-align: left;">
<asp:TextBox ID="DropDownList2" runat="server"></asp:TextBox>
</td>
<td style="width: 20%; text-align: left;" class="lblval">
Delivery Center/Region
</td>
<td style="width: 1%">
:
</td>
<td style="width: 29%; text-align: left;">
<asp:TextBox ID="DropDownList3" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 20%; text-align: left;" class="lblval">
TCE Role On Job
</td>
<td style="width: 1%">
:
</td>
<td style="width: 29%; text-align: left;">
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal"
class="lblval">
<asp:ListItem>Contruction</asp:ListItem>
<asp:ListItem>Design</asp:ListItem>
<asp:ListItem>Both</asp:ListItem>
</asp:RadioButtonList>
</td>
<td style="width: 20%; text-align: left;" class="lblval">
</td>
<td style="width: 1%">
</td>
<td style="width: 29%; text-align: left;">
</td>
</tr>
<tr>
<td style="width: 20%; text-align: left;" class="lblval">
Problem Related to
</td>
<td style="width: 1%">
:
</td>
<td style="width: 29%; text-align: left;">
<asp:RadioButtonList ID="RadioButtonList2" runat="server" RepeatDirection="Horizontal"
class="lblval">
<asp:ListItem>Contruction</asp:ListItem>
<asp:ListItem>Design</asp:ListItem>
<asp:ListItem>Both</asp:ListItem>
</asp:RadioButtonList>
</td>
<td style="width: 20%; text-align: left;" class="lblval">
Problem Type
</td>
<td style="width: 1%">
:
</td>
<td style="width: 29%; text-align: left;">
<asp:DropDownList ID="ddlJobCode0" runat="server">
<asp:ListItem>Civil</asp:ListItem>
<asp:ListItem>Architecture</asp:ListItem>
<asp:ListItem>Mechanical</asp:ListItem>
<asp:ListItem>Electrical</asp:ListItem>
<asp:ListItem>Instrumentation</asp:ListItem>
<asp:ListItem>Water </asp:ListItem>
<asp:ListItem>Waster Water</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td style="width: 20%; text-align: left;" class="lblval">
Problem Description
</td>
<td style="width: 1%">
:
</td>
<td colspan="4" style="text-align: left">
<asp:TextBox ID="txtProblemDesc" runat="server" TextMode="MultiLine" Width="91%"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 20%; text-align: left;" class="lblval">
Solution Type
</td>
<td style="width: 1%">
:
</td>
<td style="width: 29%; text-align: left;">
<asp:RadioButtonList ID="RadioButtonList4" runat="server" RepeatDirection="Horizontal"
class="lblval">
<asp:ListItem>Permanent</asp:ListItem>
<asp:ListItem>Temporary</asp:ListItem>
</asp:RadioButtonList>
</td>
<td style="width: 20%; text-align: left;" class="lblval">
Mark Solution As
</td>
<td style="width: 1%">
:
</td>
<td style="width: 29%; text-align: left;">
<asp:RadioButtonList ID="RadioButtonList544" runat="server" RepeatDirection="Horizontal"
class="lblval">
<asp:ListItem>Alternate</asp:ListItem>
<asp:ListItem>Recommended</asp:ListItem>
<asp:ListItem>Best</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td style="width: 20%; text-align: left;" class="lblval">
Current Problem Status
</td>
<td style="width: 1%">
:
</td>
<td style="width: 29%; text-align: left;">
<asp:RadioButtonList ID="RadioButtonList545" runat="server" RepeatDirection="Horizontal"
class="lblval">
<asp:ListItem>Un-Resolved</asp:ListItem>
<asp:ListItem>Resolved</asp:ListItem>
</asp:RadioButtonList>
</td>
<td style="width: 20%; text-align: left;" class="lblval">
Make it public available
</td>
<td style="width: 1%">
</td>
<td style="width: 29%; text-align: left;">
<asp:RadioButtonList ID="RadioButtonList546" runat="server" RepeatDirection="Horizontal"
class="lblval">
<asp:ListItem>Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td style="width: 20%; text-align: left;" class="lblval">
Problem Supporting Documents
</td>
<td style="width: 1%">
:
</td>
<td style="width: 29%; text-align: left;">
<asp:FileUpload ID="FileUpload1" runat="server" />
</td>
<td style="width: 20%; text-align: left;">
<asp:Button ID="Button1" runat="server" Text="Upload" class="btn btn-primary btn-sm" />
</td>
<td style="width: 1%">
</td>
<td style="width: 29%; text-align: left;">
</td>
</tr>
<tr>
<td style="width: 20%; text-align: left;" class="lblval">
Problems Document(if any)
</td>
<td style="width: 1%">
:
</td>
<td colspan="4">
<table style="width: 80%">
<tr>
<td colspan="2" style="text-align: center">
Document Name
</td>
</tr>
<tr>
<td>
<a>Problem1 document</a>
</td>
<td>
<asp:LinkButton ID="lnkDeleteProDoc" runat="server">Delete</asp:LinkButton>
</td>
</tr>
<tr>
<td>
<a>Problem2 document</a>
</td>
<td>
<asp:LinkButton ID="LinkButton1" runat="server">Delete</asp:LinkButton>
</td>
</tr>
<tr>
<td>
<a>Problem3 document</a>
</td>
<td>
<asp:LinkButton ID="LinkButton2" runat="server">Delete</asp:LinkButton>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 90%">
<tr>
<td>
<asp:GridView ID="gvSolution" runat="server" Width="90%" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table id="tblSolution" style="border-radius: 25px; border-width: .25px; border-style: dotted;
border-width: thin; width: 90%">
<tr>
<td style="width: 20%" class="lblval">
Solution Description
</td>
<td style="width: 1%">
:
</td>
<td colspan="4">
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Width="91%"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 20%" class="lblval">
Solution Supporting Documents
</td>
<td style="width: 1%">
:
</td>
<td style="width: 29%">
<asp:FileUpload ID="FileUpload2" runat="server" />
</td>
<td style="width: 20%;">
<asp:Button ID="Button2" runat="server" Text="Upload" class="btn btn-primary btn-sm" />
</td>
<td style="width: 1%">
</td>
<td style="width: 29%">
</td>
</tr>
<tr>
<td style="width: 20%" class="lblval">
Solution Document(if any)
</td>
<td style="width: 1%">
:
</td>
<td colspan="4">
<table style="width: 80%" border="1">
<tr>
<td style="text-align: center">
Document Name
</td>
<td>
</td>
</tr>
<tr>
<td>
<a>Solution 1 document</a>
</td>
<td>
<asp:LinkButton ID="LinkButton3" runat="server">Delete</asp:LinkButton>
</td>
</tr>
<tr>
<td>
<a>Solution 2 document</a>
</td>
<td>
<asp:LinkButton ID="LinkButton4" runat="server">Delete</asp:LinkButton>
</td>
</tr>
<tr>
<td>
<a>Solution 3 document</a>
</td>
<td>
<asp:LinkButton ID="LinkButton5" runat="server">Delete</asp:LinkButton>
</td>
</tr>
</table>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
<table style="width: 90%">
<tr>
<td colspan="6" style="text-align: center">
<%--<asp:Button ID="btnAddMoreSolution" runat="server" class="btn btn-primary btn-sm" Text="Click here to Add Solution" OnClick="btnAddMoreSolution_Click" />--%>
</td>
</tr>
</table>
<table style="width: 90%">
<tr>
<td style="width: 20%" class="lblval">
Problem Posted By
</td>
<td style="width: 1%">
:
</td>
<td style="width: 29%">
Chetna Khandelwal
</td>
<td style="width: 20%" class="lblval">
Problem Posted On
</td>
<td style="width: 1%">
:
</td>
<td style="width: 29%">
20-Apr-16
</td>
</tr>
</table>
</div>
</asp:Content>
C#
[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> SearchCustomers(string prefixText, int count)
{
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager
.ConnectionStrings["Constring"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select Name from Customers where " +
"Name like @SearchText + '%'";
cmd.Parameters.AddWithValue("@SearchText", prefixText);
cmd.Connection = conn;
conn.Open();
List<string> customers = new List<string>();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(sdr["Name"].ToString());
}
}
conn.Close();
return customers;
}
}
}
[WebMethod]
public static string[] GetCustomers(string prefix)
{
List<string> customers = new List<string>();
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager.ConnectionStrings["Constring"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select Name, CustomerId from Customers where Name like @SearchText + '%'";
cmd.Parameters.AddWithValue("@SearchText", prefix);
cmd.Connection = conn;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(string.Format("{0}-{1}", sdr["Name"], sdr["CustomerId"]));
}
}
conn.Close();
}
}
return customers.ToArray();
}
Screenshot
I hope works for you.
