jquery用按钮刷新div单击asp .net

Posted 2023-05-07

【中文标题】jquery用按钮刷新div单击asp .net

【英文标题】：jquery refresh div with button click asp .net

【发布时间】：2014-07-11 01:56:41

【问题描述】：

我正在尝试通过单击按钮刷新 div，但一定有问题。我也在使用 asp.net 和 jquery。如果你们能帮助我，那就太棒了

 $('#addmebaby').click(function () 
     $.ajax(
         url: "MenuControl.aspx",

         type: "GET",
         dataType: "html",
         success: function (data) 
             var result = $('<div />').append(data).find('#MenuDiv').html();
             $('#MenuDiv').html(result);
         ,
         error: function (xhr, status) 
             alert("Sorry, there was a problem!");
         ,
         complete: function (xhr, status) 
             //$('#showresults').slideDown('slow')
         
     );
 );

这里有完整的代码

 <script>

     function refreshDiv() 

         $('#addmebaby').click(function () 
             $.ajax(
                 url: "MenuControl.aspx",

                 type: "GET",
                 dataType: "html",
                 success: function (data) 
                     var result = $('<div />').append(data).find('#MenuDiv').html();
                     $('#MenuDiv').html(result);
                 ,
                 error: function (xhr, status) 
                     alert("Sorry, there was a problem!");
                 ,
                 complete: function (xhr, status) 
                     //$('#showresults').slideDown('slow')
                 
             );
         );
     

  $(function () 

     $("#dialog-form").dialog(
          autoOpen: false,
          height: 300,
          width: 350,
          modal: true,
        appendTo: AddForm,
      );



      $("#create-user")
        .button()
        .click(function () 
            $("#dialog-form").dialog("open");

        );

      $("#dialog-form-edit").dialog(
          autoOpen: false,
          height: 300,
          width: 350,
          modal: true,
          appendTo: AddForm,
      );




  );



 </script>

列出、编辑、删除表格

<div class="page-content-wrapper">
    <div class="page-content">





        <div class="row">
            <div class="col-md-12">
                <!-- BEGIN PAGE TITLE & BREADCRUMB-->
                <h3 class="page-title">
                MFT Haber Scripti V1  <small>Admin Paneli</small>
                </h3>
                <ul class="page-breadcrumb breadcrumb">
                    <li>
                        <i class="fa fa-home"></i>
                        <a href="index.html">Home</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="#">Dashboard</a>
                    </li>
                    <li class="pull-right">

                    </li>
                    <li>
                    </li>
                </ul>
                <!-- END PAGE TITLE & BREADCRUMB-->
            </div>
        </div>
        <!-- END PAGE HEADER-->

        <div class="clearfix">

 <!-- BEGIN EXAMPLE TABLE PORTLET-->
                <div class="portlet box blue" >
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-edit"></i>Düzenleme Tablosu

                        </div>

                    </div>
                    <div class="portlet-body">
                        <div class="table-toolbar">
                            <div class="btn-group">


                            <input type="button" value="Yeni Ekle +" Id="create-user" class="btn green"   />    

                            </div>
                            <ul style="float:right">
                            <asp:Button ID="Button7" runat="server" Text="Seçilenleri Sil" BackColor="Red" CssClass="btn green" OnClick="Button7_Click" />
                            </ul>
                        </div>
                        <div id="MenuDiv">
                        <table class="table table-striped table-hover table-bordered" id="table" >
                        <thead>
                        <tr>
                            <th>

                              Seç  

                            </th>
                            <th>
                                Baslik
                            </th>


                            <th>
                                Edit
                            </th>
                            <th>
                                Delete
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <asp:Repeater runat="server" ID="repMasterMenu"><ItemTemplate>
                        <tr>
                            <td><asp:CheckBox ID="CheckBox1" runat="server"  /></td>
                            <td>
                                <%#Eval("MenuName") %>
                            </td>


                            <td>


                               <asp:ImageButton ID="Duzen" runat="server" OnClientClick="$('#dialog-form-edit').dialog('open');"   ImageUrl="~/admin/img/duzenle_16x16.gif"  CommandArgument=<%#Eval("Id") %>   onclick="Duzenle" Width="10px"  />

                                <!--<a href="#" class="btn default btn-xs purple"><i class="fa fa-edit"></i> Edit</a>-->
                            </td>
                            <td>
                                <asp:ImageButton ID="Sil" ImageUrl="~/admin/img/sil_16x16.gif" runat="server" CommandArgument=<%#Eval("Id") %> onclick="sil" />

                            <!--    <a href="#" class="btn default btn-xs black"><i class="fa fa-trash-o"></i> Delete</a>-->
                            </td>
                        </tr>

                                      </ItemTemplate></asp:Repeater>
                        </tbody>
                        </table>
                            </div>
                    </div>
                </div>


                <!-- END EXAMPLE TABLE PORTLET-->

                </div>

弹出窗口

名称

           <div id="dialog-form-edit" >

姓名

</div>



<!-- END CONTENT -->

【参考方案1】：

function refreshDiv()

       $.ajax( url: "MenuControl.aspx",

             type: "GET",
             dataType: "html",
             success: function (data) 
                 var result = $('<div />').append(data).find('#MenuDiv').html();
                 $('#MenuDiv').html(result);
             ,
             error: function (xhr, status) 
                 alert("Sorry, there was a problem!");
             ,
             complete: function (xhr, status) 
                 //$('#showresults').slideDown('slow')
             
         );

在元素上附加这个函数 onclick='refreshDiv()'

【讨论】：

这不是 $('#addmebaby').click(function () 做同样的事情吗？我也使用 onclick 进行代码隐藏

我也试过放输入按钮来检查刷新但没用