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.
Related
I am using select2 plugin for dropdownlist in asp.net c# which has autopostback true, but when placed in updatepanel its working fine on first page load but when postback happens its styling is gone and dropdownlist is showed in default asp.net format.
<div class="col-md-4 col-12">
<asp:UpdatePanel ID="type" runat="server">
<ContentTemplate>
<div class="form-group">
<div class="controls">
<label for="bktype">Type</label>
<asp:DropDownList ID="bktype" runat="server" CssClass="form-control select2 round" Style="width: 100%" required="" data-validation-required-message="Select a Type" data-placeholder="Select a Type" AppendDataBoundItems="true" AutoPostBack="true" DataSourceID="bk_type" DataTextField="typename" DataValueField="typeId" OnSelectedIndexChanged="bktype_SelectedIndexChanged">
<asp:ListItem Value="">Select a Type</asp:ListItem>
</asp:DropDownList>
<asp:SqlDataSource ID="bk_type" runat="server" ConnectionString="Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\EReader.mdf;Integrated Security=True" ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [BTypes] ORDER BY [typename]"></asp:SqlDataSource>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="col-md-4 col-12">
<asp:UpdatePanel ID="genre" runat="server">
<ContentTemplate>
<div class="form-group">
<div class="controls">
<label for="bkgenres">Genres</label>
<asp:DropDownList ID="bkgenres" runat="server" ClientIDMode="Static" CssClass="form-control select2 round" multiple="multiple" Style="width: 100%" required="" data-validation-required-message="Select Genres" data-placeholder="Select Genres" AppendDataBoundItems="true">
<asp:ListItem Value="">Select Genres</asp:ListItem>
</asp:DropDownList>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
Before PostBack
After Postback
After PostBack happens select2 all styleing is gone search box of select2 is also gone. Please help me out.
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";
}
<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")
How do I delete an item from a asp:Repeater? At the moment I have the following code for the repeater:
<asp:Repeater ID="uxRolesList" runat="server">
<ItemTemplate>
<div id="<%# GetRolesDivId() %>">
<asp:TextBox ID="uxTxtBoxRole" runat="server" rows="5" columns="100" Text='<%# Container.DataItem %>' TextMode="multiline" MaxLength="2000"></asp:TextBox>
<asp:Button ID="uxRemoveRoleBtn" Style="vertical-align:top;" CssClass="remove-roles-btn" runat="server" Text="X" />
<br />
<asp:RequiredFieldValidator runat="server" ID="uxValTxtBoxRole" ControlToValidate="uxTxtBoxRole" ErrorMessage="Please complete this role requirement"></asp:RequiredFieldValidator>
<br /><br />
</div>
</ItemTemplate>
</asp:Repeater>
Which should output something like this:
<div id="roles-1">
<textarea name="ctl00$mainContent$uxRolesList$ctl01$uxTxtBoxRole" rows="5" cols="100" id="ctl00_mainContent_uxRolesList_ctl01_uxTxtBoxRole">Quick test</textarea> <input type="submit" name="ctl00$mainContent$uxRolesList$ctl01$uxRemoveRoleBtn" value="X" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$mainContent$uxRolesList$ctl01$uxRemoveRoleBtn", "", true, "", "", false, false))" id="ctl00_mainContent_uxRolesList_ctl01_uxRemoveRoleBtn" class="remove-roles-btn" style="vertical-align:top;" />
<br />
<span id="ctl00_mainContent_uxRolesList_ctl01_uxValTxtBoxRole" class="error" style="color:#891F11;display:none;">Please complete this role requirement</span>
<br /><br />
</div>
And I'm using the following jQuery to 'delete' the item when the delete button is clicked:
$("#roles-" + roleIdNumber).remove();
e.preventDefault();
rolesCounter--;
Where roleIdNumber is 1 in this case.
But when I submit the form, the item still appears - can anyone help me with what is happening?
i suggest replacing:
<div id="<%# GetRolesDivId() %>">
with:
<div id="<%# GetRolesDivId() %>" class="div_row">
and this line:
<asp:Button ID="uxRemoveRoleBtn" Style="vertical-align:top;" CssClass="remove-roles-btn" runat="server" Text="X" />
with:
<input type="button" style="vertical-align:top;" value="X" class="remove-roles-btn" onclick="$(this).parents('.div_row').remove();rolesCounter--;" />
and remove all the js code you shared here.
hope it helped.
Its probably not working because the repeater items are added to the DOM after the Document.Ready function call has finished executing.
If your repeater fetches data after the page load is complete, then consider using Jquery's on() method or the delegate method.
From the documentation here http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.login.layouttemplate.aspx i had customized the user interface of login control through layout template like below
<LayoutTemplate>
<h3 class="login-title page-header">
<asp:Literal runat="server" ID="loginHeading" Text="Sign-in"></asp:Literal>
</h3>
<div class="clearfix">
<asp:Label runat="server" ID="lblUserName" Text="Username" AssociatedControlID="UserName"></asp:Label>
<div class="input">
<asp:TextBox runat="server" ID="UserName"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="rfvTxtUserName" ErrorMessage="Username is required"
ControlToValidate="UserName" Text="Username is required"></asp:RequiredFieldValidator>
</div>
</div>
<div class="clearfix">
<asp:Label runat="server" Text="Password" AssociatedControlID="Password"></asp:Label>
<div class="input">
<asp:TextBox runat="server" ID="Password" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="rfvTxtPassword" ErrorMessage="Password is required"
ControlToValidate="Password" Text="Password is required"></asp:RequiredFieldValidator>
</div>
</div>
<div class="clearfix">
<asp:Label runat="server" Text="Remember Me" AssociatedControlID="RememberMe"></asp:Label>
<div class="input">
<input type="checkbox" runat="server" id="RememberMe" />
</div>
</div>
<div class="actions action-fix">
<asp:Button runat="server" ID="Login" Text="Login" CssClass="btn success small" />
<input type="reset" class="btn small" value="reset" />
</div>
</LayoutTemplate>
as you can see i did name the control ID as required by the control. Also i use CSS Friendly control adapter for rendering the Login control.
The Problem
It just happens after user types username and password and submits the details nothing happens the page just reloads causing a postback.
What am i doing wrong here
info:
more problem seems to be more prominent for users using LoginControlAdapter look here http://forums.asp.net/t/1043974.aspx/2/10
you must be missing CommandName paramter
<asp:button id="Login" CommandName="Login" runat="server" Text="Login"></asp:button>
Try adding command name to your login button;
<asp:Button runat="server" ID="Login" Text="Login" CssClass="btn success small" CommandName="Login" />