C# 在第一个选项卡中的某些div之后动态创建选项卡_C#_Javascript_Jquery_Asp.net_Jquery Ui

C# 在第一个选项卡中的某些div之后动态创建选项卡

c# javascript jquery asp.net jquery-ui

C# 在第一个选项卡中的某些div之后动态创建选项卡,c#,javascript,jquery,asp.net,jquery-ui,C#,Javascript,Jquery,Asp.net,Jquery Ui,在第一个选项卡中显示20个div后动态创建选项卡。实际上我正在动态生成一个div，可能会动态生成100个div。我希望在一个选项卡中显示20个div，如果有100个div，它将自动生成5个选项卡，每个选项卡中有20个div <div id="TabbedPanels1" class="TabbedPanels"> <ul class="TabbedPanelsTabGroup"> <li class="TabbedPanelsTab" tabindex=

在第一个选项卡中显示20个div后动态创建选项卡。实际上我正在动态生成一个div，可能会动态生成100个div。我希望在一个选项卡中显示20个div，如果有100个div，它将自动生成5个选项卡，每个选项卡中有20个div

<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">tab1</li>
    <li class="TabbedPanelsTab" tabindex="0">tab2</li>

  </ul>
  <div class="TabbedPanelsContentGroup">

    <div class="TabbedPanelsContent">
        <div id="slider1" class="sliderwrapper">  
 <div class="contentdiv"> 
12345   
</div>
<div class="contentdiv"> 
12345   
</div>
</div>
<div id="paginate-slider1" class="pagination">   

</div>
<div id="paginate1-slider1" class="pagination2">

</div>   
    </div>

     </div>
     </div>



选项卡1
选项卡2

12345
12345

在这里，我创建了一个JSFIDLE，它根据ContentDiv的数量动态生成选项卡：，它可以帮助您实现目标

HTML代码：

<div id="tabs">
    <ul id="tabLinks"></ul>
</div>

JavaScript代码：

$(function () {

    var neededDivCount = 100; // number of contentDivs for test purposes
    var divPerTab = 20; // number of contentDivs / tabs for test purposes

    // create the conentDivs dynamically for test purposes

    for (var i = 1; i <= neededDivCount; i++) {
        $("body").append('<div class="contentDiv">div' + i + 'content</div>');
    }

    // create the tabs and tabLinks based on the number of contentDivs in the document

    var neededTabCount = Math.floor(($(".contentDiv").length - 1) / divPerTab) + 1;
    for (var i = 1; i <= neededTabCount; i++) {
        $("#tabs").append('<div id="tab' + i + '"></div>');
        $("#tabLinks").append('<li><a href="#tab' + i + '">tab' + i + '</a></li>');
    }

    // loop through the contentDivs and append them to the correct tab

    $(".contentDiv").each(function (index) {
        var appendToTabIndex = Math.floor(index / divPerTab) + 1;
        $(this).appendTo($("#tab" + appendToTabIndex));
    });

    $("#tabs").tabs();
});

$（函数（）{
var needDivCount=100；//用于测试的ContentDiv数
var divPerTab=20；//用于测试的contentdiv/选项卡的数量
//为测试目的动态创建conentdiv
对于（var i=1；i您可以使用2个嵌套的中继器。子中继器是从datatable生成的，返回您的内容记录（content div），父中继器是从匿名类型列表动态生成的
ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RP.aspx.cs" Inherits="RP" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">
      $(function() {
        $( "#tabs" ).tabs();
      });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="tabs">

        <%-- Tabs Links --%>
        <asp:Repeater ID="TablLinkRepeater" runat="server">
            <HeaderTemplate>
                <ul>
            </HeaderTemplate>
            <ItemTemplate>
                <li><a href="#Tab<%# Eval("TabIndex") %>">Tab
                    <%# Eval("TabIndex") %></a></li>
            </ItemTemplate>
            <FooterTemplate>
                </ul>
            </FooterTemplate>
        </asp:Repeater>

        <%-- Tabs and Content --%>
        <asp:Repeater ID="TabRepeater" runat="server">
            <ItemTemplate>
                <div id="Tab<%# Eval("TabIndex") %>">
                    <%-- Show TabIndex just for testing --%>
                    <h1>
                        Tab #
                        <%# Eval("TabIndex") %>
                    </h1>
                    <asp:Repeater ID="ContentRepeater" runat="server">
                        <ItemTemplate>
                            <div class="Content" id="ContentDiv" runat="server">
                                <%-- Some content--%>
                                <asp:Label ID="Name" runat="server" />
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </div>
    </form>
</body>
</html>


无标题页
$（函数（）{
$（“#制表符”）.tabs（）；
});


标签#

