從 JavaScript 訪問 RepeaterItem 以訪問子控件

Question

我有一個轉發器（用於內容帖子），其中包含一個更新面板，該面板又包含另一個轉發器作為（用於評論的子項）。

我想要實現的是讓用戶評論/喜歡帖子。 這些值使用 JavaScript/JQuery 進行驗證，並使用 PageMethods 發送到服務器。 我設法讓 UpdatePanel 從 JavaScript 刷新。 我面臨的問題是，我需要以某種方式找到 Posts RepeaterItem，以便我可以創建 Comments Repeater 的實例，以便將其重新綁定到數據源，這將使用戶在輸入評論后出現評論。

我嘗試在網上搜索了幾天，但似乎沒有人使用與 JavaScript 和更新面板等混合的嵌套轉發器來解決這個問題。我不介意整頁回發，我不介意更改我的頁面結構，如果必要的。 我唯一希望的是，當這個過程發生時，用戶會停留在頁面上的同一個位置，我擔心通過完整的頁面刷新，用戶將被導航回頁面頂部。 JavaScript 是立即反饋的正確方法。 然而，我對 ASP 和 C# 中的 JavaScript 還是陌生的，所以事實證明這有點挑戰。

結構

Repeater (Posts)
|
---- Update Panel (for refreshing childeren from JavaScript)
    |
    ---- Repeater (Comments)

ASP代碼

<asp:Repeater ID="rptActivityStream" runat="server" OnItemDataBound="rptActivityStream_ItemDataBound">
  <HeaderTemplate></HeaderTemplate>
  <ItemTemplate>
    <asp:HiddenField ID="hfActivityStreamID" value='<%#Eval("ActivityStreamID") %>' runat="server" />
      <table style="width:100%;">
        <tr>
          <td style="width:100%;">
             <div class="card">
               <div class="cardheader">
                 <table style="width:100%;">
                   <tr>
                     <td style="width:80%; text-align:left;">
                        <div style="display:inline-block">
                          <img src='<%#Eval("Avatar") %>' class="listmenuavatar" /> 
                          <%#Eval("FullName") %>
                        </div>
                        <div style="display:inline-block">
                          <%#Eval("ActivityStreamTitleHTML") %>
                        </div>
                      </td>
                      <td style="width:20%; text-align:right;">
                        <div style="display:inline-block">
                          <%#Eval("TimeAgo") %>
                        </div>
                      </td>
                    </tr>
                  </table>
                </div>
                <div class="cardbody">
                  <%#Eval("ActivityStreamContentHTML") %>
                </div>
                <div id="cardfooter" class="cardfooter">
                  <asp:UpdatePanel ID="UpdPnlComments" runat="server"  UpdateMode="Conditional" OnLoad="UpdPnlComments_Load">
                    <ContentTemplate>
                      <asp:Repeater ID="rptSocialData" runat="server">
                        <HeaderTemplate></HeaderTemplate>
                        <ItemTemplate>
                          <button id="btnLike" type="button" class="btn btn-default btn-sm">
                            <input id="hdnASID" type="hidden" runat="server" value='<%#Eval("ActivityStreamID") %>'/>
                            <span class="glyphicon glyphicon-thumbs-up"></span> Like
                          </button>
                          <button id="btnComment" type="button" class="btn btn-default btn-sm">
                            <input id="hdnASID2" type="hidden" runat="server" value='<%#Eval("ActivityStreamID") %>'/>
                            <span class="glyphicon glyphicon-comment"></span> Comment
                          </button>
                          <%#Eval("LikeCount") %>
                          <%#Eval("CommentCount") %>
                        </ItemTemplate>
                        <FooterTemplate></FooterTemplate>
                      </asp:Repeater>
                      <div class="commentsDiv" style="display:none; margin-top:10px;">
                        <div style="display:inline-block; vertical-align: top;">
                          <img src='<%#Eval("Avatar") %>' class="listmenuavatar" />
                        </div>
                        <div class="commentBoxDiv form-group has-feedback" style="display:inline-block; padding-left: 10px; padding-right: 10px; width:30%;">
                          <asp:TextBox ID="txtComment" CssClass="commentBox form-control" runat="server" TextMode="MultiLine" Font-Size="8pt"></asp:TextBox>
                        </div>
                        <div style="display:inline-block; vertical-align: top;">
                          <button id="btnSendComment" type="button" class="post-Comment btn btn-primary btn-sm" data-id='<%#Eval("ActivityStreamID") %>'>
                            <span class="glyphicon glyphicon-comment"></span> Send
                          </button>
                        </div>
                        <div style="display:block; padding-top:20px;">
                          <asp:Repeater ID="rptComments" runat="server">
                            <HeaderTemplate></HeaderTemplate>
                            <ItemTemplate>
                              <table style="width:100%; padding-left:5px; padding-right:5px;">
                                <tr>
                                  <td style="width:50%; text-align:left; vertical-align:top; padding-left:10px; padding-top: 15px;">
                                    <div style="text-align:center; display:table;">
                                      <div style="float:left;">
                                        <asp:Image ID="Image1" runat="server" CssClass="commentavatar" ImageUrl='<%#Eval("AuthorAvatar") %>'/>
                                      </div>
                                      <div style="vertical-align: middle; padding-left: 10px; display: table-cell;">
                                        <%#Eval("Author") %>
                                      </div>
                                    </div>
                                  </td>
                                  <td style="width:50%; text-align:right; vertical-align:middle;  padding-right:10px;">
                                    <%#Eval("TimeAgo") %>
                                  </td>
                                </tr>
                                <tr>
                                  <td style="width:100%; text-align:left;" colspan="2">&nbsp;
                                  </td>
                                </tr>
                                <tr>
                                  <td style="width:100%; text-align:left; padding-left:10px;padding-right:10px;" colspan="2">
                                    <div style="border-bottom: solid; border-width: 1px; border-color: #dddddd; padding-bottom: 15px;">
                                      <%#Eval("Comment") %>
                                    </div>
                                  </td>
                                </tr>
                              </table>
                            </ItemTemplate>
                            <FooterTemplate></FooterTemplate>
                          </asp:Repeater>
                        </div>
                      </div>
                    </ContentTemplate>
                  </asp:UpdatePanel>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </ItemTemplate>
      <FooterTemplate></FooterTemplate>
    </asp:Repeater>

