Jquery Modal не отображается при нажатии кнопки ASP.NET - PullRequest
0 голосов
/ 25 апреля 2019

У меня есть многошаговая форма на веб-странице с использованием ASP.NET.У меня есть две функции в форме, которые я хотел бы использовать.Автозаполнение текстового поля, которое работает нормально.Кроме того, когда вы нажимаете на кнопку, я хочу, чтобы она показала модал, который показывает данные из сетки.Каждый раз, когда я пытаюсь нажать на кнопку, модал не появляется.

У меня есть кнопка, которая вызывает метод на заднем конце, который вызывает метод привязки 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>


...