我在使用ASP.NET的网页上有一个多步骤表单。我要使用的表单有两个功能。在文本框上自动提示效果很好。另外,当您单击按钮时,我希望它显示一个模式,该模式显示来自gridview的数据。每次我尝试单击按钮时,模态都不会出现。
我有一个按钮,该按钮在后端调用方法,此方法调用gridview绑定方法和ClientScript.RegisterStartupScript以打开模态。当我调试它逐步但没有任何反应。并且在控制台中没有错误。
我在按钮周围包裹了一个更新面板,以防止按钮单击时自动回发,因为我不希望页面刷新并从头开始创建表单。
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Create Template</li>
<li>Add Recipients</li>
<li>Select Content</li>
<li>Add Style</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Create new Template</h2>
<h3 class="fs-subtitle">Provide following information</h3>
<div id="applicationselectdiv" runat="server">
</div>
<input type="text" name="tempname" placeholder="Template Name"/>
<input type="text" name="subname" placeholder="Subject Line"/>
<input type="button" name="next" class="next action-button" value="Next"/>
</fieldset>
<fieldset>
<h2 class="fs-title">Add Recipients</h2>
<h3 class="fs-subtitle">Add multiple recipients</h3>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="viewrecpbutton" runat="server" class="btn btn-primary" Text="View Recipients" OnClick="ViewRecipient_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<div id="recipienttypediv" runat="server">
</div>
<input type="text" id="SearchInput" class="autosuggest" name="initialname" placeholder="Initials"/>
<div id="subteamdiv" runat="server">
</div>
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:Button ID="addbtn" runat="server" Text="Add" OnClick="AddRecipient_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Recipients</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" runat="server">
<asp:GridView ID="gvCurrentRecipients" runat="server" AutoGenerateColumns="true">
</asp:GridView>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
<input type="button" name="next" class="next action-button" value="Next"/>
</fieldset>
<fieldset>
<h2 class="fs-title">Select Content</h2>
<h3 class="fs-subtitle">This is what will appear in the email</h3>
<input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
<input type="button" name="next" class="next action-button" value="Next"/>
</fieldset>
<fieldset>
<h2 class="fs-title">Add Style</h2>
<h3 class="fs-subtitle">Colour scheme</h3>
<input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
<input type="submit" name="submit" class="submit action-button" value="Submit"/>
</fieldset>
</div>
</div>
</div>
</form>
protected void ViewRecipient_Click(object sender, EventArgs e)
{
GetgvRecipients();
ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
}
<script type="text/javascript">
function openModal() {
$('#myModal').modal('show');
}
</script>
Order of my libraries:
<script src="Scripts/jquery-3.0.0.js"></script>
<script src="Scripts/jquery-ui-1.12.1.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Custom fonts for this template-->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"/>
<!-- Custom styles for this template-->
<link href="css/cr-admin.css" rel="stylesheet"/>
<link href="NewTemplate.css" rel="stylesheet" />
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin.min.js"></script>
<script src="NewTemplate.js"></script>