Develop Reference

ASP DropdownList doesn't work inside Bootstrap modal

I'm very new to CSS styling and Bootstrap stuff, so I'm having too many issues during working on my job project.
Here I have an issue that prevents me to use asp:DropDownList control to be used inside a Bootstrap modal.
Actually what I'm trying to do is that I have a button called New Ticket, so when the user clicks on it a Bootstrap modal should popup includes in its body a form panel which has different controls like Text Boxes, Labels and DropDownLists. These DropDownLists are asp controls, and are being pre-populated in the C# Code-Behind.
Using this form-panel outside the modal is working perfectly, but trying to use it inside the modal brought me to this issue. Below is the error that occurs for me:
Compilation Error
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.
Compiler Error Message: CS1061: 'ASP.openticket_aspx' does not contain a definition for 'ddlServices_SelectedIndexChanged' and no extension method 'ddlServices_SelectedIndexChanged' accepting a first argument of type 'ASP.openticket_aspx' could be found (are you missing a using directive or an assembly reference?)
This is my Modal code:
<div class="container-fluid">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-lg CenterForm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-heading h4 text-primary text-center">
Token Registration
</div>
<div class="panel-body">
<div class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="lblCallerID">Caller ID:</label>
<asp:Label class="col-sm-2 control-label" ID="lblCallerID" runat="server" Text="66355356"></asp:Label>
<div class="col-sm-10">
<asp:TextBox CssClass="form-control" ID="txtCallerID" runat="server"></asp:TextBox>
</div>
</div>
<div class="row">
<label class="col-sm-4 control-label" for="lblServices">Complaint/Suggestion:</label>
<div class="col-sm-8">
<asp:DropDownList class="form-control" ID="ddlServices" runat="server" OnSelectedIndexChanged="ddlServices_SelectedIndexChanged"></asp:DropDownList>
</div>
</div>
<br />
<div class="row">
<label class="col-xs-2 control-label" for="lblSeverity">Severity:</label>
<div class="col-xs-4">
<asp:DropDownList class="form-control" ID="ddlSeverity" runat="server" OnSelectedIndexChanged="ddlServices_SelectedIndexChanged"></asp:DropDownList>
</div>
<label class="col-xs-2 control-label" for="lblStatus">Status:</label>
<div class="col-xs-4">
<asp:DropDownList class="form-control" ID="ddlStatus" runat="server" OnSelectedIndexChanged="ddlServices_SelectedIndexChanged"></asp:DropDownList>
</div>
</div>
<br />
<div class="form-group">
<label class="col-sm-2 control-label" for="lblSubject">Subject:</label>
<div class="col-sm-10">
<asp:TextBox class="form-control" ID="txtSubject" runat="server" placeholder="Enter Subject"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="lblComments">Comments:</label>
<div class="col-sm-10">
<asp:TextBox class="form-control" ID="txtComments" runat="server" placeholder="Enter Comments" TextMode="MultiLine"></asp:TextBox>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<asp:Label ID="lblmsg" runat="server" CssClass="label label-danger"></asp:Label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<asp:Button ID="btnLogin" OnClick="btnLogin_Click" runat="server" CssClass="btn btn-success" Text="Submit"></asp:Button>
<asp:Button ID="btnCancel" OnClick="btnCancel_Click" runat="server" CssClass="btn btn-danger" Text="Cancel"></asp:Button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">New Ticket</button>
<asp:Button ID="btnNewTicket" OnClick="btnNewTicket_Click" runat="server" CssClass="btn btn-default" Text="Open Ticket"></asp:Button>
</div>
</div>
</div>
</div>
</div>
And here is my try to trigger the modal using a button:
<ul class="nav navbar-nav navbar-right">
<li>New Ticket</li>
<li>New Client</li>
<li>Username</li>
</ul>
Any ideas please?

