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");
Related
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 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>
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>
Might be a dummy question, but this issue is getting me mad.
I have a MasterPage that has the main design and of course the <form runat="server"> tag.
The page I'm currently working on has a bootstrap modal containing a text box and button. I want to get the TextBox text entered by the user in the "OnClick" event of the Button. At first button click event wasn't fired so I used Use UseSubmitBehavior="False" and the click event is fired finally. Here's the problem, the TextBox returns empty string when I try to get the text in it.
My page's html code :
<div id="dlgNewOrder" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div>
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<div class="container">
<div class="row">
<div class="col-md-3">
<asp:TextBox runat="server" CssClass="form-control" EnableViewState="True" ID="txtQuantity" placeholder="Quantity"></asp:TextBox>
</div>
</div>
</div>
<div>
<br />
</div>
<br />
<asp:Button runat="server" ID="btnAddToCart" UseSubmitBehavior="False" Text="Add" CssClass="btn btn-info" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
</div>
And here's the code behind :
void btnAddToCart_Click(object sender, EventArgs e)
{
if (string.IsNullOrEmpty(txtQuantity.Text))
{
lblErrorMessage.Text = "Error";
}
else
{
lblErrorMessage.Text = "Correct";
}
}
Seems to be as issue for ASP.NET web forms UpdatePanel with the bootstrap modal.
I tried the jQuery modal and works like a charm! :s
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