Hi rakeshkuma,
Check this example. Now please take its reference and correct your code.
Make sure you have assigned click event for buttons.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
HTML
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" type='text/css' />
<link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' type='text/css' />
<link rel="stylesheet" href='assets/lpo/custom.css' type='text/css' />
<link rel="stylesheet" href='assets/css/dropdown.css' type='text/css' />
<link rel="stylesheet" href='assets/css/ajax_calender.css' type='text/css' />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/picker/script.js"></script>
<script type="text/javascript" src="assets/lpo/custom.js"></script>
<script type="text/javascript" src="assets/bootstrap3-typeahead.min.js"></script>
<link rel="stylesheet" href='assets/css/ajax_calender.css' type='text/css' />
<link rel="stylesheet" href='assets/css/ajax_tab.css' type='text/css' />
<style type="text/css">
span.help-block {
float: left;
width: 100%;
}
.viscol {
display: none;
}
input.error {
border: 1px solid red;
}
.error {
font-size: 11px;
color: #ff3636;
font-family: 'Libre Franklin', sans-serif;
letter-spacing: 1px;
}
.error::before {
content: "*";
}
img.PopupImg {
vertical-align: middle;
padding: 0px;
margin: 0px;
border: none;
}
.it input.form-control {
border: none;
margin-bottom: 0px;
border-radius: 0px;
border-bottom: 1px solid #ddd;
box-shadow: none;
}
.it .form-control:focus {
border-color: #ff4d0d;
box-shadow: none;
outline: none;
}
.fileUpload {
position: relative;
overflow: hidden;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.upl {
top: -10px;
}
.ContainCss {
margin-top: 4px;
}
.cltxtddta .ajax__calendar_container {
background-color: white;
border: solid 1px #77D5F7;
}
.Headercss {
width: 99%;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 0px;
margin: 4px;
text-align: right;
border-bottom: 1px solid #949494;
margin-left: 10px;
cursor: pointer;
background-color: #eee;
}
.headerCssClass {
background-color: #dddddd;
color: #949494;
border: 1px solid #949494;
padding-top: 4px;
padding-left: 4px;
padding-right: 14px;
padding-bottom: 4px;
cursor: pointer;
font-size: 12px;
letter-spacing: 1px;
margin-bottom: 10px;
margin-top: 10px;
/*font-weight:bold;
background-image: url(plus.png);*/
background-image: url(http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_plus.png);
background-repeat: no-repeat;
background-position: right;
}
.contentCssClass {
background-color: #ffffff;
color: black;
border: 1px solid #949494;
padding: 4px;
font-size: 12px;
}
.headerSelectedCss {
background-color: #e17e26;
color: white;
border: 1px solid #949494;
padding-top: 4px;
padding-left: 4px;
padding-right: 14px;
padding-bottom: 4px;
cursor: pointer;
/*font-weight:bold;*/
font-size: 12px;
letter-spacing: 1px;
/*background-image: url(minus.png);*/
background-image: url(http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_minus.png);
background-repeat: no-repeat;
background-position: right;
}
.AutoExtender {
border: solid 1px #444444;
margin: 0px;
padding: 2px;
height: 100px;
overflow: auto;
background-color: #FFFFFF;
}
.AutoExtenderList {
color: #1C1C1C;
}
.AutoExtenderHighlight {
background-color: #ffc0c0;
}
</style>
<script type="text/javascript"> </script>
<section class="container-fluid title-overlay" style="background-color: #949494;">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h3 style="margin-top: 7px; margin-bottom: 7px;">Create Purchase Order
<br />
<a href="javascript:history.go(-1)" class="" style="font-size: 9px; letter-spacing: 1px; vertical-align: middle; color: #ffffff"><i class="fa fa-chevron-left"></i>BACK</a>
</h3>
</div>
</div>
</div>
</section>
<form id="form1" runat="server" enctype="multipart/form-data" method="post">
<section class="container-fluid block location-block">
<div class="container">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<div class="row">
<div class="card card-body">
<div class="row">
<div class="col-sm-12" style="margin-top: 10px;">
<asp:UpdatePanel ID="upnlAccordionPane2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<ajax:Accordion ID="Accordion1" runat="server" HeaderCssClass="headerCssClass" ContentCssClass="contentCssClass" RequireOpenedPane="false" HeaderSelectedCssClass="headerSelectedCss" FadeTransitions="true" TransitionDuration="500" AutoSize="None">
<Panes>
<%-- AccordionPane1 --%>
<ajax:AccordionPane ID="AccordionPane1" runat="server">
<Header> <i class="fa fa-bars"></i> ORDER DETAILS</Header>
<Content>
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label class="lblstyle" style="padding-left: 0px;">Order No <span style="color: #ff3636; font-size: 14px">*</span></label>
<asp:TextBox runat="server" autofocus="true" ID="txtorno" Style="" MaxLength="6" ReadOnly="true" CssClass="form-control" Text="10249" />
<asp:RequiredFieldValidator runat="server" ID="rf_txtorno" SetFocusOnError="true" Display="Dynamic" ControlToValidate="txtorno" ValidationGroup="AccordionPane1" ForeColor="#ff3636" Font-Size="11px" Style="letter-spacing: 1px"><i class="fa fa-exclamation-triangle"></i> Required!</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regComments" runat="server" ControlToValidate="txtorno" ValidationExpression="^[\s\S]{0,6}$" ForeColor="#ff3636" Display="Dynamic" Font-Size="11px" Style="letter-spacing: 1px" Text="8 chrs max"> <i class="fa fa-exclamation-triangle"></i> Maximum 6 number are allowed. </asp:RegularExpressionValidator>
<ajax:FilteredTextBoxExtender ID="fxtxtorno" runat="server" FilterType="Numbers" TargetControlID="txtorno" />
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="lblstyle" style="padding-left: 0px;">Creation Date <span style="color: #ff3636; font-size: 14px">*</span> </label>
<asp:TextBox runat="server" ID="txtt_odat" CssClass="form-control" onkeydown="return false;" Style="background-color: white" AutoCompleteType="None" autocomplete="none" />
<asp:RequiredFieldValidator runat="server" ID="rf_txtt_odat" Display="Dynamic" SetFocusOnError="true" ControlToValidate="txtt_odat" ValidationGroup="AccordionPane1" ForeColor="#ff3636" Font-Size="11px" Style="letter-spacing: 1px"><i class="fa fa-exclamation-triangle"></i> Required!</asp:RequiredFieldValidator>
<ajax:CalendarExtender ID="cltxtt_odat" runat="server" Enabled="True" Format="dd-MM-yyyy" TargetControlID="txtt_odat" CssClass="cltxtddta"></ajax:CalendarExtender>
</div>
</div>
<div class="col-sm-12">
<hr style="margin-top: 5px" />
</div>
<div class="col-sm-12">
<div class="form-group">
<asp:Button ID="Button1" runat="server" CssClass="btn btn-primary btn-xs" Text="SAVE / NEXT" OnClick="btn_button1" ValidationGroup="AccordionPane1" />
</div>
</div>
</div>
</Content>
</ajax:AccordionPane>
<%-- AccordionPane2 --%>
<ajax:AccordionPane ID="AccordionPane2" runat="server" Visible="false">
<Header> <i class="fa fa-bars"></i> SUPPLIER DETAILS</Header>
<Content>
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label class="lblstyle">Supplier Code <span style="color: #ff3636; font-size: 12px">*</span> </label>
<asp:TextBox ID="txtsuno" runat="server" MaxLength="6" AutoPostBack="True" OnTextChanged="get_details" AutoCompleteType="None" autocomplete="none" CssClass="form-control"></asp:TextBox>
<ajax:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" FirstRowSelected="true" TargetControlID="txtsuno" CompletionListCssClass="AutoExtender" CompletionListItemCssClass="AutoExtenderList" CompletionListHighlightedItemCssClass="AutoExtenderHighlight" MinimumPrefixLength="1" EnableCaching="false" CompletionSetCount="1" CompletionInterval="100" ServiceMethod="GetOrderNo">
</ajax:AutoCompleteExtender>
<asp:RequiredFieldValidator runat="server" ID="rf_txtsuno" SetFocusOnError="true" Display="Dynamic" ControlToValidate="txtsuno" ValidationGroup="AccordionPane2" ForeColor="#ff3636" Font-Size="11px" Style="letter-spacing: 1px"><i class="fa fa-exclamation-triangle"></i> Required!</asp:RequiredFieldValidator>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="lblstyle">Supplier Name </label>
<asp:TextBox runat="server" ID="txtnama" ReadOnly="true" CssClass="form-control" />
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<label class="lblstyle">Contact Person </label>
<asp:TextBox runat="server" ID="txtcperson" ReadOnly="true" CssClass="form-control" />
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="lblstyle">Landline No </label>
<asp:TextBox runat="server" ID="txtphone" ReadOnly="true" CssClass="form-control" />
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<label class="lblstyle">Ext </label>
<asp:TextBox runat="server" ID="txtext" ReadOnly="true" CssClass="form-control" />
</div>
</div>
</div>
<div class="col-sm-12">
<hr style="margin-top: 5px" />
</div>
<div class="col-sm-12">
<div class="form-group">
<asp:Button ID="Button2" runat="server" Text="SAVE / NEXT" ValidationGroup="AccordionPane2" CssClass="btn btn-primary btn-xs" Style="letter-spacing: 1px" OnClick="Button2_Click" />
</div>
</div>
</Content>
</ajax:AccordionPane>
<%-- AccordionPane3 --%>
<ajax:AccordionPane ID="AccordionPane3" runat="server" Visible="false">
<Header> <i class="fa fa-bars"></i> OTHER DETAILS </Header>
<Content>
<div class="row">
<div class="col-sm-1">
<div class="form-group">
<label class="lblstyle">Currency </label>
<asp:DropDownList ID="ddcur" runat="server" CssClass="custom-select mb-3">
<asp:ListItem Value="AED" Selected="True">AED</asp:ListItem>
<asp:ListItem Value="USD"> USD </asp:ListItem>
<asp:ListItem Value="INR"> INR </asp:ListItem>
</asp:DropDownList>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<label class="lblstyle">VAT </label>
<asp:DropDownList ID="ddt_cvato" runat="server" CssClass="custom-select mb-3">
<asp:ListItem Value="0">0%</asp:ListItem>
<asp:ListItem Value="5" Selected="True"> 5% </asp:ListItem>
</asp:DropDownList>
</div>
</div>
</div>
<div class="col-sm-12">
<hr style="margin-top: 5px" />
</div>
<div class="col-sm-12">
<div class="form-group">
<asp:Button ID="Button3" runat="server" Text="SAVE / NEXT" OnClick="Button3_Click" ValidationGroup="AccordionPane3" CssClass="btn btn-primary btn-xs" Style="letter-spacing: 1px" />
</div>
</div>
</Content>
</ajax:AccordionPane>
</Panes>
</ajax:Accordion>
<asp:Panel runat="server" ID="pnlfinalsubmit" Visible="false">
<div class="col-sm-12" style="margin-top: 15px">
<div class="form-group">
<asp:Button ID="Button5" runat="server" Text="SUBMIT" ValidationGroup="" CssClass="btn btn-primary btn-xs" Style="letter-spacing: 1px" />
<asp:Button ID="Button6" runat="server" Text="CANCEL" CssClass="btn btn-primary btn-xs" Style="letter-spacing: 1px" />
</div>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
</div>
</section>
</form>
</asp:Content>
Code
C#
public SqlConnection con;
public SqlCommand com;
private string constr;
private void connection()
{
constr = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
con = new SqlConnection(constr);
con.Open();
}
private void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
AutoOrderNo();
cltxtt_odat.SelectedDate = DateTime.Today;
cltxtt_odat.StartDate = DateTime.Today;
}
}
private void AutoOrderNo()
{
SqlDataReader tbldtreader;
connection();
try
{
string sql = "SELECT MAX(OrderID) as orno FROM Orders";
SqlCommand comm = new SqlCommand(sql, con);
tbldtreader = comm.ExecuteReader();
if (tbldtreader.HasRows)
{
if (tbldtreader.Read())
{
txtorno.Text = Convert.ToString(Convert.ToInt32(tbldtreader["orno"]) + 1);
}
}
tbldtreader.Close();
}
catch (Exception ex)
{
}
con.Close();
}
protected void btn_button1(object sender, EventArgs e)
{
AccordionPane2.Visible = true;
Accordion1.SelectedIndex = 1;
txtsuno.Focus();
}
protected void Button2_Click(object sender, EventArgs e)
{
AccordionPane3.Visible = true;
Accordion1.SelectedIndex = 2;
}
protected void Button3_Click(object sender, EventArgs e)
{
Accordion1.SelectedIndex = 3;
}
[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> GetOrderNo(string prefixText)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conString"].ToString());
con.Open();
SqlCommand cmd = new SqlCommand("SELECT TOP 5 OrderID FROM Orders WHERE OrderID LIKE @SearchText + '%'", con);
cmd.Parameters.AddWithValue("@SearchText", prefixText);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
List<string> getorderdel = new List<string>();
for (int i = 0; i <= dt.Rows.Count - 1; i++)
getorderdel.Add(dt.Rows[i][0].ToString());
return getorderdel;
}
protected void get_details(object sender, EventArgs e)
{
GetOrdderDet(txtsuno.Text);
txtsuno.Focus();
}
private void GetOrdderDet(string orno)
{
connection();
SqlCommand com = new SqlCommand("SELECT * FROM Orders WHERE OrderID = @query", con);
com.Parameters.AddWithValue("@query", orno);
SqlDataAdapter da = new SqlDataAdapter(com);
var ds = new DataSet();
da.Fill(ds);
var dt = ds.Tables[0];
con.Close();
if (dt.Rows.Count == 0)
{
txtnama.Text = "";
txtcperson.Text = "";
txtphone.Text = "";
}
else
{
txtnama.Text = dt.Rows[0]["CustomerID"].ToString().Trim();
txtcperson.Text = dt.Rows[0]["ShipName"].ToString().Trim();
txtphone.Text = dt.Rows[0]["ShipPostalCode"].ToString().Trim();
txtsuno.Focus();
}
}
VB.Net
Public con As SqlConnection
Public com As SqlCommand
Private constr As String
Private Sub connection()
constr = ConfigurationManager.ConnectionStrings("conString").ConnectionString
con = New SqlConnection(constr)
con.Open()
End Sub
Private Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
AutoOrderNo()
cltxtt_odat.SelectedDate = DateTime.Today
cltxtt_odat.StartDate = DateTime.Today
End If
End Sub
Private Sub AutoOrderNo()
Dim tbldtreader As SqlDataReader
connection()
Try
Dim sql As String = "SELECT MAX(OrderID) as orno FROM Orders"
Dim comm As SqlCommand = New SqlCommand(sql, con)
tbldtreader = comm.ExecuteReader()
If tbldtreader.HasRows Then
If tbldtreader.Read() Then
txtorno.Text = Convert.ToString(Convert.ToInt32(tbldtreader("orno")) + 1)
End If
End If
tbldtreader.Close()
Catch ex As Exception
End Try
con.Close()
End Sub
Protected Sub btn_button1(ByVal sender As Object, ByVal e As EventArgs)
AccordionPane2.Visible = True
Accordion1.SelectedIndex = 1
txtsuno.Focus()
End Sub
Protected Sub Button2_Click(ByVal sender As Object, ByVal e As EventArgs)
AccordionPane3.Visible = True
Accordion1.SelectedIndex = 2
End Sub
Protected Sub Button3_Click(ByVal sender As Object, ByVal e As EventArgs)
Accordion1.SelectedIndex = 3
End Sub
<System.Web.Script.Services.ScriptMethod()>
<System.Web.Services.WebMethod>
Public Shared Function GetOrderNo(ByVal prefixText As String) As List(Of String)
Dim con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("conString").ToString())
con.Open()
Dim cmd As SqlCommand = New SqlCommand("SELECT TOP 5 OrderID FROM Orders WHERE OrderID LIKE @SearchText + '%'", con)
cmd.Parameters.AddWithValue("@SearchText", prefixText)
Dim da As SqlDataAdapter = New SqlDataAdapter(cmd)
Dim dt As DataTable = New DataTable()
da.Fill(dt)
Dim getorderdel As List(Of String) = New List(Of String)()
For i As Integer = 0 To dt.Rows.Count - 1
getorderdel.Add(dt.Rows(i)(0).ToString())
Next
Return getorderdel
End Function
Protected Sub get_details(ByVal sender As Object, ByVal e As EventArgs)
GetOrdderDet(txtsuno.Text)
txtsuno.Focus()
End Sub
Private Sub GetOrdderDet(ByVal orno As String)
connection()
Dim com As SqlCommand = New SqlCommand("SELECT * FROM Orders WHERE OrderID = @query", con)
com.Parameters.AddWithValue("@query", orno)
Dim da As SqlDataAdapter = New SqlDataAdapter(com)
Dim ds = New DataSet()
da.Fill(ds)
Dim dt = ds.Tables(0)
con.Close()
If dt.Rows.Count = 0 Then
txtnama.Text = ""
txtcperson.Text = ""
txtphone.Text = ""
Else
txtnama.Text = dt.Rows(0)("CustomerID").ToString().Trim()
txtcperson.Text = dt.Rows(0)("ShipName").ToString().Trim()
txtphone.Text = dt.Rows(0)("ShipPostalCode").ToString().Trim()
txtsuno.Focus()
End If
End Sub
Screenshot
