Can a <div> be generated on the fly like a class?

Question

User2142845853 posted

I have an MVC edit page that has a collection of <div>s and in each one a series of html.EditorFor(group1Inputbox1), about 10 EditorFor's in each div mapped to a model & database table. 

But I want to show them as needed, and be able to insert one between 2 others like the Excel function (insert before, insert after). 

In each group area div there are 2 buttons: Add new and Delete. if Add new is clicked, a group1 set of textboxes appears. if I click Add again, now it creates group2 and whatever was in group1 goes to 2 and now group1 is blank.  So the contents of the groups have to move up, down or get deleted (hopefully with a warning).

Whats hardwired are the group(number 1 - 20), so they map into the database table.  if there were 5 groups filled in and the user clicked delete under group3, then 4, 5 would shift up; the 5th box would disappear. Is there a factory for this? 

Answer 1

User1520731567 posted

HI rogersbr,

Can a <div> be generated on the fly like a class?

I suggest that you could use html() method to generate <div> quickly .

According to your description, I make a demo, you could take it as a reference.

Controller:

  public ActionResult AddDeleteRow()
        {
            

            var options = new List<Label>();

            options.Add(new Label() { LabelId = 11, LabelName = "lab1" });

            options.Add(new Label() { LabelId = 12, LabelName = "lab2" });

            options.Add(new Label() { LabelId = 13, LabelName = "lab3" });
           
            return View(options);

        }

View:

@model List<WebApplication1.Models.Label>

@{

    ViewBag.Title = "AddDeleteRow";

}



<h2>AddDeleteRow</h2>











@foreach (var item in Model)

{

    var i = 0;

    int index = Model.IndexOf(item);

    if (index == (Model.Count - 1))

    {

        <div class="divdemo">

            <h3><lable>Group</lable>@(index + 1)</h3>

            <div class="divsubdemo">

                <div class="divinput" style="display:inline">



                    @Html.EditorFor(itemModel => item.LabelId)

                    @Html.EditorFor(itemModel => item.LabelName)

                </div>

                <div class="divbtn" style="display:inline">

                    <input type="button" value="addnew" class="addbtn" onclick="btnAdd(this)" style="display:inline">

                    <input type="button" value="Delete" class="deletebtn" id="btnRemove" style="display:inline">

                </div>

            </div>

        </div>



    }

    else

    {

        <div class="divdemo">

            <h3><lable>Group</lable>@(index + 1)</h3>

            <div class="divsubdemo">

                <div class="divinput" style="display:inline">



                    @Html.EditorFor(itemModel => item.LabelId)

                    @Html.EditorFor(itemModel => item.LabelName)

                </div>

                <div class="divbtn" style="display:inline">

                    <input type="button" value="addnew" class="addbtn" onclick="btnAdd(this)" style="display: none;">

                    <input type="button" value="Delete" class="deletebtn" id="btnRemove" style="display:inline">

                </div>

            </div>

        </div>



    }





}

@section scripts{

    <script>



        $("body").delegate(".addbtn", "click", function () {

            var html = $(this).parent().parent().html();



            $(this).parent().find(".addbtn").hide();

            $(this).parent().parent().parent().after("<div class=\"divdemo\"><h3><lable>Group</lable>" + ($(".divdemo").length + 1) + "</h3><div class=\"divsubdemo\">" + html + "</div></div>");

        })



        $("body").delegate(".deletebtn", "click", function () {

            if ($(this).parent().find(".addbtn").attr("style") == "display: none;") {

                $(this).parent().parent().parent().remove();

                for (var i = 0; i < $(".divdemo").length; i++) {

                    $(".divdemo h3").eq(i)[0].childNodes[1].textContent = (i + 1);

                }

            }

            else

            {

                $(this).parent().parent().parent().prev().find(".addbtn").css("display","inline");

                $(this).parent().parent().parent().remove();

                for (var i = 0; i < $(".divdemo").length; i++) {

                    $(".divdemo h3").eq(i)[0].childNodes[1].textContent = (i + 1);

                }



            }

        })

    </script>

}

How it works:

https://s31.postimg.cc/cxz4ta2x7/addnew_delete1.gif

In addition,If you want to add blank lines, you could modify after() method in click event for $(".addbtn").

If you have any question, please do not hesitate to contact me.

Answer 2

User2142845853 posted

Thanks. just not sure how you made it work not following it at all.  will try to run this on a local machine.  have never seen use of .parent.parent.parent before