We Keep Coding

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.

how i can use two form in one page?

<div id="formContainer">
<form id="login" runat="server">
Forgot?
<asp:TextBox ID="loginEmail" Text="Email" runat="server"></asp:TextBox>
<asp:TextBox ID="loginPass" TextMode="Password" runat="server" value="pass"></asp:TextBox>
<asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />
</form>
<form id="recover" method="post" action="./">
Forgot?
<input type="text" name="recoverEmail" id="recoverEmail" value="Email" />
<input type="submit" name="submit" value="Recover" />
<%-- <asp:Button ID="btnrecover" runat="server" Text="Recover" OnClick="btnrecover_Click" />--%>
</form>
</div>
This is my code and I need to write a code on recover button.
But error came that is only one form is used.
Can anyone help to solve this error?
I want to write code on both buttons to submit and recover.
Thanks.

You can use Panel control instead of form ,
<div id="formContainer">
<asp:Panel runat="server" ID="pTest" DefaultButton="btnLogin">
Forgot?
<asp:TextBox ID="loginEmail" Text="Email" runat="server"></asp:TextBox>
<asp:TextBox ID="loginPass" TextMode="Password" runat="server" value="pass"></asp:TextBox>
<asp:Button ID="btnLogin" runat="server" Text="Login" />
</asp:Panel>
<asp:Panel runat="server" ID="Panel1" DefaultButton="btnrecover">
Forgot?
<input type="text" name="recoverEmail" id="recoverEmail" value="Email" />
<input type="submit" name="submit" value="Recover" />
<asp:Button ID="btnrecover" runat="server" Text="Recover" />
</asp:Panel>
</div>
You can also reference this link !

There is another way, you can extend your first form to Control, then you can see it on your Toolbox. Then just drag it to your second Form.

Programmatically scroll/move to an item in a .net asp:listview control

I have a web page that has an asp:ListView and I am trying to figure out how to programmatically scroll to a certain item. Here is my aspx markup:
<asp:ListView ID="lvGlossary" runat="server" DataSourceID="SqlDataSource1" OnItemDataBound="lvGlossary_ItemDataBound">
<LayoutTemplate>
<div class="glossaryTitle">Glossary</div>
<div id="ItemPlaceholder" runat="server"></div>
<br />
</LayoutTemplate>
<ItemTemplate>
<div class="glossaryEntry">
<span class="glossaryWord">
<asp:Label ID="lbWord" runat="server" Text='<%# Bind("Word") %>' />:
</span>
<span class="glossaryDefinition">
<asp:Label ID="lbDefinition" runat="server" Text='<%# Bind("Definition") %>' />
</span>
<br />
</div>
</ItemTemplate>
<AlternatingItemTemplate>
<div class="glossaryEntryAlternating">
<span class="glossaryWord">
<asp:Label ID="lbWord" runat="server" Text='<%# Bind("Word") %>' />:
</span>
<span class="glossaryDefinition">
<asp:Label ID="lbDefinition" runat="server" Text='<%# Bind("Definition") %>' />
</span>
<br />
</div>
</AlternatingItemTemplate>
</asp:ListView>
In my c# code behind I am populating a text box with text and when the user selects a word I want to automatically scroll to the word in the listview so it is visible. It most likely needs to be done client side, so I think I need some javascript to do this. Can anyone point me to an example of how to do this?
Any help is appreciated!!
Thank you

You could use an element's scrollIntoView javascript method:
document.getElementById('id').scrollIntoView(true);

Is the Login control buggy?

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" />

Update Progress on processing after fileupload

I have a webform with two upload controls and a number of textfields.
When the button is pressed the files get uploaded and then get processed.
The upload takes no time, but the processing does.
I know I can't have an upload control in an update panel, so I can't work out how to use the update progress control to show my progress.
My page with an updateprogress control that does work is as follows:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DynamicLayout="true">
<ProgressTemplate>
<div class="LOADING">
Your data is being processed<br />
<br />
<img src="/images/loading.gif" /><br />
<br />
Please wait...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<div class="addFixture">
<asp:ValidationSummary ID="ValidationSummary1" ValidationGroup="fixture" runat="server" />
<label>
Type
<asp:DropDownList ID="ddlType" runat="server" AppendDataBoundItems="true">
<asp:ListItem Text=""></asp:ListItem>
</asp:DropDownList>
<label>
Date
</label>
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
<label>
Name 1</label>
<asp:TextBox ID="txtName1" runat="server"></asp:TextBox>
<label>
Name 2
<asp:TextBox ID="txtName2" runat="server"></asp:TextBox>
<label>
First XML File</label>
<asp:FileUpload ID="firstFileUp" runat="server" />
<br />
<label>
Second Xml File</label>
<asp:FileUpload ID="secondFileUp" runat="server" />
<br />
<br />
<asp:Button ID="SubmitButton" runat="server" CausesValidation="true" Text="Submit" OnClick="SubmitButton_Click" />
<asp:Label ID="ErrorMessageLabel" runat="server" EnableTheming="false"></asp:Label>
</div>
</ContentTemplate>
</asp:UpdatePanel>
I have searched for this, but people seem to be trying to get the progress of the file upload and not the processing.
Can anyone help?

Remove the UpdatePanel as all the way you can't use FileUpload controls inside it.
Add to the SubmitButton OnClientClick property with following value: OnClientClick="showProgress()"
Also add onto the page javascript function below:
function showProgress() {
var updateProgress = $get("<%= UpdateProgress1.ClientID %>");
updateProgress.style.display = "block";
}
By the way, consider to use some async file upload control like one from the Ajax Control Toolkit library

You can use an UpdatePanel and the FileUpload if you use the ASyncFileUploadControl. It works pretty well. Make sure you download the latest version because there were a couple of issues with prior releases.