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.
Related
In my ASPX form I have Update Panel and Script Manager too.
When I am changing Radio button oncheckedChanged All selected file will be removed from my aspx file as well as when I submit the form if validation occurs then also file will be removed from fileupload controller.
<div class="form-group">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="text-success">
<span><strong>અરજદારનું નામ ચાલે છે કે કેમ? </strong>
<asp:RadioButton ID="rdBtnYes" runat="server" Text="હા" GroupName="binKhetidetails" AutoPostBack="true" OnCheckedChanged="rdBtnYes_CheckedChanged" />
<asp:RadioButton ID="rdBtnNo" runat="server" Text="ના" Checked="True" GroupName="binKhetidetails" AutoPostBack="true" OnCheckedChanged="rdBtnNo_CheckedChanged" /></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="text-success">
<strong>File Upload</strong>
</div>
<asp:FileUpload ID="FileUpload1" runat="server" accept=".pdf, image/*"></asp:FileUpload>
</div>
</div>
Here my page :
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<%# Register Assembly="Microsoft.ReportViewer.WebForms" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<asp:HiddenField ID="hdnfromDate" Value="" runat="server" />
<asp:HiddenField ID="hdntoDate" Value="" runat="server" />
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Issue Invoice</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form id="reused_form" runat="server">
<p>
Send invoice to...
</p>
<div class="form-group">
<label for="name">
To:</label>
<input type="text" class="form-control"
id="name" name="name" readonly maxlength="50" runat="server">
</div>
<div class="form-group">
<label for="email">
CC:</label>
<input type="email" ID="cc" class="form-control" runat="server" multiple>
</div>
<div class="form-group">
<strong><i>Note:</i><small> <i>The invoice can not be edited after issuing.</i></small></strong>
</div>
<asp:LinkButton CssClass="btn btn-warning m-btn btn-block btn-lg m-btn--custom m-btn--icon m-btn--air " OnClick="Onbtn3_Click" Text="Issue Invoice " ID="LinkButton3" runat="server"></asp:LinkButton>
</form>
<div id="success_message" style="width: 100%; height: 100%; display: none;">
<h3>Sent your message successfully!</h3>
</div>
<div id="error_message"
style="width: 100%; height: 100%; display: none;">
<h3>Error</h3>
Sorry there was an error sending your form.
</div>
</div>
</div>
</div>
</div>
In cs File i am trying to access email value using cc.Value as for email textbox id is cc. But it always gets empty string. In my default master page i have a form tag which runs at server so if i keep this modal in a form runat server then gives me error saying page can have only one form tag. Please can anyone help me out. Thanks in advance
This may help
There is Text property available, so you can use textBox.Text to get textbox contian. In your case cc.Text.
Try textBox.text(). Should work.
As Html 5 type=“email” control is not available using runat attribute, you can access TextBox like below:
<asp:TextBox ID="txtBoxCc" runat="server" TextMode="Email"></asp:TextBox>
Now in codebehind you can access it like txtBoxCc.Text
Also, you have to put it like below:
if(!Page.IsPostBack) {
string cc = txtBoxCc.Text;
}
I have got an ASP ListView, bound programmatically to its DataSource at runtime.
Firefox and Chrome browsers have the issue where ONLY the first record of the ListView is causing the SelectedIndexChanged/Changing events to fire. All other selected records (2nd, 3rd, 4th record etc) are causing a Postback only, without the SelectedIndecChanged/Changing events being fired.
The strange thing, is that Internet Explorer fires the SelectedIndexChanged/Changing events on every record (not just the first record).
Does anyone know what I may be doing wrong?
<asp:ListView ID="lvUsersShoppingCart" runat="server" DataKeyField="ProductID" DataKeyNames="ProductID" OnSelectedIndexChanged="lvUsersShoppingCart_SelectedIndexChanged">
<ItemTemplate>
<div class="top-buffer">
<div class="row">
<div class="col-sm-3">
<asp:Image ID="imgProductThumbnail" class="img-responsive" runat="server" ImageUrl='<%# Eval("ThumbnailImageLocation")%>' />
</div>
<div class="col-sm-9">
<form class="form-horizontal">
<div class="form-group">
<strong>
<asp:Label ID="lblProductName" runat="server" Text='<%# Eval("ProductName")%>' /></strong>
</div>
<div class="form-group">
<asp:Label ID="lblProductShortDescription" runat="server" Text='<%# Eval("ProductShortDescription")%>' />
</div>
<div class="form-group">
$<asp:Label ID="lblProductPrice" runat="server" Text='<%# Eval("ProductPrice")%>' />
(AUD)
</div>
<div class="form-group hidden">
<div class="col-sm-3">
<label for="lblProductQuantity" class="control-label">Quantity</label>
</div>
<asp:Label ID="lblProductQuantity" class="input-sm" runat="server" Text='<%# " x " + Eval("ProductQuantity").ToString%>'></asp:Label>
<asp:Button ID="btnEditQuantity" runat="server" Text="Change Qty" CssClass="btn btn-link" CommandName="Edit" />
</div>
<div class="form-group">
<asp:Button ID="btnDelete" runat="server" Text="Remove" CssClass="btn btn-danger" CommandName="Select" />
</div>
</form>
</div>
</div>
</div>
</ItemTemplate>
</asp:ListView>
The problem is caused by the form element in your ItemTemplate:
<form class="form-horizontal">
...
</form>
You can get the correct behavior if you replace it by another type of container (typically a div):
<div class="form-horizontal">
...
</div>
I am trying to do some styling on my page, and I really would like to implement the built -in modal that bootstrap has for displaying my ValidationSummary control, along with any other messages I may want. So far, I can get the modal to pop up, but the button never reaches my OnClick method, and it does not display the validation summary. I assume this has something to do with posting, and I was wondering if there is a way around this, and if I can still implement the modal?
My page looks something like this currently:
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">
<script>
//MODAL SCRIPT
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
</script>
...
<!-- PROGRAM NAME -->
<p>
<asp:Label ID="ProgramName_Label" runat="server" Text="Program Name:" CssClass="label-program"></asp:Label>
<asp:TextBox ID="ProgramName" runat="server" class="form-control text-fix"></asp:TextBox>
</p>
<asp:RequiredFieldValidator ID="ProgramNameValidator" runat="server" ErrorMessage="Program Name is required." ControlToValidate="ProgramName"></asp:RequiredFieldValidator>
...
<!-- SUBMIT BUTTON -->
<div class="col-md-12" align="center">
<asp:LinkButton ID="SubmitProgram" runat="server" OnClick="SubmitProgram_Click"
CssClass="listview-buttons" Font-Underline="false" data-toggle="modal"
data-target="#myModal">Submit Program</asp:LinkButton>
</div>
<!-- BOOTSTRAP MODAL DIALOG -->
<div id="myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
<asp:Label ID="ValidationList" runat="server"></asp:Label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
All you have to do is to add this function on your page:
function WebForm_OnSubmit() {
if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
$('#myModal').modal('show');
return false;
}
return true;
}
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.