can i duplicate a Tab item based on a number in asp.net core

Im new to asp.net core and im working on a project where I have to create a page where I have to create to duplicate Tab page based on a number.
user enters number in the textbox and based on the number tab items have to be created which carries the same form elements.
I tried with creating tab page but unable to continue the next step,
please help me with this.
thanks in advance

i have created a partial view in the following code
This is the model I pass to my view as list:

public class DbContent : ContentPage
{
    public string Name { get; set; }
    public string Age { get; set; }
    public bool Gender{ get; set; }

    public string treatment{ get; set; }
    public List<string> treatmentlist{ get; set; }
}

in the cshtml i have called my models and tried to create tab based on the treatmentlist
<div class="example">

<!-- Nav tabs -->
<ul class="nav nav-tabs">
    foreach (var merit in item.treatmentlist)
                                 {
                                     <li>@treatmentlist</li>
                                 }
</ul>
</div>

uptill here I tried to create dynamic tab page but after this I have to add the controls similar to all the tab pages.

I have stopped here,
can somebody please help me on how to copy the controls which are placed in tab1 to all the tabs , like creating a dulicate or clone the controls.

Thanks in advance

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

The code you provide is still not complete to reproduce your problem.

I made an example based on my understanding, you may take a look the below codes:

Index.cshtml:

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <label class="control-label">TabNumber:</label>
            <input id="tabNumber" type="text" class="form-control" />
        </div>
        <div class="form-group">
            <button id="addTab" class="btn btn-primary">Add Tab</button>
        </div>
    </div>

</div>


<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="tab-1" data-toggle="tab" href="#tab1" role="tab" aria-selected="true">Tab1</a>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab-1">
        @await Html.PartialAsync("_FormPartial")
    </div>
</div>

@section scripts{
    <script>
        $("#addTab").on("click", function () {
            var count = $("#myTab li").length;
            var tabnumber = $("#tabNumber").val();
            for (var i = 0; i < tabnumber; i++) {
                count++;
                var newTab = "<li class='nav-item'><a class='nav-link' id ='tab-" + count + "' data-toggle='tab' href ='#tab" + count + "' role ='tab' aria-selected='false'>Tab" + count + "</a ></li >"
                $("#myTab").append(newTab);
                var newTabContent = "<div class='tab-pane fade' id='tab" + count + "' role='tabpanel' aria-labelledby='tab-" + count + "'></div>"
                $("#myTabContent").append(newTabContent);
                loadContent(count)
            }
        })

        function loadContent(i) {
            var count = i;
            $.ajax({
                method: 'get',
                url: '/Tab/GetNewTab',
                success: function (res) {
                    $("#tab" + count).append(res);
                }
            });
        }
    </script>
}

_FormPartial.cshtml(partial view):
@model User

<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Age" class="control-label"></label>
                <input asp-for="Age" class="form-control" />
                <span asp-validation-for="Age" class="text-danger"></span>
            </div>

            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

Result:

can i duplicate a Tab item based on a number in asp.net core


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x