如何使用c＃在div内动态创建多个div [英] how to create multiple div dynamically inside a div using c#

问题描述

，u> 这是我的.aspx页面

,u>This Is My .aspx page

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"

    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<script type ="text/javascript">


    function showcolor() {

        var ddl = document.getElementById("MainContent_DropDownList1");

        var divcolor1 = document.getElementById("MainContent_divcolor");
        
//        var color1 = document.getElementById("MainContent_clr1");
//        var color2 = document.getElementById("MainContent_clr2");
        divcolor1.style.display = "block";
//        $("#divcolor").css({ "visibility": "visible" });
//        $("#MainContent_clr1").show();
//        $("#MainContent_clr2").show();
        //        $(color2).show();
//        $('#MainContent_clr1').css({ "display": "block" ;});
//        $('#MainContent_clr2').css({ "display": "block"; });
    }


</script>

<script  type="text/javascript">
    $(document).ready(function () {
        $('#MainContent_DropDownList1').change(function () {
           
//            $('#MainContent_clr1').hide();
//            $('#MainContent_clr2').hide();
            $("#MainContent_divcolor").css({ "display": "none" });
//            $("#divcolor").css({ "visibility": "Hidden" });
            alert("hi");
//            $("#divcolor").attr('disabled', true);
        });
    });
</script>
   <div style = "width : 200px; float :left;" >
 <div  style =  "height :auto ; width : 15%; background-color : white; float :left; border : 1px solid white;">
      <div id ="divcolor"  runat="server" style =  " display :none;  height :auto ; width : 100%; background-color : white; float :left ; margin-top :20px ;">
     <%-- <div  runat="server" id ="clr1" style = "  height :15px ; width :15px ; margin :2px;"></div>
      <div  runat="server" id ="clr2"  style="  height  :15px ; width :15px ;margin :2px;"></div>--%>
      </div></div><div class ="drop" style = "float :left; width :50% "><asp:DropDownList ID="DropDownList1" runat="server" onclick = "showcolor();" >

            <asp:ListItem Value = "Blue">blue</asp:ListItem>
            <asp:ListItem Value = "red">Red</asp:ListItem>
        </asp:DropDownList> 
        </div>
        </div>You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"

            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
   
</asp:Content>

这是代码

This is code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        StringBuilder stringBuilder = new StringBuilder(string.Empty);
        System.Web.UI.HtmlControls.HtmlGenericControl NewDiv = new System.Web.UI.HtmlControls.HtmlGenericControl();
        int num = DropDownList1.Items.Count;
        for(int i = 0 ; i< DropDownList1.Items.Count ; i++)
        {
            NewDiv.ID = "Newdiv" + i + " ";
            NewDiv.Style["height"] = "15px";
            NewDiv.Style["width"] = "15px";
            NewDiv.Style["margin"] = "2px";
            NewDiv.Style["display"] = "block";

            //stringBuilder.Append("<style type ='Text/css'>#NewDiv"+ i +"{height :15px ; width :15px ; margin :2px;}</script>");
            NewDiv.Style["Background-color"] = Convert.ToString(DropDownList1.Items[i].Value);
            divcolor.Controls.Add(NewDiv);
            //var brControl1 = new System.Web.UI.HtmlControls.HtmlGenericControl { InnerHtml = "<br />" };
            //divcolor.Controls.Add(brControl1);
            
            
        }
        //clr1.Style["Background-color"] = Convert.ToString(DropDownList1.Items[0].Value);
        //clr2.Style["Background-color"] = Convert.ToString(DropDownList1.Items[1].Value);
    }
}

这是我的代码我只想在下拉列表中基于listitems创建多个div，

in this我正在做这个场景，但只有当我想要显示所有内容时才显示最后一个div。

如果在下拉列表中有两个列表项目一个是蓝色而另一个是红色然后我想创建两个div红色和蓝色但是只显示红色请帮助我如何解决这个问题

This is my code i just want to create multiple div on the base of listitems in dropdownlist ,
in this scenario i am doing this but only last div is showing when i want to show all.
if in drop down list there is two list item one is blue and other is red then i want to create two div red and blue but there is showing only red please help me how can i solve this problem

推荐答案

（＃divcolor）。css（{visibility：visible}）;
//

("#divcolor").css({ "visibility": "visible" }); //

（＃MainContent_clr1）。show（）;
//

("#MainContent_clr1").show(); //

（＃MainContent_clr2）。show（）;
//

("#MainContent_clr2").show(); //

这篇关于如何使用c＃在div内动态创建多个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！