C#
使用系统；
使用System.Collections.Generic；
使用系统数据；
使用System.Web；
使用System.Web.UI；
使用System.Web.UI.HTMLControl；
使用System.Web.UI.WebControl；
公共部分类RP:System.Web.UI.Page
{
私有常量int ContentPerTab=20；
私有数据表SomeDatatable；
受保护的无效页面加载（对象发送方，System.EventArgs e）
{   
如果（！Page.IsPostBack）
{
//1） 以某种方式从数据库加载SomeDatatable
//仅用于测试：替换为对DB的查询
SomeDatatable=新数据表（“x”）；
SomeDatatable.Columns.Add（新数据列（“ContentIndex”，Type.GetType（“System.Int32”））；
SomeDatatable.Columns.Add（newdatacolumn（“Name”，Type.GetType（“System.String”））；
对于（int x=1；x显示到目前为止您已经尝试过的内容实际上这里我没有显示动态生成的div，第一个选项卡中只有2个div。如果有100个div（例如12345）然后，我想在每个选项卡中显示20个div，必须生成5个选项卡…不清楚您要实现什么！您想生成空div吗？或者已经有100个div，您想移动到不同的选项卡？实际上，我没有100个div，它是动态生成的……。这是一个示例，我正在尝试扩展lain………可能有60个div，那么每个选项卡中必须有3个选项卡，每个选项卡中必须有20个div…另外，我如何使用c#动态显示contentdiv中的数据。@AmitSambyal:由于代码使用jQuery类选择器，它可以对任何数量的div使用类名“contentdiv”执行此操作。我创建100个ContentDiv只是为了演示，但由于使用了类选择器，创建这些ContentDiv后的代码可以用于任意数量的ContentDiv。如何向动态生成的单选按钮添加数据信息属性我可以使用2个嵌套的中继器创建应用程序，但我无法显示fi加载第一个问题…当我单击“下一步”或“上一步”按钮时，它将显示第一个问题。如果我的答案适用于您的问题，请将其标记为“答案”。对于进一步的问题，请发布带有示例代码的新问题，以便其他人看到您的问题并帮助您\
using System;
using System.Collections.Generic;
using System.Data;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

public partial class RP : System.Web.UI.Page
{
    private const int ContentPerTab = 20;

    private DataTable SomeDatatable;

    protected void Page_Load(object sender, System.EventArgs e)
    {   

        if (!Page.IsPostBack)
        {
            //1) Load SomeDatatable from Database somehow
            // Just for testing : replace with query to DB
            SomeDatatable = new DataTable("x");
            SomeDatatable.Columns.Add(new DataColumn("ContentIndex", Type.GetType("System.Int32")));
            SomeDatatable.Columns.Add(new DataColumn("Name", Type.GetType("System.String")));
            for (int x = 1; x <= 50; x++)
            {
                SomeDatatable.Rows.Add(new object[] {
                x,
                "Content " + x
            });
            }
            ///////////////////

            //2) Create a dummy data source for the tab repeater using a list of anonymous types
            List<object> TabList = new List<object>();


            for (int I = 0; I < Math.Ceiling((decimal)SomeDatatable.Rows.Count / (decimal)ContentPerTab); I++)
            {
                TabList.Add(new { TabIndex = I });
            }

            TabRepeater.ItemDataBound += TabRepeater_ItemDataBound;
            TabRepeater.DataSource = TabList;
            TabRepeater.DataBind();

            TablLinkRepeater.DataSource = TabList;
            TablLinkRepeater.DataBind();
        }
    }



    protected void TabRepeater_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item | e.Item.ItemType == ListItemType.AlternatingItem)
        {
            int TabIndex = -1;
            int.TryParse(DataBinder.Eval(e.Item.DataItem, "TabIndex").ToString(), out TabIndex);

            //Copy Content Rows from SomeDatable that belong to this tab
            DataTable Dt = SomeDatatable.Clone();
            for (Int32 i = TabIndex * ContentPerTab; i <= (TabIndex + 1) * ContentPerTab - 1; i++)
            {
                if (i >= SomeDatatable.Rows.Count) break;

                Dt.ImportRow(SomeDatatable.Rows[i]);
            }

            // Find the content repeater in this item and use the new datatable as source
            Repeater ContentRepeater = (Repeater)e.Item.FindControl("ContentRepeater");

            ContentRepeater.ItemDataBound += ContentRepeater_ItemDataBound;

            ContentRepeater.DataSource = Dt;
            ContentRepeater.DataBind();
        }
    }

    //This handler might be needed for content repeater, included just for testing 
    protected void ContentRepeater_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item | e.Item.ItemType == ListItemType.AlternatingItem)
        {
            //Read coulmn from Datarow
            int ContentIndex = -1;
            int.TryParse(DataBinder.Eval(e.Item.DataItem, "ContentIndex").ToString(), out ContentIndex);

            // Find some label
            Label Name = (Label)e.Item.FindControl("Name");
            Name.Text = "Content #" + ContentIndex;
        }
    }
}