jQuery Modal没有显示在按钮上单击ASP.NET

时间:2019-04-25 09:58:33

标签: c# jquery bootstrap-modal

我在使用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">&times;</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>


0 个答案:

没有答案