It is not because bootstrap. It is because you are not handling event properly. You should have following in your code behind
protected void ddlServices_SelectedIndexChanged(Object sender, EventArgs e)
{
// code to handle event
}
You also should have AutoPostBack="true" on dropdown list in mark up.
<asp:DropDownList class="form-control" ID="ddlServices" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlServices_SelectedIndexChanged"></asp:DropDownList>
I can also see you are calling same event handler ddlServices_SelectedIndexChanged which seems copy paste error to me. So keep that in account too.
Or if you dont want to handle this event then just remove OnSelectedIndexChanged="ddlServices_SelectedIndexChanged" from your dropdowns.

Assuming that your code is stored in an .aspx page, and you do have a "ddlServices_SelectedIndexChanged" function declared in the related .aspx.cs file, here's my answer:
Go to the top of your .aspx page, and check that the details on the first line are correct.
I've had situations where I've had a beautifully working .aspx page (with a code-behind page), I've copied that .aspx to a second page, renamed it, but Visual Studio hasn't updated the values in the top line of my .aspx page.
For example, if your webpage is called OpenTicket.aspx, then you should have the following at the top of your .aspx page:
<%# Page Title="" Language="C#" AutoEventWireup="true"
CodeBehind="OpenTicket.aspx.cs" Inherits="SomeNamespace.OpenTicket" %>
This explains why ASP.Net sometimes fails to find a code-behind function for one of the controls in an .aspx page.

Exporting webform to MS Word

I'm been looking through tutorials and other questions of how to export from asp.net to word but most I've found are dealing with a simple html table which isn't what I need or involve expensive extensions.
I have a webform which users complete and submit. Once submitted I want to give them to option to export it to Word (see screenshot).
I have tried right clicking and Save As as a test to see how it comes out and it's not neat at all (see screenshot).
When I print preview the page is also a mess due to the hamburger side bar (see screenshot) are these two issues related?
Any tips on getting the word doc to look similar to the webpage?
Sample of my code:
<!--Section 4 - Health & Safety-->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">Health & Safety</a>
</h3>
</div>
<div id="collapseFour" class="panel-collapse collapse in">
<div class="panel-body">
<p>Have their been any changes to Health and Safety issues since the last assessment?</p>
<label class="radio-inline">
<span class="checkableBox checkableBox-radio">
<asp:RadioButton class="validate[required]" ID="rbtnHealthYes" runat="server" value="Y" Text="Yes" GroupName="HealthAndSafetyChanges" />
</span>
</label>
<label class="radio-inline">
<span class="checkableBox checkableBox-radio">
<asp:RadioButton class="validate[required]" ID="rbtnHealthNo" runat="server" value="N" Text="No" GroupName="HealthAndSafetyChanges" />
</span>
</label>
<br /><br />
<p><i>If the answer to the above is yes, please give more details below and complete a new Health and Safety Assessment.</i></p>
<asp:TextBox class="form-control input-sm auto-size m-b-10" ID="txtHealthDetails" runat="server" TextMode="MultiLine"
placeholder="This could include things such as new renovations to the house or measures which have since broken. (This text box will grow as you fill it)"></asp:TextBox>
<hr class="whiter m-t-20" />
<br />
<br />
<p>Additional Comments:</p>
<asp:TextBox class="form-control input-sm auto-size m-b-10" ID="txtHealthComments" runat="server" TextMode="MultiLine"
placeholder="(This text box will grow as you fill it)"></asp:TextBox>
</div>
<!--Body End -->
</div>
<!--Collapse 4 End -->
</div>
<!--Section 4 End -->
http://joshcoopster.tumblr.com/image/131738484325
http://joshcoopster.tumblr.com/image/131738526900
http://joshcoopster.tumblr.com/image/131738596840

Cleanest would be to "transform" the information to a valid document type that Word can open and display. If standard HTML can give you the required quality, you can use that. If you need something more powerful you can use write WordOpenXML using the Open XML SDK.
One big question is, I suppose, whether you really need to show the form controls or whether just the information is good enough.

C# not picking up change in ASP or HTML elements

