Bootstrap modal closes on dropdownlist selected index change

Question

This is my Code:

I used update Panel, but still the page is refreshing. Kindly help. 

 

 

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

<ContentTemplate>

<table align="center" class="table">

<tr>

<td align="center">

Recipe:&nbsp;

</td>

<td>

<button type="button" class="btn-success" data-toggle="modal" data-target="#myModal">

Add New</button>

</td>

</tr>

</table>

<table align="center" class="table table-responsive">

<tr>

<td align="center">

<div class="row row-fluid">

<div class="col-sm-12 ">

<div class="table-responsive">

<asp:GridView ID="gvRecipeSetup" runat="server" AutoGenerateColumns="false" Font-Names="Arial"

CssClass="table table-striped table-hover" Font-Size="11pt" AlternatingRowStyle-BackColor="#FAAC58"

HeaderStyle-BackColor="orange" Width="100%" AllowPaging="true" ShowFooter="true"

RowStyle-BorderColor="White" BorderColor="White" OnPageIndexChanging="OnPaging"

OnRowEditing="EditRecipe" DataKeyNames="ERS_RECIPE_SKIP_ID" OnRowUpdating="UpdateRecipe"

OnRowCancelingEdit="CancelEdit" PageSize="12">

<Columns>

<asp:TemplateField HeaderText="Soft Type">

<HeaderTemplate>

<table>

<tr>

<td colspan="2">

Soft Type

</td>

</tr>

<tr>

<td>

<asp:TextBox ID="txtSoftType" runat="server"></asp:TextBox>

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<asp:Label ID="lblSoftType" runat="server" Text='<%# Eval("SOFT_TYPE")%>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="EQ Code">

<HeaderTemplate>

<table>

<tr>

<td colspan="2">

EQ Code

</td>

</tr>

<tr>

<td>

<asp:TextBox ID="txtEqpCode" runat="server"></asp:TextBox>

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<asp:Label ID="lblEqpCode" runat="server" Text='<%# Eval("ERS_EQ_CODE")%>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Recipe">

<HeaderTemplate>

<table>

<tr>

<td colspan="2">

Recipe

</td>

</tr>

<tr>

<td>

<asp:TextBox ID="txtRecipe" runat="server"></asp:TextBox>

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<asp:Label ID="lblRecipe" runat="server" Text='<%# Eval("ERS_RECIPE")%>'></asp:Label>

</ItemTemplate>

<EditItemTemplate>

<asp:TextBox ID="txtRecipe" runat="server" Text='<%# Eval("ERS_RECIPE")%>'></asp:TextBox>

</EditItemTemplate>

</asp:TemplateField>

<asp:CommandField ShowEditButton="True" />

<asp:TemplateField>

<HeaderTemplate>

<table>

<tr>

<td>

<asp:Button ID="btnFilter" runat="server" CssClass="btn-info" Text="Filter" OnClick="btnFilter_Click" />

</td>

&nbsp; &nbsp;

<td>

<asp:Button ID="btnClearAll" runat="server" CssClass="btn-info" Text="Clear All"

OnClick="btnClearAll_Click" />

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<asp:LinkButton ID="lnkRemove" runat="server" CommandArgument='<%# Eval("ERS_RECIPE_SKIP_ID")%>'

OnClientClick="return confirm('Do you want to delete?')" Text="Delete" OnClick="DeleteRecipeFn"></asp:LinkButton>

</ItemTemplate>

<FooterTemplate>

</FooterTemplate>

</asp:TemplateField>

</Columns>

<AlternatingRowStyle BackColor="#F7BE81" />

<PagerStyle CssClass="GridPager" HorizontalAlign="Center" VerticalAlign="Middle" />

</asp:GridView>

</div>

</div>

</div>

</td>

</tr>

<tr>

<td>

<asp:Label ID="lbsmsg" runat="server" CssClass="label-danger"></asp:Label>

</td>

</tr>

</table>

<div class="modal fade" id="myModal" role="dialog">

<div class="modal-dialog">

<!-- Modal content-->

<div class="modal-content">

<div class="modal-header" style="padding: 35px 50px;">

<button type="button" class="close" data-dismiss="modal">

&times;</button>

<h4>

<span class="glyphicon glyphicon-pencil"></span>Add Recipe Skip Info</h4>

</div>

<div class="modal-body" style="padding: 40px 50px;">

<form role="form">

<div class="dropdown">

<label for="softType">

<span class="label"></span>Soft Type</label>

<asp:DropDownList ID="ddlSoftType" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlSoftType_SelectedIndexChanged">

</asp:DropDownList>

</div>

<div class="dropdown">

<label for="eqpCode">

<span class="label"></span>Eqp Code</label>

<asp:DropDownList ID="ddlEqpCode" runat="server" AutoPostBack="true">

</asp:DropDownList>

</div>

<div class="form-group">

<label for="rec">

<span class="label"></span>Recipe</label>

<input type="text" class="form-control" id="rec" placeholder="Enter recipe">

</div>

<button type="submit" class="btn btn-success btn-block">

<span class="label"></span>Add</button>

</form>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">

Cancel</button>

</div>

</div>

</div>

</div>

</ContentTemplate>

</asp:UpdatePanel>