0

更新パネルを含むリピーター (コンテンツ投稿用) があり、これには (コメントの子) として別のリピーターが含まれます。

私が達成しようとしているのは、投稿に対するユーザーのコメント/好みです。値は 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();
    }
}
4

1 に答える 1