I have a few dynamic html items which are populated by jquery and/or JS, but for some reason the C# will only see the original values from when the page loaded.
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3">Date</label>
<div class="col-sm-9">
<asp:ToolkitScriptManager ID="tsm" runat="server" />
<asp:TextBox CssClass="btn btn-default pull-right" ID="calBtn" runat="server" Style="width: 150px">Click Here</asp:TextBox>
<asp:CalendarExtender ID="calExt" TargetControlID="calBtn" runat="server" />
</div>
</div>
<div class="form-group">
<label class="col-sm-5">
Start (Actual Begin Time)</label>
<div class="col-sm-7">
<%--<input runat="server" id="startTime" class="time btn btn-default pull-right" type="text" autocomplete="off" style="width: 150px" />--%>
<asp:TextBox runat="server" ID="startTime" CssClass="time btn btn-default pull-right" AutoCompleteType="Disabled" Style="width: 150px"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label class="col-sm-4">End</label>
<div class="col-sm-8">
<%--<input runat="server" id="endTime" class="time btn btn-default pull-right disabled" type="text" autocomplete="off" style="width: 150px" />--%>
<asp:TextBox runat="server" ID="endTime" CssClass="time btn btn-default pull-right" AutoCompleteType="Disabled" Style="width: 150px"></asp:TextBox>
</div>
</div>
</form>
Above the asp:TextBox items I have commented out my original "input" elements since I was trying both methods. If I call string date = calBtn.Text in the C#, it says "Click here" as the returned value. I have also tried date = calExt.SelectedDate which returns empty.
In the text box I have tried .Text and .SelectedValue but still empty.

#DrewKennedy had the right idea. I was nesting all these <form> tags for the Bootstrap which caused it to not be seen server-side. I had wrongly assumed I needed the nested forms to make the CSS work.
I already had a <form runat="server"> surrounding the whole body, but changing the inner <form class="form-horizontal"> to <div class="form-horizontal"> fixed the problem.

ASP.NET only support ONE SINGLE . So you had to add runat=server on your form makup.
Now it is working for me.

Empty password field on an asp:login form using a LayoutTemplate

I have an asp:login control on an .aspx page. I'm using a LayoutTemplate. When a user enters a wrong username or password, on postback, the password field appears to be filled. So if the user only changes the username and try to log in again, it returns an error. Debugging I've seen that the password is empty.
I've tested the same behavior using the default asp:login, without LayoutTemplate, and it works well. It means that after entering a wrong username or password, on postback, the password field appears empty.
How can I make it work?
EDIT:
This is the code I use. When something is wrong and postback occurs, password field appears filled. If the user clicks again to login, on debug mode, I see that the password is empty.
<asp:Login ID="lgLogin" runat="server"
FailureText="Wrong data"
TextLayout="TextOnLeft"
OnAuthenticate="lgLogin_Authenticate"
DestinationPageUrl="http://www.blablabla.com/"
OnLoginError="lgLogin_Error"
RenderOuterTable="false"
DisplayRememberMe="False">
<LayoutTemplate>
<div class="form-group">
<label for="lgLogin_UserName" class="col-md-4 control-label">Login <span class="require">*</span></label>
<div class="col-md-8">
<div class="input-icon">
<i class="fa fa-user"></i>
<asp:TextBox runat="server" type="text" ID="UserName" CssClass="form-control" />
</div>
</div>
</div>
<div class="form-group">
<label for="lgLogin_Password" class="col-md-4 control-label">Password <span class="require">*</span></label>
<div class="col-md-8">
<div class="input-icon">
<i class="fa fa-lock"></i>
<asp:TextBox runat="server" type="password" ID="Password" CssClass="form-control" />
</div>
</div>
</div>
<div id="AvisoError" runat="server" class="alert alert-danger" visible="false">
<button class="close" data-close="alert"></button>
<span>
<asp:Label ID="FailureText" runat="server" ></asp:Label>
</span>
</div>
<div class="form-group">
<div class="col-md-offset-4 col-md-8">
<asp:Button class="btn btn-primary" ID="LoginButton" runat="server" CommandName="Login" Text="Entrar" />
</div>
</div>
</LayoutTemplate>
<TextBoxStyle CssClass="form-control"/>
<LoginButtonStyle CssClass="btn btn-primary" />
If I use the default asp:login, if something goes wrong and postback occurs, password appears empty.
<asp:Login ID="lgLogin" runat="server"
FailureText="Wrong data"
TextLayout="TextOnLeft"
OnAuthenticate="lgLogin_Authenticate"
DestinationPageUrl="http://www.blablabla.com/"
RenderOuterTable="false"
DisplayRememberMe="False">

