Ali Alhamaly Ali Alhamaly - 1 month ago 25
ASP.NET (C#) Question

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>
&nbsp;<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><a href="#" data-toggle="modal" data-target="#myModal">New Ticket</a></li>
<li><a href="#">New Client</a></li>
<li><a href="#" class="glyphicon-user">Username</a></li>
</ul>


Any ideas please?

Answer

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.