We Keep Coding

Update Panel removes the CssClass after postback?

Well, This seems weird because I have been using update panel since then, then guess what, it removes the all the CssClass of the objects inside it after the postback.
I used the update panel to add items on my ListBox and the listbox returns to its original form. I meant in the return to the original form that it is like a listbox without the CSS.
But when I check the element on the web browser, the class of the object still there but it does not really reflect on the UI.
so this is my code:
<asp:UpdatePanel runat="server">
<ContentTemplate>
<!--RECEIVER INFORMATION-->
<div class="pd-20">
<h4 class="text-green h4">Receiver Details</h4>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Vendor Name</label>
<asp:DropDownList runat="server" ClientIDMode="Static"
CssClass="custom-select2 form-control" ID="cmbVendor">
</asp:DropDownList>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<label>Currency</label>
<div class="input-group custom">
<asp:TextBox runat="server" ID="txtCurrency" Placeholder="Currency"
CssClass="form-control form-control-lg text-uppercase"></asp:TextBox>
<div class="input-group-append custom">
<span class="input-group-text"><i class="icon-copy fi-dollar"></i></span>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<label>Amount</label>
<div class="input-group custom">
<asp:TextBox runat="server" ID="txtAmount" Placeholder="Amount" TextMode="Number" AutoPostBack="true"
CssClass="form-control form-control-lg" OnTextChanged="txtAmount_TextChanged"></asp:TextBox>
<div class="input-group-append custom">
<span class="input-group-text"><i class="icon-copy fi-dollar-bill"></i></span>
</div>
</div>
</div>
</div>
</div>
<!--RECEIVER INFORMATION-->
<!--APPROVER DETAILS-->
<div class="pd-20">
<h4 class="text-green h4">Approver Details</h4>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Approvers</label>
<asp:ListBox runat="server" ID="lbApprovers" SelectionMode="Multiple" ClientIDMode="Static"
CssClass="custom-select2 form-control text-uppercase" multiple="multiple"></asp:ListBox>
</div>
</div>
</div>
</div>
<!--APPROVER DETAILS-->
</ContentTemplate>
</asp:UpdatePanel>
I can't really explain what was happening so I'm going to attach the photo of the problem after postback.
Here is the before postback
And here is the after postback
Can someone tell me what I am doing wrong and What should I do to make this right?

The ListBox using Custom-select2 components which initialize by js on page load. When postback using UpdatePanel, all contents inside UpdatePanel will be replaced but page load event will not trigger again as this is ajax call. Thus, the custom-select2 initialize script does not trigger.
For page with UpdatePanel, you can call initialize script in pageLoad method, which will be triggered on each postback by UpdatePanel.
<script>
function pageLoad(sender, args) {
console.log("page load event occur");
}
</script>

Accordion Closes after saving data to database asp.net c#

Accordion Closes after saving data to database by using update panel also.
Inserting data accordion collapse when button clicks.
How to prevent from closing after clicking button and show alert message.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="collapse1" class="collapse">
<div class="accordion" id="1A">
<div id="collapse1A1" class="collapse">
<div class="accordion-inner">
<div class="container mb-2">
<div class="card card-body p-0 ">
<div class="container">
<div class="row">
<asp:TextBox ID="txtcount1A1" onkeypress="return CheckNumericValue(event)" class="form-control form-control-lg" runat="server" onkeyup="mark()"></asp:TextBox>
<div class="form-row d-flex justify-content-center mt-2 mb-2">
<asp:Button ID="btn1A1" class="btn btn-primary" runat="server" Text="Save 1A1" OnClick="button_1A1" CausesValidation="true" ValidationGroup="1A1" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>

Bootstrap Button_Click Event Not Firing

I have a form designed with a button which should call a stored procedure. For now, I just want the button to display text in a textbox (just to make sure the button is working). However, I cannot get it to fire the button_click event.
Here is what I have:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="container-fluid">
<section class="container">
<div class="container-page">
<div class="col-md-6">
<h3 class="dark-grey">Registration</h3>
<div class="form-group col-lg-12">
<label>Username</label>
<input type="" name="" class="form-control" id="" value="">
</div>
<div class="form-group col-lg-6">
<label>Password</label>
<input type="password" name="" class="form-control" id="" value="">
</div>
<div class="form-group col-lg-6">
<label>Repeat Password</label>
<input type="password" name="" class="form-control" id="" value="">
</div>
<div class="form-group col-lg-6">
<label>Email Address</label>
<input type="" name="" class="form-control" id="" value="">
</div>
<div class="form-group col-lg-6">
<label>Repeat Email Address</label>
<input type="" name="" class="form-control" id="" value="">
</div>
<div class="col-md-6">
<h3 class="dark-grey">Terms and Conditions</h3>
<p>
By clicking on "Register" you agree to the Terms and Conditions.
</p>
<button type="submit" class="btn btn-primary" onclick="btnSumbit_Click">Register</button>
<br />
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</div>
</section>
</div>
</form>
</body>
</html>
My c# code is:
protected void btnSumbit_Click(object sender, EventArgs e)
{
TextBox1.Text = "Registered";
}
Any idea why this will not work?

My guess is that you are getting a normal <button> mixed up with an <asp:Button>.
Your current implementation wants to run a javascript function name btnSubmit_Click and does not have any connection to your C# code-behind.
...
<asp:Button type="submit" CssClass="btn btn-primary" OnClick="btnSumbit_Click" runat="server">Register</asp:Button>
...
I haven't been able to test if it works myself.