JavaScript

$(document).ready(
  function ()
    {
      $('[id*=btnLike]').click(function (event) {
        debugger;
        event.preventDefault(); //preventing button's default behavior
    
        var ActivityStreamID = $(this).find("input[type=hidden]").val();
        var UserID = document.getElementById('<%= hfUserID.ClientID %>').value;
    
        var element = $(this).parent().parent().parent();
    
        var result = PageMethods.LikeActivityStream(ActivityStreamID, UserID, onPostLikeSuccess, onPostLikeFailure);
        UpdateUpdPanel(element);
      });
    
      $('[id*=btnComment]').click(function (event) {
        debugger;
        event.preventDefault(); //preventing button's default behavior
        var ASID2 = $(this).find("input[type=hidden]").val();
    
        var element = $(this).parent().parent().parent();   //get the update panel
        var commentdiv = element.find(".commentsDiv");      // find commentsDiv in the update panel
        commentdiv.css("display", "block");                 // set the text to red as a test.
      });
    
      function UpdateUpdPanel(element) {
        __doPostBack(element, '');
      }
    
      function onPostLikeSuccess(result) {
        //refresh repeater / update panel ?
      }
    
      function onPostLikeFailure(result) {
        likeerror();
      }
    
      function likeerror() {
        swal({
          title: 'Uh-Oh!',
          text: 'Something went wrong while liking this post! Please try again and if the problem persists, please contact the system administrator.',
          type: 'error'
        });
      }
    });

    $(document).on("click", ".post-Comment", function () {
        
      var ActivityStreamID = $(this).data('id');
      var UserID = document.getElementById('<%= hfUserID.ClientID %>').value;
    
      var element = $(this).parent().parent();
      var element2 = $(this).parent().parent().parent();
      var commentboxdiv = element.find(".commentBoxDiv");
      var commentbox = commentboxdiv.find(".commentBox");
      var comment = commentbox.val();
    
      if (comment != "") {
        commentboxdiv.removeClass('has-error');
        var result = PageMethods.CreateActivityStreamComment(ActivityStreamID, comment, UserID, onPostCommentSuccess, onPostCommentFailure, element2);
      }
      else {
        commentboxdiv.addClass('has-error');
      }
    
      function onPostCommentSuccess(result, context) {
        //refresh repeater / update panel?
        debugger;
        var element = context;
        UpdateUpdPanel(element);
      }
    
      function UpdateUpdPanel(element) {
        debugger;
        __doPostBack(element, '');    
      }
    
      function onPostCommentFailure(result) {
        commenterror();
      }
    
      function commenterror() {
        swal({
          title: 'Whaaaa?!',
          text: 'Something went wrong while posting your comment! Please try again and if the problem persists, please contact the system administrator.',
          type: 'error'
        });
      }
    });

