UpdateProgress fire after first panel update - c#

I have an UpdateProgress associated with an UpdatePanel. The problem is it's not firing until the second update.
Ì have a general UpdatePanel with ID="uppGeneric" and a child one with ID="uppAgrupar" which has a LinkButton inside. When I click on LinkButton it doesn't fire the UpdateProgress bar.
<asp:UpdatePanel ID="uppGeneric" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="row">
<div class="col-md-12 mx-auto">
<br />
<asp:UpdateProgress ID="upCargando" DynamicLayout="true" runat="server" AssociatedUpdatePanelID="uppAgrupar">
<ProgressTemplate>
<div class="progress">
<div class="indeterminate" style="width: 100%"></div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</div>
<div class="row">
<div class="col-md-6 mx-auto">
<asp:UpdatePanel ID="uppAgrupar" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:LinkButton ID="btnAgrupar" runat="server" CssClass="el_s btn btn-info btn-block" OnClick="btnAgrupar_Click"><i class="fa fa-search"></i> (S) BUSCAR</asp:LinkButton>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAgrupar" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
And in code behind I execute (to be sure):
uppAgrupar.Update();
but nothing happens.

I found a partial solution.
The UpdateProgress
<asp:UpdateProgress ID="upCargando" runat="server" AssociatedUpdatePanelID="uppAgrupar">
<ProgressTemplate>
<div class="progress">
<div class="indeterminate" style="width: 100%"></div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
generates the next HTML and CSS:
Which has "display: none;"
The problem is that display attribute was not set up to "display: block;" on first button click.
So, my solution was creating a javascript function that change the display attribute that is fired on the event "onClientClick".
<asp:LinkButton ID="btnAgrupar" runat="server" CssClass="el_s btn btn-info btn-block" OnClientClick="activar_barra()" OnClick="btnAgrupar_Click"><i class="fa fa-search"></i> (S) BUSCAR</asp:LinkButton>
and the javascript function is (it could access by ClientID but it's the same result)
function activar_barra()
{
document.getElementsByClassName('progress')[0].parentNode.style.display = "block";
}

Related

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>

TextBox returns empty String on Button click in Bootstrap modal

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

FileUpload Full Postback Issue Under Double UpdatePanels

<asp:UpdatePanel runat="server"><ContentTemplate>
<asp:UpdatePanel ID="PanelImportFileForCSV" Visible="false" runat="server">
<ContentTemplate>
<div class="form-group" runat="server">
<label for="textfield" class="control-label col-sm-4">CSV File<span class="ErrorMessage" style="color: red;"> *</span>/label>
<div class="col-sm-8">
<asp:FileUpload runat="server" ID="FileUpload2" /> <asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator2" ControlToValidate="FileUpload1" ForeColor="DarkRed" ErrorMessage="Only (.mpp) File is allowed" ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.csv|.CSV)$" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate
</asp:UpdatePanel>
<div class="row">
<div class="col-sm-12">
<div class="form-actions">
<asp:button id="btnProceed" runat="server" CssClass="btn" ToolTip="Cancel" Text="Proceed" OnClick="btnProceed_Click" CausesValidation="False"></asp:button>
</div>
</div>
</div>
I know I should use trigger for Full postback for file upload, but i have multiple updatepanels and that idea is not working anymore!
Kindly Help me
Nvm i have fixed the issue by adding the following line in page_Load()
Page.Form.Attributes.Add("enctype", "multipart/form-data")

asp dropdownlist inside bootstrap modal doesn't change value

I'm developing a web application using asp.net and bootstrap v3. On my page, there is a modal which contains two twxt boxes and an asp dropdownlist.
My problem is that the dropdownlist SelectedIndexChanged is not firing. When I put a dropdownlist outside the Modal, its SelectedIndexChanged fires without any problem.
I have set the EnableViewState="true" for the Page and the DDL. I have also set AutoPostBack = "True".
Note:
The page postback when i change the selected item in the DDL inside the modal but it don't go to the SelectedIndexChanged event as i have put a break point and it doesn't work.
I have notices also that the HTML of the DDL (Option, Select) is also that the (Selected="Selected") property is always set for the first element.
this is how I loadt the DDL
protected void Page_Load(object sender, EventArgs e)
{
if(!isPostBack)
{
DataSet ds2 = MainModule.GetTableSQLBySP(new Dictionary<string, string>(), "SP_Stand_GetSectorTypes");
ddlMdlAreaInvitedSecType.DataSource = ds2.Tables[0];
ddlMdlAreaInvitedSecType.DataValueField = "Set_ID";
ddlMdlAreaInvitedSecType.DataTextField = "Set_LongName";
ddlMdlAreaInvitedSecType.DataBind(); }
}
and this is the Modal code
<div class="modal fade" id="modalAreaInvitedSearch" style="margin-top: 155px" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel2">Please enter product data </h4>
</div>
<div class="modal-body" style="height:auto">
<input type="text" class="form-control" placeholder="MM" style="display: none" runat="server" id="Text1" />
<div class="form-group">
<label for="inputEmail1" class="col-lg-3 control-label">Short Name</label>
<div class="col-lg-8">
<asp:TextBox enableviewstate="true" class="form-control " runat="server" id="txtMdlAreaInvitedShortName" />
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-lg-3 control-label">Long Name</label>
<div class="col-lg-8">
<asp:TextBox enableviewstate="true" class="form-control " runat="server" id="txtMdlAreaInvitedLongName" />
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-lg-3 control-label">Sector Type</label>
<div class="col-lg-8">
<asp:DropDownList EnableViewState="true" class="form-control" OnSelectedIndexChanged="ddlMdlAreaInvitedSecType_SelectedIndexChanged" AutoPostBack="true" runat="server" ID="ddlMdlAreaInvitedSecType" />
</div>
</div>
<asp:UpdatePanel runat="server" ID="updatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="grdMdlAreaInvitedResult" runat="server" HorizontalAlign="Center"
AutoGenerateColumns="false" AllowPaging="true"
DataKeyNames="Sec_Id" CssClass="table table-hover table-striped table-bordered centerGridHead">
<Columns>
<asp:TemplateField HeaderText="" ShowHeader="false" ItemStyle-Width="17%">
<ItemTemplate>
<%--<asp:LinkButton id="btnRemove" runat="server" CausesValidation="false" Text="<i aria-hidden='true' class='icon-plus'></i>" CssClass="btn btn-info btn-xs "/>--%>
<asp:CheckBox ID="chkGrdMdlAreaInvitedResult" runat="server" CssClass="btn btn-primary btn-xs " />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Sec_Id" HeaderText="Sec_Id" Visible="false" />
<asp:BoundField DataField="Sec_ShortName" HeaderText="Sector" />
<asp:BoundField DataField="Sec_LongName" HeaderText="Sector Long Name" />
<asp:BoundField DataField="Sec_Id_Master" HeaderText="Sec_Id_Master" Visible ="false" />
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnMdlAreaInvitedSearch" EventName="Click" />
<%-- <asp:AsyncPostBackTrigger ControlID="ddlMdlAreaInvitedSecType" EventName="SelectedIndexChanged" />--%>
</Triggers>
</asp:UpdatePanel>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-lg-12">
<asp:Button ID="btnMdlAreaInvitedClear" OnClientClick="clickCodeBtn()" runat="server" class="btn btn-primary col-lg-2" Text="Clear"></asp:Button>
<asp:Button ID="btnMdlAreaInvitedGet" OnClientClick="clickCodeBtn()" runat="server" OnClick="btnMdlAreaInvitedGet_Click" class="btn btn-primary col-lg-2" Text="Get"></asp:Button>
<asp:Button ID="btnMdlAreaInvitedSearch" UseSubmitBehavior="false" runat="server" OnClick="btnMdlAreaInvitedSearch_Click" class="btn btn-primary col-lg-2" Text="Search"></asp:Button>
<asp:Button ID="btnMdlAreaInvitedClose" OnClientClick="clickCodeBtn()" runat="server" class="btn btn-primary col-lg-2" Text="Close"></asp:Button>
</div>
</div>
</div>
and this is how i open the Modal
function popAreaInvitedSearch() {
$('#modalAreaInvitedSearch').appendTo('body').modal({
show: true,
keyboard: false,
backdrop: 'static'
});
}
any help will be appreciated.
I had a similar problem to this with Fancybox, and it turned out that when the Modal loads, it extracts the HTML and injects it into a DIV outside of the main ASP.NET Form.
To correct this in Fancybox, I overrode the Fancybox source code to inject the Modal within the form.
I'd start by inspecting the page with Firebug, and identify where the Bootrap Modal is actually located. If it is outside of the form, you will need to figure out how to get it rendered within for the ASP.NET control events to properly fire, which you perhaps can configure with the Modal javascript configuration options.
Hope that sets you on the right path.
Have you tried putting the DDL in the UpdatePanel as well? The DDL will most likely always result in a Postback now. Which is probably not desirable.

Why does the whole page do postback and RadioButton loses its value?

I want a selection from a radio button to run a query to populate a DropDownList. I do not want the whole page to do a postback. My whole page is posting back.
Also, when I copy this page to a test page, the value of the radio button is lost. I need the radio button to drive they query which populates the dropdown.
What am I doing wrong which is causing a full postback?
(The method "FillAppointmentTypes_SelectedIndexChanged" is never executed.)
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="updatePanelToggle" runat="server">
<ContentTemplate>
<div class="form-group">
<label for="radDoctors" class="col-md-3 control-label">
Choose your doctor: <span id="asdf"></span>
</label>
<div class="col-md-9">
<asp:RadioButtonList ID="radDoctors" runat="server" CssClass=""
OnSelectedIndexChanged="FillAppointmentTypes_SelectedIndexChanged"
AutoPostBack="True">
</asp:RadioButtonList>
</div>
</div>
<div class="form-group">
<label for="ddAppointmentTypes" class="col-md-3 control-label">
Reason for Visit: <span id="Span1"></span>
</label>
<div class="col-md-9">
<asp:DropDownList ID="ddAppointmentTypes" runat="server">
</asp:DropDownList>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
I have tried a trigger inside the updatedatePanel and outside the content template, no love:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="radDoctors" EventName="SelectedIndexChanged" />
</Triggers>
Put...
if(page.ispostback)
{
return;
}
At the top of your page load event..
Hope this helps
Also maybe set the ChildAsTrigger="true" on the updatepanel

Categories