If you need to use an html button, instead of an ASP Button control (for instance, if you need something other than text in the button), you can still do it like this (using runat=server and OnServerClick):
<button runat="server" type="button" id="updateButton" onserverclick="UpdateEmail_Click" class="btn btn-success btn-block" title="<%$ Resources:UserMessages, UpdateCaps %>"><asp:Localize ID="Localize5" runat="server" Text="<%$ Resources:UserMessages, UpdateCaps %>"></asp:Localize></button>

If you're using a standard HTML button, you need to:
Add runat="server" to your button.
Set your button to use onserverclick instead of onclick.
http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlbutton.onserverclick(v=vs.110).aspx
So:
<button runat="server" class="btn btn-primary" onserverclick="Method_Name"...
Alternatively, you can use Bootstrap classes with the <asp:Button... tags as well. You'll simply apply them to an attribute called CssClass instead of `class'.
So:
<asp:Button type="submit" runat="server" CssClass="btn btn-primary" OnClick="Method_Name"...

Bootstrap modal not rendering inside ASP.NET main form

I am trying to pull values entered by a user from a C# code file using a Bootstrap modal, which is in an ASPX page.
I found that Bootstrap is not allowing two forms in one page (blocking values of another form), and as we all know, we have a master form in master page, so I can't use another form for the modal, and my modal is rendering outside of the main form.
I used this code to render my modal inside the parent form:
function showDialog(id) {
$('#paiddialog').on('show.bs.modal', function (e) {
$(this).parent().appendTo("form");
});
$('#' + id).modal("show");
}
This is the modal's HTML:
<div id="paiddialog" class="modal fade" role="dialog" style="display: none;" aria-hidden="true">
<asp:UpdatePanel ID="panels" runat="server">
<ContentTemplate>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Update payment Information
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-4 control-label" for="form-field-1">
Select Assignment ID
</label>
<div class="col-sm-6">
<asp:DropDownList ID="ddlassignmentid" runat="server" DataTextField="iassignmentidref" AppendDataBoundItems="true" DataValueField="iassignmentid" DataSourceID="sdassignmentid" CssClass="form-control">
<asp:ListItem Text="Select" Value=""></asp:ListItem>
</asp:DropDownList>
<asp:LinkButton ID="btnbindassigdetails" runat="server" OnClick="btnbindassigdetails_Click" CssClass="btn btn-info">Pull info</asp:LinkButton>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<asp:LinkButton ID="btnupdate" OnClick="btnupdate_Click" runat="server" CssClass="btn btn-success large">Request Payment </asp:LinkButton>
<button aria-hidden="true" data-dismiss="modal" class="btn btn-default">
Close
</button>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
The rendered HTML is some thing like this
<html>
<head></head>
<body>
<form id="mainform" action="page.aspx">
<div class="pagecontent"></div>
</form>
<div class="model fade"></div>
</html>
But still no luck.

There is an ugly hack to allow another form tag.
</form><form action="blah.aspx" id="blah">
This will get a trailing form in there for you to work with. Not recommended but a way around the 1 form tag limit of .Net

For any new readers, i managed to fix this by adding bellow script
$(this).parent().appendTo("form");

When menu visibility is turned off I can't see another pages content

I have a master page with the following code:
<body>
<form id="form1" runat="server">
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
<div id="headerBar">
<a href="<% = Page.ResolveUrl("~/default.aspx") %>">
<img src="<% = Page.ResolveUrl("~/images/logo.png") %>" id="logo" /></a> <span id="header_text">
Scrum Reports</span>
<asp:LoginStatus ID="LoginStatus1" runat="server" CssClass="login_status" LogoutAction="Redirect"
LogoutPageUrl="~/default.aspx" />
<asp:LoginName ID="LoginName1" runat="server" CssClass="login_user" />
</div>
</div>
</div>
<div id="menuBar">
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" StaticDisplayLevels="2"
Orientation="Horizontal" >
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" SiteMapProvider="admin" runat="server" />
<asp:SiteMapDataSource ID="SiteMapDataSource2" SiteMapProvider="user" runat="server" />
</div>
<!-- END: Sticky Header -->
<!-- BEGIN: Page Content -->
<div id="mainContent">
<div id="container">
<div id="content">
<asp:ContentPlaceHolder ID="Main" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
<!-- END: Page Content -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
Developed by Application Solutions
</div>
</div>
<!-- END: Sticky Footer -->
</form>
</body>
Now I am using the following C# (as part of the master pages Page_Load method)to show or hide the sites menu depending on whether a user is logged in:
Menu1.Visible = Page.User.Identity.IsAuthenticated;
For some reason, this line of code is preventing content from being seen on another page when the user isn't logged in.
<%# Page Language="C#" AutoEventWireup="true" MasterPageFile="~/master/template.master" CodeFile="recoverpassword.aspx.cs" Inherits="password_recoverpassword" %>
<asp:Content ID="Content1" Visible="true" ContentPlaceHolderID="Main" runat="Server">
<div>
Cant see this content when not logged in.
</div>
</asp:Content>
Why is this happening? What can I do about it?

The code above:
Menu1.DataBind();
was causing the issue. When I removed it it it fixed it and everything else continued to work as normal.