C# 代碼（更新面板中刷新評論轉發器）

protected void UpdPnlComments_Load(object sender, EventArgs e)
{
  // Missing code here to create an instance of the rptSocialData and rptComments repeaters
  // so that they can be data bound
  // hfActivityStream will also have to be accessed

  DatabaseHelper dh = new DatabaseHelper();

  DataTable dtSocialData = new DataTable();
  dtSocialData = dh.GetActivityStreamSocialData(hfActivityStreamID.Value);
  rptSocialData.DataSource = dtSocialData;
  rptSocialData.DataBind();

  DataTable dtComments = new DataTable();
  dtComments = dh.GetActivityStreamComments_All(hfActivityStreamID.Value);
  rptComments.DataSource = dtComments;
  rptComments.DataBind();
}

我如何在 OnDataBound 方法中完全實現服務器端的示例

protected void rptActivityStream_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
    {
        Repeater rptSocialData = (Repeater)e.Item.FindControl("rptSocialData");
        Repeater rptComments = (Repeater)e.Item.FindControl("rptComments");

        HiddenField hfActivityStreamID = (HiddenField)e.Item.FindControl("hfActivityStreamID");

        DatabaseHelper dh = new DatabaseHelper();

        DataTable dtSocialData = new DataTable();
        dtSocialData = dh.GetActivityStreamSocialData(hfActivityStreamID.Value);
        rptSocialData.DataSource = dtSocialData;
        rptSocialData.DataBind();

        DataTable dtComments = new DataTable();
        dtComments = dh.GetActivityStreamComments_All(hfActivityStreamID.Value);
        rptComments.DataSource = dtComments;
        rptComments.DataBind();
    }
}

Answer 1

不確定這是否是您要查找的內容，但是如果您想讓 Repeater 中的每個項目都獨一無二，您可以將ClientID與ItemIndex一起使用。

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
        <div id="<%# Repeater1.ClientID + "_" + Container.ItemIndex %>">Content</div>
    </ItemTemplate>
</asp:Repeater>

要么

<div id="<%= Repeater1.ClientID %>" class="repeaterContainer">
    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <div id="item_<%# Container.ItemIndex %>">Content</div>
        </ItemTemplate>
    </asp:Repeater>
</div>

使用最后一個，您可以將 jQuery 事件綁定到repeaterContainer類並使用它獲取item_xx 。

更新

如果您想知道觸發按鈕位於哪個中繼器中，您可以做兩件事。 使用普通按鈕並導航到父級，或使用 ItemCommand。 第一個轉發器使用普通按鈕單擊，而第二個使用 ItemCommand。

<asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
        <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button1_Click" />
    </ItemTemplate>
</asp:Repeater>

<asp:Repeater ID="Repeater2" runat="server" OnItemCommand="Repeater2_ItemCommand">
    <ItemTemplate>
        <asp:Button ID="Button2" runat="server" Text="Button" />
    </ItemTemplate>
</asp:Repeater>

然后在后面的代碼中，您可以將發件人或來源轉換回正確的類型並獲取 ID

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = ((Button)sender).Parent.Parent.ID;
}

protected void Repeater2_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    Label1.Text = ((Repeater)source).ID;
}