在 ASP.NET 核心 MVC 中動態添加行不起作用

Question

在 for 循環中參考下面的代碼，最后在 javascript 中......

當我單擊添加按鈕添加一行時，會發生一些事情......

刪除按鈕不可見。

添加和刪除按鈕 id 都不會改變，它們應該按順序迭代。 似乎“-@i”在按鈕的 id 標簽中不起作用。 添加的每一行都將按鈕 id 顯示為“-0”，但每行應該是 -0、-1、-2 等。

js控制台顯示錯誤“Uncaught TypeError: delbtn is null”

當我單擊添加按鈕時，行會添加，並且“體驗”輸入正在正確迭代。

任何幫助是極大的贊賞。

這是 Create.cshtml 代碼

@model ResumeManager.Models.Applicant

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

<h1>Create</h1>

<h4>Applicant</h4>
<hr />

<div class="col-11 mx-auto p-0">
<div class="card">
    <div class="card-header bg-primary text-uppercase text-white" style="height:45px;">
        <h4>Create Applicant</h4>
    </div>
    <form asp-action="Create">
    <div class="row">
        <div class="col-md-6">
        <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>
    <div class="col-md-6">

        <div class="form-group">
            <label asp-for="Gender" class="control-label"></label>
            <input asp-for="Gender" class="form-control" />
            <span asp-validation-for="Gender" class="text-danger"></span>
        </div>
    </div>
    <div class="col-md-6">
        <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>
    <div class="col-md-6">
        <div class="form-group">
            <label asp-for="Qualification" class="control-label"></label>
            <input asp-for="Qualification" class="form-control" />
            <span asp-validation-for="Qualification" class="text-danger"></span>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label asp-for="TotalExperience" class="control-label"></label>
            <input asp-for="TotalExperience" class="form-control" />
            <span asp-validation-for="TotalExperience" class="text-danger"></span>
        </div>
    </div>


    <div class="col-md-12">
        <table class="table" id="ExpTable">
            <thead>
                <tr>
                    <th>Company Name</th>
                    <th>Designation</th>
                    <th>Years Worked</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                
                @for (int i = 0; i < Model.Experiences.Count; i++)
                {
               <tr>
                   <td>
                       @Html.EditorFor(x => x.Experiences[i].CompanyName, new {htmlAttributes = new {@class="form-control"}})
                       
                   </td>
                    <td>
                       @Html.EditorFor(x => x.Experiences[i].Designation, new {htmlAttributes = new {@class="form-control"}})
                       
                    </td>
                    <td>
                        @Html.EditorFor(x => x.Experiences[i].YearsWorked, new {htmlAttributes = new {@class="form-control"}})
                        
                    </td>

                    <td>
                        <button id="btnadd-@i" type="button" class="btn btn-small btn-secondary visible"
                            onclick="AddItem(this)">Add</button>
                        <button id="btnremove-@i" type="button" class="btn btn-small btn-danger invisible"
                            onclick="DeleteItem(this)">Delete</button>
                    </td>

               </tr>   
               }
            </tbody>
        </table>

        <input type="hidden" id="hdnLastIndex" value="0" />

        </form>
    </div> 

    <div class="col-12 btn-group">
        <div class="col-6 form-group text-right p-2">
            <a asp-action="Index" class="btn btn-secondary">Back</a>
        </div>
        <div class="col-6 form-group text-left p-2">
            <input type="submit" value="Create" class="btn btn-primary"> 
        </div>
    </div>
    </div>
    
</div>
</div>



<div>
<a asp-action="Index">Back to List</a>
</div>

@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

<script type="text/javascript">

    function DeleteItem(btn){
        $(btn).closest("tr").remove();
    }
    
    function AddItem(btn){
        var table = document.getElementById("ExpTable");
        var rows = table.getElementsByTagName("tr");

        var rowOuterHtml = rows[rows.length - 1].outerHTML;

        var lastrowIdx = document.getElementById("hdnLastIndex").value;
        var nextrowIdx = eval(lastrowIdx) + 1;
        document.getElementById("hdnLastIndex").value = nextrowIdx;

        rowOuterHtml = rowOuterHtml.replaceAll("_" + lastrowIdx + "_", "_" + nextrowIdx + "_");
        rowOuterHtml = rowOuterHtml.replaceAll("[" + lastrowIdx + "]", "[" + nextrowIdx + "]");
        rowOuterHtml = rowOuterHtml.replaceAll("-" + lastrowIdx + "-" + nextrowIdx);

        var newRow = table.insertRow();
        newRow.innerHTML = rowOuterHtml;

        var btnAddID = btn.id;
        console.log(btnAddID);
        var btnDeleteid = btnAddID.replaceAll("btnadd", "btnremove");
        console.log(btnDeleteid);

        var delbtn = document.getElementById("btnDeleteid");
        delbtn.classList.add("visible");
        delbtn.classList.remove("invisible");
        
        var addbtn = document.getElementById("btnAddID");
        addbtn.classList.remove("visible");
        addbtn.classList.add("invisible");

    }

</script>
}

Answer 1

嘗試像這樣更改您的js：

function AddItem(btn){
        var table = document.getElementById("ExpTable");
        var rows = table.getElementsByTagName("tr");

        var rowOuterHtml = rows[rows.length - 1].outerHTML;

        var lastrowIdx = document.getElementById("hdnLastIndex").value;
        var nextrowIdx = eval(lastrowIdx) + 1;
        document.getElementById("hdnLastIndex").value = nextrowIdx;

        rowOuterHtml = rowOuterHtml.replaceAll("_" + lastrowIdx + "_", "_" + nextrowIdx + "_");
        rowOuterHtml = rowOuterHtml.replaceAll("[" + lastrowIdx + "]", "[" + nextrowIdx + "]");
        rowOuterHtml = rowOuterHtml.replaceAll("-" + lastrowIdx , "-" + nextrowIdx);

        var newRow = table.insertRow();
        newRow.innerHTML = rowOuterHtml;

        var btnAddID = btn.id;
        console.log(btnAddID);
        var btnDeleteid = btnAddID.replaceAll("btnadd", "btnremove");
        console.log(btnDeleteid);

        var delbtn = document.getElementById(btnDeleteid);
        delbtn.classList.add("visible");
        delbtn.classList.remove("invisible");
        
        var addbtn = document.getElementById(btnAddID);
        addbtn.classList.remove("visible");
        addbtn.classList.add("invisible");

    }