I have this issue when I put my buttons inside an Update Panel, the button click event does not respond inside Update Panel.
HTML
<div class="col-sm-7" style="width: 100%; margin: 0 auto;">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="container" runat="server" style="width: 100%; margin: 0 auto; padding: 10px;">
<asp:Label ID="Label16" runat="server" Font-Size="10pt">Orientation</asp:Label>
<div class="input-group" style="margin: 0 auto; padding: 6px;">
<asp:DropDownList runat="server" ID="DropDownList2" CssClass="form-control" Font-Size="10pt" AutoPostBack="true" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged">
<asp:ListItem>Select</asp:ListItem>
<asp:ListItem Text="Portrait" Value="1"></asp:ListItem>
<asp:ListItem Text="Landscape" Value="2"></asp:ListItem>
</asp:DropDownList>
</div>
<asp:Label ID="orientation" runat="server" Visible="false" Text=""></asp:Label>
<asp:Label ID="ICard" runat="server" Text="" Visible="false"></asp:Label>
<!--New Card Design--->
<div class="container1">
<div class="padding">
<!--PORTRAIT STARTS-->
<div class="row" runat="server" id="ModeOne" style="width: 100%; margin-bottom: 0%;">
<div class="col-sm-6" runat="server" style="width: 100%; margin: 0 auto; padding: 10px;">
<asp:Panel Class="print-contents" ID="Panel1" runat="server">
<div class="font" runat="server" id="font">
<div class="topport">
<div class="CompanyName">
<asp:Image runat="server" ID="Image7" CssClass="logo" AlternateText="logo" Height="28" Width="30" />
<asp:Label ID="lblName" runat="server" Text=""></asp:Label>
</div>
<div class="type">
<asp:Label ID="typelbl" runat="server" Text="ID"></asp:Label>
</div>
<asp:Image AlternateText="Passport Photo" ID="img" ImageUrl="images/passport.PNG" runat="server" CssClass="img" />
</div>
<div class="bottom">
<p><b><asp:Label runat="server" Text="Card holder's Name"></asp:Label></b></p>
<p class="design"><asp:Label runat="server" Text="Card holder's position"></asp:Label></p>
<p class="badgeID"><asp:Label runat="server" Text="Card holder's ID number"></asp:Label></p>
<br />
<div class="holdersign">
<p>holder's signature</p>
<asp:Image ID="Imagesign" AlternateText="sign" runat="server" />
</div>
<div class="barcode">
<asp:Image AlternateText="code" ID="Image1" runat="server" />
</div>
</div>
</div>
</asp:Panel>
<asp:HiddenField ID="ImageDatahf" runat="server" />
</div>
<div class="col-sm-6" runat="server" style="width: 100%; margin: 0 auto; padding: 10px;">
<asp:Panel Class="print-contents" ID="Panel4" runat="server">
<div class="backTest">
<div class="details-info">
<p>This is an official document and relates only to the person whose name, signature and photograph appear on the reverse.</p>
<p> Impersonation of the authorized holder, alteration or destruction are penal offences.</p>
<p>If lost, must be reported immediately and if found, please send to the nearest police station.</p>
<p>OR</p>
<p><b><asp:Label runat="server" ID="company" Text=""></asp:Label></b></p>
<p><asp:Label runat="server" ID="addrss" Text="Company Address"></asp:Label></p>
<p><asp:Image ID="Image5" AlternateText="sign" runat="server" /></p>
<p class="authorized">Authorized signature</p>
</div>
</div>
</asp:Panel>
<asp:HiddenField ID="hfbackCard" runat="server" />
</div>
</div>
<!--PORTRAIT ENDS-->
<!--Landscape Starts-->
<div class="LandscapeMode" runat="server" id="Mode2" visible="false" style="width: 100%; margin-bottom: 0%; margin: 0 auto; margin-left: 10%;">
<asp:Panel Class="print-contents" ID="Panel2" runat="server">
<div class="secondFont" runat="server" id="secondFont">
<div class="topland">
<div class="NameHead">
<asp:Image ID="Image2" CssClass="logo" AlternateText="logo" runat="server" Height="28" Width="30" />
<asp:Label ID="namelb" runat="server" Text=""></asp:Label>
</div>
<div class="typeLand">
<asp:Label ID="lbltype" runat="server" Text="ID"></asp:Label>
</div>
</div>
<div class="btmLand">
<asp:Image AlternateText="Photo" ID="landphoto" ImageUrl="images/passport.PNG" runat="server" CssClass="img" />
<div class="snippet" style="line-height: normal;">
<p>
<b>
<asp:Label runat="server" ID="Label9" Text="Card holder's name"></asp:Label></b>
</p>
<p class="design">
<asp:Label runat="server" ID="Label10" Text="Card holder's position"></asp:Label>
</p>
<p class="badgeID">
<asp:Label runat="server" ID="labelsample" Text="Card holder's ID number"></asp:Label>
</p>
</div>
<div class="holdersigned">
<asp:Image ID="Image6" runat="server" AlternateText="sign" />
<br />
<p>Holder's signature</p>
</div>
<div class="codeimg">
<asp:Image ID="Image4" runat="server" AlternateText="code" />
</div>
</div>
</div>
</asp:Panel>
<asp:HiddenField ID="HiddenField1" runat="server" />
<br />
<asp:Panel Class="print-contents" ID="Panel3" runat="server">
<div class="Landscapeback">
<div class="LandInfo">
<p>This is an official document and relates only to the person whose name, signature and photograph appear on the reverse. Impersonation of the authorized holder, alteration or destruction are penal offences.</p>
<p>If lost, must be reported immediately and if found, please send to the nearest police station OR</p>
<p><b>
<asp:Label runat="server" ID="sample" Text=""></asp:Label></b></p>
<p>
<asp:Label runat="server" ID="Label14" Text="Company Address"></asp:Label></p>
<p>
<asp:Image ID="Image3" runat="server" AlternateText="sign" /></p>
<p class="authorized">Authorized signature</p>
</div>
</div>
</asp:Panel>
<asp:HiddenField ID="HiddenField2" runat="server" />
</div>
<!--Landscape Ends-->
</div>
</div>
<!--New Card Design--->
</div>
<div class="" style="width: 100%; margin: 0 auto; margin-top: 1%; border-radius: 4px; left: 0; z-index: 999; padding: 10px; border-radius: 4px; border: 0.2px solid #f0f1f2; background-color: #fff; position: relative;">
<div style="margin-top: 1%;">
<label style="font-weight: 500; font-size: 10pt; color: #93979e;">Edit ID Card</label>
<hr />
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label runat="server" id="Label19" style="color: #999;">Font Color</label>
<div class="input-group">
<asp:TextBox ID="TextBox2" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
<div runat="server" id="Extender">
<cc1:ColorPickerExtender ID="ColorPickerExtender1" runat="server" TargetControlID="TextBox2"
PopupButtonID="BtnColorOne" PopupPosition="TopRight" OnClientColorSelectionChanged="LabelColor" />
<div class="input-group-append form-control">
<span class="input-group-text" id="BtnColorOne" runat="server" style="height: auto; background-color: transparent; color: #404344;">
<span id="toggle_pick" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; color: #145c7c; font-size: 10pt; border: none;"></span>
</span>
</div>
</div>
<div runat="server" id="Extender1" visible="false">
<cc1:ColorPickerExtender ID="ColorPickerExtender2" runat="server" TargetControlID="TextBox2"
PopupButtonID="ColorBtnTwo" PopupPosition="TopRight" OnClientColorSelectionChanged="ColorLabel" />
<div class="input-group-append form-control">
<span class="input-group-text" id="ColorBtnTwo" runat="server" style="height: auto; background-color: transparent; color: #404344;">
<span id="toggle_pick1" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; color: #11a4d9; height: 100%; font-size: 10pt; border: none;"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<asp:Label ID="Label5" runat="server" Style="color: #999;">Card Type</asp:Label>
<div class="input-group">
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem>Select</asp:ListItem>
<asp:ListItem Value="STAFF">STAFF</asp:ListItem>
<asp:ListItem Value="STUDENT">STUDENT</asp:ListItem>
</asp:DropDownList>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<asp:Label ID="Label4" runat="server" Style="color: #999;">Company Address</asp:Label>
<div class="input-group">
<asp:TextBox ID="OrgAddress" runat="server" AutoCompleteType="None" CssClass="form-control" placeholder="e.g 10 Mayne Avenue, Maitama, Abuja" AutoPostBack="true" OnTextChanged="OrgAddress_TextChanged" onkeypress="GetValue(this.address)" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<asp:Label ID="Label11" runat="server" Style="color: #999;">Authorized Signature</asp:Label>
<div class="input-group">
<asp:FileUpload ID="FileUpload2" runat="server" Font-Size="9pt" />
</div>
</div>
</div>
</div>
</div>
<div class="btnfront" runat="server" id="BtnPort" style="margin: 0 auto; width: 100%; margin-top: 2%;">
<asp:Button ID="BtnPortrait" runat="server" CssClass="btn navbar-btn" Text="Proceed1" OnClick="BtnPortrait_Click" />
</div>
<div class="btnfront" runat="server" id="Btnlndscape" visible="false" style="margin: 0 auto; width: 100%; margin-top: 2%;">
<asp:Button ID="BtnLandscape" runat="server" CssClass="btn navbar-btn" Text="Proceed2" OnClick="LandscapeBtn_Click" />
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
<asp:AsyncPostBackTrigger ControlID="DropDownList2" EventName="SelectedIndexChanged" />
<asp:AsyncPostBackTrigger ControlID="BtnPortrait" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="BtnLandscape" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<br />
<br />
</div>
protected void BtnPortrait_Click(object sender, EventArgs e)
{
try
{
if (!string.IsNullOrEmpty(user.Text) & !string.IsNullOrEmpty(DropDownList1.SelectedValue) & !string.IsNullOrEmpty(FileUpload2.PostedFile.FileName) & !string.IsNullOrEmpty(TextBox2.Text) & !string.IsNullOrEmpty(DropDownList2.SelectedItem.Text) & !string.IsNullOrEmpty(OrgAddress.Text) & !string.IsNullOrEmpty(ICard.Text))
{
byte[] image = Convert.FromBase64String(font.Style.Value.Replace("height: 375px;width: 250px;background-image:url('data:image/png;base64,", "").Split('\'')[0]);
byte[] Signature = Convert.FromBase64String(Image5.ImageUrl.Replace("data:image/jpeg;base64,", ""));
using (SqlConnection con = new SqlConnection())
{
con.ConnectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
string query = "INSERT INTO SaveCard(CardType, fontColor, Data, Authority, OrganizationAddress, Orientation)" + "VALUES(@CardType, @fontColor, @Data, @Authority, @OrganizationAddress, @Orientation); SELECT @@IDENTITY";
using (SqlCommand cmd = new SqlCommand(query, con))
{
cmd.Parameters.AddWithValue("@CardType", DropDownList1.SelectedValue);
cmd.Parameters.AddWithValue("@fontColor", TextBox2.Text.Trim());
cmd.Parameters.AddWithValue("@Data", image);
cmd.Parameters.AddWithValue("@Authority", Signature);
cmd.Parameters.AddWithValue("@OrganizationAddress", OrgAddress.Text.Trim());
cmd.Parameters.AddWithValue("@Orientation", DropDownList2.SelectedValue);
con.Open();
int id = Convert.ToInt32(cmd.ExecuteScalar());
Session["IDCard"] = id;
con.Close();
Response.Redirect("/displayID");
}
}
}
else
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "Message", "alert('Design Saved!');", true);
}
}
catch (SqlException ex)
{
string msg = "Error:";
msg += ex.Message;
throw new Exception(msg);
}
}