asp.net mvc всплывающее модальное чтение из строки таблицы

Question

asp.net mvc всплывающее модальное чтение из строки таблицы

1

Я могу успешно прочитать мою выбранную строку таблицы для моего всплывающего модального, но если я собираюсь переместить мою кнопку на динамическое чтение строки таблицы из 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 > ");
        }
    }
});

Modal:

<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())

        });
    });

Любое предложение или комментарии, по которым я получаю нулевое значение из моего всплывающего мода. ТИА

Rock n' Roll 30 окт. 2018, в 05:03

Источник

0

Попробуйте использовать $.each() вместо JSON.parse и цикла for JSON.parse ответа. В какой части вы получаете нулевое значение?
Tetsuya Yamamoto 30 окт. 2018, в 03:52
0

все мои поля в модале получают нулевое значение
Rock n' Roll 30 окт. 2018, в 04:19
0

Вы имеете в виду tempDIM[0]["status"] и другие tempDIM[0]["somekey"] содержат tempDIM[0]["somekey"] вместо выбранных данных? Можете ли вы предоставить GetItem действия GetItem ?
Tetsuya Yamamoto 30 окт. 2018, в 05:24
0

Мой GetItem - это просто запрос, который возвращает список и преобразует его в jason для анализа в строке таблицы.
Rock n' Roll 30 окт. 2018, в 05:29
0

Также в вашем примере не существует тега <table> действительно ли целевая таблица существует? Еще выясните, какие недостающие фрагменты вы здесь не представили, но можете сделать нулевые значения.
Tetsuya Yamamoto 30 окт. 2018, в 05:35
0

Я обновил теперь мой вопрос, теперь вы можете увидеть мою таблицу поверх моего модального
Rock n' Roll 30 окт. 2018, в 05:43
0

Ваши результаты возвращают [object Object] (т.е. таблица не заполняется строками из JsonResult )? Попробуйте поместить console.log(data) и посмотрите, содержат ли data строку JSON или список объектов.
Tetsuya Yamamoto 30 окт. 2018, в 06:46
0

да, я могу видеть данные и подтвердил, что они не возвращают [Object Object], мой подозреваемый - моя функция получения идентификатора, имени и т. д., который не читает. Я попытался предупредить строку $ и увидеть, что нет результата
Rock n' Roll 30 окт. 2018, в 07:46
0

Ну, я предположил, что таблица на данный момент содержит данные, поэтому я думаю, что вы используете неправильный селектор и обработчик событий. Я предоставил подробности в следующем примере.
Tetsuya Yamamoto 30 окт. 2018, в 09:21

Показать ещё 7 комментариев

Теги:

javascript

asp.net

bootstrap-modal

asp.net-mvc

1 ответ

Ещё вопросы

Попробуйте использовать $.each() вместо JSON.parse и цикла for JSON.parse ответа. В какой части вы получаете нулевое значение?
все мои поля в модале получают нулевое значение
Вы имеете в виду tempDIM[0]["status"] и другие tempDIM[0]["somekey"] содержат tempDIM[0]["somekey"] вместо выбранных данных? Можете ли вы предоставить GetItem действия GetItem ?
Мой GetItem - это просто запрос, который возвращает список и преобразует его в jason для анализа в строке таблицы.
Также в вашем примере не существует тега <table> действительно ли целевая таблица существует? Еще выясните, какие недостающие фрагменты вы здесь не представили, но можете сделать нулевые значения.
Я обновил теперь мой вопрос, теперь вы можете увидеть мою таблицу поверх моего модального
Ваши результаты возвращают [object Object] (т.е. таблица не заполняется строками из JsonResult )? Попробуйте поместить console.log(data) и посмотрите, содержат ли data строку JSON или список объектов.
да, я могу видеть данные и подтвердил, что они не возвращают [Object Object], мой подозреваемый - моя функция получения идентификатора, имени и т. д., который не читает. Я попытался предупредить строку $ и увидеть, что нет результата
Ну, я предположил, что таблица на данный момент содержит данные, поэтому я думаю, что вы используете неправильный селектор и обработчик событий. Я предоставил подробности в следующем примере.

Tetsuya Yamamoto · Accepted Answer · 2018-10-30T06-55-00.000Z

Предположим, что ваша таблица содержит правильные данные, $(".btn").click() Обработчик события $(".btn").click() кажется неправильным, потому что вы можете вызывать другую кнопку с class="btn" вне строки таблицы (т.е. <button type="button" id="btnSave"...>). Вы должны обработать событие show.bs.modal из exampleModal вместо этого, затем итерации элементов строки и поместить все значения в соответствующие элементы <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 вместо этого используйте readonly например: <input type="text" id="id" readonly="readonly"/>.

Рабочий пример (упрощенный): .NET Fiddle

Связанный выпуск:

Нажмите кнопку в строке таблицы и покажите значения в модальном окне.