Dynamically add HTML LI Tags on Button click in ASP.Net

Ikramsha...

SOLVED CLOSED ACTIVE ANSWERED
User: Ikramshams
Posted: on Feb 10, 2014 01:53 AM
Forum: HTML and CSS
Answer: 1
Views: 12717

when my page is loaded, i have one <li> in <ul>.

<div id="prograss">
  <ul>
   <li></li>
  </ul>
</div>

on each "Next" button click, i want to increase one <li></li>. eg. If you first time click "Next" button then it will be like below:

<div id="prograss">
  <ul>
   <li></li>
   <li></li> 	
  </ul>
</div>

How i will do it  using ASP.Net,C#, please guide me.

You can see in the below url:

http://www.kidzworld.com/quiz/what-diet-is-best-for-me/question/5370

Download FREE API for Word, Excel and PDF in ASP.Net

Azim

0 3

Reply
ANSWER
User: Azim
Replied: on Feb 10, 2014 08:11 AM
Modified: on Feb 10, 2014 08:12 AM
Report

I have used Repeater to display no and ViewState for increamenting the values.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #prograss
        {
            float: left;
            width: 500px;
            height: 38px;
            margin: 50px 0 0 50px;
            border: #999 solid 1px;
            background-color: #FFF;
            border-radius: 5px;
            -moz-border-radius: 5px;
            background-color: #CCC;
            padding-left: 1px;
        }
        #prograss ul
        {
            float: left;
            list-style: none;
            width: 100%;
        }
        
        #prograss ul li
        {
            float: left;
            width: 47px;
            height: 36px;
            margin-right: 1px;
            padding: 0;
            background: #84d800;
            display: block;
            border-radius: 5px;
            -moz-border-radius: 5px;
            border: #090 solid 1px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Repeater ID="Repeater1" runat="server">
            <HeaderTemplate>
                <div id="prograss">
                    <ul>
            </HeaderTemplate>
            <ItemTemplate>
                <li>
                    <%# Eval("QuestionNo")%>
                </li>
            </ItemTemplate>
            <FooterTemplate>
                </ul> </div>
            </FooterTemplate>
        </asp:Repeater>
        <br />
        <br />
        <br />
        <asp:Button ID="btnNext" runat="server" OnClick="NextQuestion" Text="Next Question" />
    </div>
    </form>
</body>
</html>

C#:

protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("QuestionNo", typeof(int));
            dt.Rows.Add(1);
            this.Repeater1.DataSource = dt;
            this.Repeater1.DataBind();
            ViewState["Table"] = dt;
            ViewState["QuestionNo"] = 1;
        }
    }

    protected void NextQuestion(object sender, EventArgs e)
    {
        ViewState["QuestionNo"] = Convert.ToInt32(ViewState["QuestionNo"]) + 1;
        DataTable dt = (DataTable)ViewState["Table"];
        dt.Rows.Add(Convert.ToInt32(ViewState["QuestionNo"]));
        this.Repeater1.DataSource = dt;
        this.Repeater1.DataBind();
        ViewState["Table"] = dt;
    }

Thank You.

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Dynamically add HTML LI Tags on Button click in ASP.Net

Company

Explore

Follow us

Contact Us