从表行读取的asp​​.net mvc弹出模式

Question

我可以成功地将我选择的表格行读取到我的弹出模式中，但是如果我要将我的按钮移动到从 javascript 动态读取表格行，我的所有字段都将变为空或没有读取选定的表格。

这里是我的 Javascript，它构建了我的表格行以及我的按钮更新以调用弹出模式：

 $.get("/Home/GetItem", function (data) {
    tempDIM = JSON.parse(data);
    if (tempDIM[0]["status"] == "SUCCESS") {
        for (var i = 1; i < tempDIM.length - 1; i++) {
            $("#TableBody").append("<tr>" +
                "<th scope='row'>" + (i + 1) + "</th>" +
                "<td id='" + tempDIM[i]["id"] + "'>" + tempDIM[i]["id"] + "</td>" +
                "<td>" + tempDIM[i]["name"] + "</td>" +
                "<td>" + tempDIM[i]["address"] + "</td>" +
                "<td>" + tempDIM[i]["age"] + "</td>" +
                "<td>" + tempDIM[i]["status"] + "</td>" +
                '<td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Update</button></td>' +                        
                "</tr > ");
        }
    }
});

模态：

<table class="table" style="margin-top:10px">
        <thead>
            <tr>                    
                <th>id</th>
                <th>name</th>
                <th>address</th>
                <th>age</th>
                <th>status</th>
            </tr>
        </thead>
    </table>



   <table class="table table-striped" id="tBody">
       <tbody id="TableBody"></tbody>
    </table>



 <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-target="#exampleModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"><b>Update Selected Details</b></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>id:</label>
                        <input type="text" id="id" disabled />
                    </div>
                    <div class="form-group">
                        <label>name :</label>
                        <input type="text" id="name" disabled />
                    </div>
                    <div class="form-group">
                        <label>address :</label>
                        <input type="text" id="address" disabled />
                    </div>
                    <div class="form-group">
                        <label>age:</label>
                        <input type="text" id="age" disabled />
                    </div>
                    <div class="form-group">
                        <label>status:</label>
                        <input type="text" id="status" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" id="btnSave" onclick="SaveChanges()" class="btn btn-primary" data-dismiss="modal">Save changes</button>

                </div>
            </div>
        </div>
    </div>

还有我用于读取表格的脚本：

 $(function () {
        $(".btn").click(function () {

            var $row = $(this).closest("tr"),       // Finds the closest row <tr>
                $tds = $row.find("td");             // Finds all children <td> elements

            $("#id").val($row.find('td:eq(0)').text())
            $("#name").val($row.find('td:eq(1)').text())
            $("#address").val($row.find('td:eq(2)').text())
            $("#age").val($row.find('td:eq(3)').text())
            $("#status").val($row.find('td:eq(4)').text())

        });
    }); 

任何建议或提示为什么我从弹出模式中获取空值。 TIA

Answer 1

假设您的表格包含正确的数据，$(".btn").click() 事件处理程序似乎是错误的，因为您可能会在表格行之外调用带有class="btn" 的其他按钮（即<button type="button" id="btnSave" ...>）。您应该改为处理来自exampleModal 的show.bs.modal 事件，然后迭代行元素并将所有值放入按列索引排序的相应<input> 元素中，如下例所示：

$("#exampleModal").on('show.bs.modal', function (e) {
    var $button = $(e.relatedTarget);
    var $row = $button.closest("tr");
    var $tds = $row.find("td");

    $.each($tds, function(i, value) {
        $("input:eq(" + i + ")").val($(this).text());
    });
});

注意：如果您想在模态框内提交文本框值，请避免使用disabled 阻止值被发布的属性，请改用readonly，例如<input type="text" id="id" readonly="readonly" />.

工作示例（简化）：.NET Fiddle

相关问题：

Click button on row of the table and show values in modal-window