asp.net 网页，获取 jQuery 手风琴插件以与 asp:Repeater 控件一起使用

Question

我正在做一个 asp.net 项目。我被要求创建一个页面，以便站点管理员可以添加文章，其他人可以在这些文章下添加评论。我的数据库中有 2 个单独的表，Articles/Comments。在页面加载时，我在一个面板中用它们自己的相关评论填充所有文章。我还被要求使用 accordion 这样所有的评论都会以可折叠的方式显示！我的问题是只有第一篇文章下面有可折叠的评论，其他的都没有！

这是我的 aspx 页面：

    <%@ Page Title="Ref Notes" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="RefNotes.aspx.cs" Inherits="Root.RefNotes" %>    
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <asp:Panel ID="refNotes" CssClass="col-xs-12 data-container" runat="server">
    </asp:Panel>
</asp:Content>

aspx.cs代码：

public partial class RefNotes : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            populateNotes();
            Page.Title = "Latest Ref Notes";
        }

        protected void populateNotes()
        {
            string tag = "";
            if (Request.QueryString["tag"] != null) tag = Request.QueryString["tag"];
            int post = 0;
            if (Request.QueryString["post"] != null) post = Int32.Parse(Request.QueryString["post"]);
            MediaService.Article[] articles = Global.mediaService.GetArticles(1, 1); //gets all articles
            for (int i = 0; i < articles.Length; i++)
            {                
                if (post > 0 && articles[i].ID != post) continue;

                Root.Controls.Blog.RefNotesPost p = (Root.Controls.Blog.RefNotesPost)LoadControl("~/Controls/Blog/RefNotesPost.ascx");
                p.SetData(articles[i]);
                refNotes.Controls.Add(p);

                Root.Controls.Blog.CommentControl c = (Root.Controls.Blog.CommentControl)LoadControl("~/Controls/Blog/CommentControl.ascx");
                c.SetData(articles[i].ID);
                refNotes.Controls.Add(c);
            }
            if (articles.Length == 0)
            {
                Literal l = new Literal();
                l.Text = "<h1>No content currently available.</h1>";
                refNotes.Controls.Add(l);
            }
        }
    }

CommentControl.ascx代码：

@ Control Language="C#" AutoEventWireup="true" CodeBehind="CommentControl.ascx.cs" Inherits="Root.Controls.Blog.CommentControl" %>

<div class="row">
    Comments:
    <asp:Panel ID="errorPanelID" runat="server" CssClass="loginbox-textbox" Visible="false" Style="margin-top: 20px;">
        <div class="alert alert-danger fade in">
            <button class="close" data-dismiss="alert">
                ×
            </button>
            <i class="fa-fw fa fa-times"></i>
            <asp:Label ID="errorMsgID" runat="server"></asp:Label>
        </div>
    </asp:Panel>
</div>
<div id="dvAccordion" style="width: auto">
    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <h3>
                <asp:Label ID="Label1" runat="server" Text='<%#Eval("user") + " at " + Eval("dateTime") + " says:"%>'></asp:Label></h3>

            <div style="background-color: #CFDEE3">
                <asp:Literal ID="lit" runat="server" Text='<%#Eval("comment")%>' Mode="Transform" />
            </div>
        </ItemTemplate>
    </asp:Repeater>
</div>
<div>
    Add a Comment:<br />
    <asp:TextBox ID="txtComment" runat="server" Rows="5" TextMode="MultiLine"></asp:TextBox>
    <br />
    <asp:Button ID="Button1" runat="server" OnClick="saveBtn_Click" Text="Submit " />
    <asp:HiddenField runat="server" ID="articleID" Value="0" />

</div>
<script type="text/javascript">
    $(function () {
        $("#dvAccordion").accordion();
    });
</script>

CommentControl.ascx.cs代码：

public partial class CommentControl : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }        

        public void SetData(int artID)
        {
                Services.Comment[] comments = Global.Tools.GetComments(artID);

            articleID.Value = artID.ToString();
            if (comments.Length > 0)
            {               
                Repeater1.Visible = true;
                Repeater1.DataSource = comments;
                Repeater1.DataBind();
            }
            else
            {
                Repeater1.Visible = false;
            }            
        }        

        protected void saveBtn_Click(object src, EventArgs e)
        {
                AdminService.Employee emp = Global.Tools.GetEmployee(Int32.Parse(Session["eid"].ToString()));
                Blog.Comment a = new Blog.Comment();
                a.CommentOn = txtComment.Text;
                a.CreatedBy = emp.username;
                a.DatePosted = DateTime.Now;
                a.isVisible = 1;
                a.ArticleID = int.Parse(articleID.Value);

                if (Request.QueryString["post"] != null)
                {
                    a.ID = Int32.Parse(Request.QueryString["post"]);
                }

                int result = Global.Tools.CreateComment(a);

                if (result <= 0)
                {
                    errorMsgID.Text = "Failed to create comment.";
                    errorPanelID.Visible = true;
                }
                else
                {                   
                      Response.Redirect("/News.aspx");
                }
            }
            txtComment.Text = string.Empty;     

    }

Answer 1

在 CommentControl.ascx 文件中，我根据 id (#dvAccordion) 设置了手风琴。我将其更改为基于 class (.dvAccordion) 并解决了问题。

所以为了将来的参考：当你在一个页面上时，"id" 只能被调用一次，而 "class" 可以被调用多次！

asp.net 网页，获取 jQuery 手风琴插件以与 asp:Repeater 控件一起使用

asp.net web page, getting jQuery Accordion plugin to work with asp:Repeater control

c#

asp.net

jquery-plugins

postback

asprepeater