CODEWITHSUNDEEP
c#asp.netdynamic
Jack
Jack

Reputation: 7

Dynamically Create a specific div with its children in C#

I'm sorry in advance if this seems to be a beginners question and wasted some of your time, but it does really bother me and I would really appreciate it if someone could help.

I'm simply creating a "zone" if you will, where the user inputs a word/sentence which are tasks, and then can check if the task was completed or not and/or if the word/sentence needs to be changed.

So in the end, what I need is a textbox lets say where the user inputs a specific number supposed x, and generates x times this div.

Here is the code (unfortunately I could not post pics since I do not have enough reputation..)

ASP.NET code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="GMode.tiz.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>whatevz</title>
    <link href="StyleSheet1.css" rel="stylesheet" />
    <script src="../jquery-1.11.3.min.js"></script>
    <script src="../functions.js"></script>


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

        <div class="singleContainer">
            <div class="lblPlace">
                <asp:Label ID="lbl" runat="server" Text="Input Task"></asp:Label>
                <asp:TextBox ID="hi" CssClass="txtBox" runat="server"></asp:TextBox>
            </div>
            <asp:Button ID="save" runat="server" CssClass="UniversalBtn" OnClick="btnCheck_Click" />
            <asp:Button ID="cancel" runat="server" CssClass="UniversalBtn" OnClick="btnCancel_Click" />
            <asp:Button ID="edit" runat="server" CssClass="UniversalBtn" />
            <asp:Button ID="submit" runat="server" CssClass="BtnSubmit" OnClick="btnSubmit_Click" Text="DONE"/>
        </div>


    </form>
</body>
</html>

C# code

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

namespace GMode.tiz
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnCheck_Click(object sender, EventArgs e)
        {
            lbl.CssClass = "done";
        }

        protected void btnCancel_Click(object sender, EventArgs e)
        {
            lbl.CssClass = "undone";
        }

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            if (hi.Text == "")
            {
                lbl.Text = "No Value";
            }
            else
            {
                lbl.Text = hi.Text;
            }
        }

    }
}

So basically I want to dynamically create <div class="singleContainer"> with everything inside it x times (x defined by the user).

I'm going about this more on the fact like it's C++. When you can dynamically create an array with a specific number x.

Please tell me if you need more of the code. There are still the css and js files that I did not post.

Thank you, Jack

Upvotes: 0

Views: 1394

Answers (2)

Manuel Bautista
Manuel Bautista

Reputation: 138

I think that for this the best option is to use AngularJS, you can do something like this:

<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js">    </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.min.js"></script>
<script>
var app = angular.module('app', [])
app.controller('PostsCtrl', function ($scope) {

$scope.change = function (){
$scope.listDivs = [];

    for(var i=0;i<$scope.createDiv;i++) {
      $scope.listDivs.push(i);
    }
}


})
</script>
</head>
   <body ng-app='app'>
   <div ng-controller='PostsCtrl' class='container'>
   <input ng-model='createDiv' ng-change="change()"/>
   <ul class='list-group'>
    <li ng-repeat="post in listDivs" class='list-group-item'>
      <div class="singleContainer">
        <div class="lblPlace">
            <asp:Label ID="lbl" runat="server" Text="Input Task">   </asp:Label>
            <asp:TextBox ID="hi" CssClass="txtBox" runat="server">   </asp:TextBox>
        </div>
        <asp:Button ID="save" runat="server" CssClass="UniversalBtn" OnClick="btnCheck_Click" />
        <asp:Button ID="cancel" runat="server" CssClass="UniversalBtn" OnClick="btnCancel_Click" />
        <asp:Button ID="edit" runat="server" CssClass="UniversalBtn" />
        <asp:Button ID="submit" runat="server" CssClass="BtnSubmit" OnClick="btnSubmit_Click" Text="DONE"/>
    </div>
   </li>
 </ul>
</div>
</body>
</html>

Upvotes: 1

Bgl86
Bgl86

Reputation: 737

Put your div into a usercontrol (ascx file).

In your main page add a placeholder:

<asp:PlaceHolder runat="server" ID="PlaceHolder1" />

in code behind you can add your control as often as you want:

yourControl= LoadControl("~/Controls/yourControl.ascx");
PlaceHolder1.Controls.Add(yourControl);

Upvotes: 0

Related Questions