c# - 单击链接标签时加载Jquery弹出框并显示来自ID的信息？

Question

我在带有链接标签的数据列表中列出了数据库中的一些内容。在首页上看起来像这样。

ID= 21 点我

                <HeaderTemplate>
                    <p class="overskrift_bestil">Ekstra varer</p>
                </HeaderTemplate>

                <ItemTemplate>

                      <td><asp:TextBox ID="TextBox_deli" runat="server" Width="15" Height="15"></asp:TextBox></td>
                      <td><p><%#Eval("deli_navn") %></p></td>
                     <td>
                       <a href="#contactFormContainer" id="showdialog2">Show the Dialog</a>


                     </td>

               </ItemTemplate>
            </asp:DataList>

当我单击“单击我”链接时，我希望弹出框显示 ID=21 上产品的所有信息。我知道当我单击 html 链接时我必须加载一些查询字符串，但我被卡住了。这就是我现在所拥有的：

$(文档).ready(函数 () {

          $('#contactFormContainer').hide();

          $('#showdialog2').click(function () {
              $("#contactFormContainer").load("bekraeft.aspx?deli_id=deli_id");
              $("#contactFormContainer").fadeToggle('slow');
          });
      });

    </script>

希望有人可以帮助我

/蒂娜

Answer 1

你需要改变一点你的代码：

• 更改类的 showDialog2 id（因此您要将点击侦听器附加到该类的所有元素）
• 向链接添加数据属性，存储 deli_id

aspx：

<HeaderTemplate>
    <p class="overskrift_bestil">Ekstra varer</p>
</HeaderTemplate>
<ItemTemplate>
    <td><asp:TextBox ID="TextBox_deli" runat="server" Width="15" Height="15"></asp:TextBox></td>
    <td><p><%#Eval("deli_navn") %></p></td>
    <td>
        <a href="#" class="showdialog2" data-id='<%#Eval("deli_navn") %>'>Show the Dialog</a>
    </td>
</ItemTemplate>

JS：

$(function () {
    var clickedLink = $(this);
    $('#contactFormContainer').hide();
    $('.showdialog2').click(function () {
        $("#contactFormContainer").load("bekraeft.aspx?deli_id=" + clickedLink.attr("data-id"));
        $("#contactFormContainer").fadeToggle('slow');
    });
});

Answer 2

你需要做一个ajax调用。

<script>

 $(document).ready(function () {
      $('#contactFormContainer').hide();
      $('#showdialog2').click(function () {
          var deli_id = $('#deli_id').text(); //get deli_id from some container
          $.ajax({
              url: "bekraeft.aspx?deli_id=" + deli_id, //send id to aspx page
              cache: false
          })
          .done(function(html) { //retrive html from aspx page once ajax call is completed
               $("#contactFormContainer").html(html); //load html into container
               $("#contactFormContainer").fadeIn('slow'); //fade container in 
          });

      });
  });
</script>