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>

Use Bootstrap Modal after all the requiring field have been filled

EDIT: I noticed that when i click the button inside the modal then the mandatory popup shows and does not allow to go on.
i need to use the bootstrap modal to add some details about some authorization. So, i have a cshtml page with some fields required and a button which open the modal. But, when i click the button, the modal shows up even if the fields are empty. How can i solve this?
Button code:
<div class="col-sm-2"><input type="submit" value="#Risorse.Language.InserisciAutorizzazione" class="btnRegister btn btn-default" data-toggle="modal" data-target="#modalLoginForm" /></div>
Modal (which is not the one i'll use, i put this in my cshtml only for tests):
<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="defaultForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-email">Your email</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="defaultForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-pass">Your password</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-default">Login</button>
</div>
</div>
</div>
</div>
This is the graphic result:
As you can see, the alert that the fields are mandatory pops up, but practically they may also not be entered.
The idea that i had is to open the modal by JS only if all the required fields have been filled. But i want to know if there is a more elegant way to do it.
Thank you.

Prevent the model before validation using below code,
Html:
<input type="text" id="txt_name" /><button type="button" class="btn btn-primary btn-lg no-modal" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
Jquery:
$('#myModal').on('show.bs.modal', function (e) {
var button = e.relatedTarget;
if($("#txt_name").val().length==0) {
e.stopPropegation();
}
});

I think the type attribute in your button code is the cause of the problem.
Try changing the value "submit" to "button".

Login Boostrap Modal on MasterPage

I have a Login & Register Boostrap Modal on my MasterPage.
The code is simple and works. The problem comes when user make an invalid use.
I have all validations on code behind, when user hit Login i need if its invalid, a Label show the error and popup keep alive. My Popup close everytime user hit Login, its ok or not. I tested some similar scenary in Content Pages, with registerstartupclient to call a function ShowModal, that reopen the modal. But i cant do that on MasterPage. So how can i validate input data and show a label without close the popup.
Im running Modal on Form Tag from Body because MasterPages dont allow more than one.
My Project is ASP.Net C# WebForms.
<div id="logmodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal contenido-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><i class="fa fa-user-circle"> </i> Login</h4>
</div>
<div class="modal-body">
<%--<form id="Conectar">--%>
<div class="form-group">
<input type="text" id="txtUsuario" class="form-control" runat="server" placeholder="Usuario Web"/>
</div>
<div class="form-group">
<input type="password" id="txtPassword" class="form-control" runat="server" placeholder="Password"/>
</div>
<div class="form-group">
 <asp:Button ID="Button1" runat="server" Text="LOGIN" CssClass="btn btn-default" OnClick="Button1_Click" />
</div>
<%--</form>--%>
<asp:Label ID="LblErrors" runat="server" Text=""></asp:Label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" >Cerrar</button>
</div>
</div>
</div>
</div>

Invoking server side function from the client side for dynamically created markup

I want to call a method that is on the server side by clicking a link or a button that is being dynamically created on the server side. My code dynamically generates the html and changing it to static html is not an option.
str.Append("<a data-toggle=\"modal\" href=\"#cmpModal\" class=\"btn btn-danger\">" + Resources.vsk.addasfriend + "</a> | ");
The line above creates a link which upon click opens up a model, the code for which is as follows:
<div class="modal fade" id="cmpModal">
<div class="modal-dialog">
<div class="modal-content">
<div id="acategory" class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="actxt">Add to Friend List</h4>
</div>
<div class="model-body">
<div class="pd_10">
<div role="form">
<fieldset>
<div class="form-group">
<label class="col-sm-4 control-label" for="<%= txt_message.ClientID %>">
<%= Resources.vsk.message_channel_10 %>:</label>
<div class="col-sm-8">
<asp:TextBox CssClass="form-control" ID="txt_message" onkeyup="Count_Chars(this,'#tabout_cnt',100);" runat="server"
TextMode="MultiLine" Height="50px"></asp:TextBox><br />
<strong id="tabout_cnt">100</strong>
<%= Resources.vsk.charsleft %>.
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
<asp:Button ID="btn_send" class="btn btn-primary" runat="server" OnClick="btn_send_Click" />
</div>
</div>
</div>
The send button in the modal is what calls the server side method. I'm trying to completely get rid of this modal and have the function invoked just by clicking the link. Is there a way to do this?

Use Ajax on button click. follow link for basics of Ajax=
http://www.w3schools.com/jquery/ajax_ajax.asp

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");