Obviously, you have set the textbox or input id to password field and it will go off when a postback occurs. Good practices are to leave it as it is and let user enter it one more time because there is a reason why this functionality has been there, and even if you want to push it anyhow then.
Firstly set your autocomplete property for the form to off. Then at page_load, store the password textbox value to some temp variable and then push that temp variable value to textbox. For more security, you can store that password field value to session and then encrypt it with base64 and then use it.

You need to add an attribute at the to retain the state of the controls after postback

Change type of field on load page event completed, works for me:
$(document).ready(function () {
document.getElementById("textBoxSenha").type = "password";
});

Form post to another page

I am fairly new to C# and asp.net and am having trouble showing something submitted in a form. The form element is a tag. The drop-down info is pulled from a data base and displays correctly. It's just getting it to post to another page after the form is submitted is where I am having the problem. Any help would be appreciated.
Contact.aspx:
<form action="Default.aspx" method="post" data-transition="pop">
<div data-role="fieldcontain">
<label for="topEmails">Business Entity ID:</label>
<select name="topEmails" id="topEmails" data-native-menu="false"
runat="server">
</select>
</div>
<input type="submit" data-iconpos="right" data-inline="true"
data-icon="plus" name="sendMessage" id="sendMessage" value="Send Info">
</form>
Contact.aspx.cs:
AdventureWorks2012DataContext db = new AdventureWorks2012DataContext();
var emails = (from b in db.EmailAddresses
select new { b.EmailAddressID, b.BusinessEntityID }).Take(20);
topEmails.DataTextField = "BusinessEntityID";
topEmails.DataValueField = "BusinessEntityID";
topEmails.DataSource = emails;
topEmails.DataBind();
Default.aspx.cs:
FormSuccessBID.InnerHtml = "Business Entity ID: " + Request.Form["topEmails"] + "";
Any ideas why this wouldn't be working?
Update:
Contact.aspx:
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<h2 style="text-align: center;">Contact Kyle</h2>
<form action="Default.aspx" method="post" data-transition="pop">
<div data-role="fieldcontain">
<label for="userFName">First Name:</label>
<input type="text" name="firstName" id="uFName">
</div>
<div data-role="fieldcontain">
<label for="userLName">Last Name :</label>
<input type="text" name="lastName" id="uLName">
</div>
<div data-role="fieldcontain">
<label for="productsCategories">Products:</label>
<select name="productCategories" id="productCategories" data-native-menu="false" runat="server"></select>
</div>
<div data-role="fieldcontain">
<label for="topEmails">Business Entity ID:</label>
<select name="topEmails" id="topEmails" data-native-menu="false" runat="server"></select>
</div>
<input type="submit" data-iconpos="right" data-inline="true" data-icon="plus" name="sendMessage" id="sendMessage" value="Send Info">
</form>
</asp:Content>

You're missing "runat='server'" in your form definition.
In ASP.NET you're also allowed one form per page. Not sure from what you're posted if you're trying to put multiple forms on there, but if you are, it's not going to work.
I think all you need to do to accomplish what you want is have an ASP.NET button on the page, with the postbackURL set to the page you want to go to. (Of course, you need to do this in a server-side form)
I think you're mixing ASP.NET methods with other, different technologies. (From the look of it, you probably used classic ASP or PHP perhaps?)
If you can't use .NET for whatever reason, the ID/name of the field is not going to be what you're expecting. You need to inspect the form post and find its value - something along the lines of "clt00_somethingelse_topEmails". (Again, this is going to be a heck of a lot easier if you use the .NET way of doing things, but you may have a requirement not to)