2017-05-20 9 views
0

写真の下にコメントウィンドウがあります。Asp.net - 更新リストビュー

<div class="post commentPanel" id="pnlComment"> 
        <div class="post-footer"> 
         <div class="input-group"> 
          <asp:TextBox runat="server" ID="txtComment" CssClass="form-control" placeholder="Add a comment"></asp:TextBox> 
          <asp:Button runat="server" CssClass="btn btn-primary" imgId='<%# Eval("PID") %>' ID="btnSendComment" OnClick="btnSendComment_Click" Text="Send"></asp:Button> 
         </div> 

         <ul class="comments-list"> 
          <asp:UpdatePanel runat="server" ID="uptComment" UpdateMode="Always"> 
           <ContentTemplate> 
            <asp:ListView runat="server" ID="listComment" ItemPlaceholderID="itemPlaceHolder" DataSource='<%# Eval("CommentList")%>'> 
             <ItemTemplate> 
              <li class="comment"> 
               <a class="pull-left" href="#"> 
                <img class="avatar" src='<%# Eval("UserImg") %>' alt="avatar"> 
               </a> 
               <div class="comment-body"> 
                <div class="comment-heading"> 
                 <h4 class="user"><%# Eval("UserFName") %> <%# Eval("UserSName")%></h4> 
                 <h5 class="time">(<%# Eval("CDate") %>)</h5> 
                </div> 
                <p><%# Eval("CText") %></p> 
               </div> 
              </li> 
             </ItemTemplate> 
            </asp:ListView> 
           </ContentTemplate> 
          </asp:UpdatePanel> 
         </ul> 
        </div> 
       </div> 



protected void btnSendComment_Click(object sender, EventArgs e) 
     { 
       var x = sender as Button; 
       ListViewDataItem item = (ListViewDataItem)(sender as Control).NamingContainer; 
       TextBox txtComment = (TextBox)item.FindControl("txtComment"); 
       if (string.IsNullOrEmpty(txtComment.Text) == false) 
       { 
        Comment comm = new Comment() 
        { 
         CText = txtComment.Text, 
         PID = x.Attributes["imgId"], 
         UID = Session["loginuser"].ToString(), 
         CDate = DateTime.Now, 
        }; 
        if (Comment.sendComment(comm) == true) 
        { 
         txtComment.Text = string.Empty; 
         ListView listComment = (ListView)item.FindControl("listComment"); 
         List<Comment> commlist = SqlTask.GetCommentsByPhotoId(comm.PID); 
         listComment.DataSource = commlist; 
         uptMain.Update(); 
        } 

      } 
     } 

私は上記のようなリストビューを持っています。ユーザーが写真のコメントを投稿すると、ページをリフレッシュした後に見ることができますが、それはあなたが推測するようにそれほど手の届かないものです。 私はリストパネルをupdatepanelでカバーしていますが、正直なところ私はupdatepanelの仕組みをよく分かりません。

これで、コメント送信後にコメントパネルを更新しようとしています。出来ますか ?

答えて

0

UpdatePanelがアヤックスに変わりますが内部パネルを実行して、すべてのポストバックを呼び出しますので、あなたは、UpdatePanelの内部のボタンを移動する必要があります。

マークアップ:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpdatePanel.aspx.cs" Inherits="AspNetDemoProject.Demos.UpdatePanel" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <asp:ScriptManager runat="server"></asp:ScriptManager> 
     <div class="post commentPanel" id="pnlComment"> 
      <asp:UpdatePanel runat="server" ID="uptComment" UpdateMode="Always"> 
       <ContentTemplate> 
        <div class="post-footer"> 
         <div class="input-group"> 
          <asp:TextBox runat="server" ID="txtComment" CssClass="form-control" placeholder="Add a comment"></asp:TextBox> 
          <asp:Button runat="server" CssClass="btn btn-primary" imgId='<%# Eval("PID") %>' ID="btnSendComment" OnClick="btnSendComment_Click" Text="Send"></asp:Button> 
         </div> 
         <ul class="comments-list"> 
          <asp:ListView runat="server" ID="listComment" ItemPlaceholderID="itemPlaceHolder"> 
           <ItemTemplate> 
            <li class="comment"> 
             <p><%# Eval("Text") %></p> 
            </li> 
           </ItemTemplate> 
          </asp:ListView> 
         </ul> 
        </div> 
       </ContentTemplate> 
      </asp:UpdatePanel> 
     </div> 
    </form> 
</body> 
</html> 

コード横:

public partial class UpdatePanel : System.Web.UI.Page 
    { 
     private static List<dynamic> list = new List<dynamic>(); 


     protected void btnSendComment_Click(object sender, EventArgs e) 
     { 
      list.Add(new { Text = txtComment.Text }); 
     } 

     protected void Page_PreRender(object sender, EventArgs e) 
     { 
      listComment.DataSource = list; 
      listComment.DataBind(); 
     } 
    } 

チェックこの例のコードに基づいて、

関連する問題