Как правильно добавить строку в таблицу, содержащую элементы asp с помощью jQuery? - PullRequest
0 голосов
/ 18 декабря 2018

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

По сути, в моем файле cshtml есть следующее:

<tbody>
    @for (int i = 0; i < Model.ProgrammeScores.Count; i++)
    {
        <tr>
            <td>
                <input type="hidden" asp-for="@Model.ProgrammeScores[i].Id" />
                <input type="text" asp-for="@Model.ProgrammeScores[i].FileDate" name="@Model.ProgrammeScores[i].FileDate" class="datepicker form-control" aria-describedby="calendar-addon" />
            </td>
            <td>
                <select asp-for="@Model.ProgrammeScores[i].ScoreId" name="@Model.ProgrammeScores[i].ScoreIds" asp-items="@Model.Scores" id="ScoreIds" class="select-picker create-select"></select>
            </td>
            <td>
                <textarea class="form-control" rows="2" asp-for="@Model.ProgrammeScores[i].Comments"></textarea>
            </td>
            <td>
            </td>
        </tr>
    }
</tbody> 

@Model.Scores - это IList<SelectListItem>

Затем у меня есть кнопка, которая добавляет новую строку в таблицу с пустыми значениями, которую я хочу редактировать, и, следовательно, позволяю мне добавить новый счет в программу встроенной в фактической таблице.

Функция Javascript, которая добавляет строку в таблицу, выглядит следующим образом (я знаю, что я неправильно пытаюсь использовать код Razor здесь - здесь мне нужна помощь)

function addScorecard() {
    var rowCount = parseInt($('#numOfScores').val());
    var scoreTable = $('#programme-score-table');
    var row = $([
        '<tr>',
        '<td>',
        '<input type="hidden" asp-for="@Model.ProgrammeScores[' + rowCount + '].Id" />',
        '<input type="text" asp-for="@Model.ProgrammeScores[' + rowCount + '].FileDate" name="@Model.ProgrammeScores[' + rowCount + '].FileDate" class="datepicker form-control" aria-describedby="calendar-addon" />',
        '</td>',
        '<td>',
        '<select asp-for="@Model.ProgrammeScores[' + rowCount + '].ScoreId" name="@Model.ProgrammeScores[' + rowCount + '].ScoreIds" asp-items="@Model.Scores" id="ScoreIds" class="select-picker create-select"></select>',
        '</td> ',
        '<td>',
        '<textarea class="form-control" rows="2" asp-for="@Model.ProgrammeScores[' + rowCount + '].Comments"></textarea>',
        '</td> ',
        '<td>',
        '</td>',
        '</tr>'
    ].join("\n"));

    scoreTable.append(row);
}

Итакмой общий вопрос: как правильно реализовать эту функцию, чтобы при добавлении новой строки в таблицу ячейки правильно связывались со своими полями в модели, например, Select правильно сопоставлялся с @Model.ProgrammeScores[i].ScoreId, а также asp-items, полученные из @Model.Scores, правильно установлены в качестве параметров в раскрывающемся списке select.

Я уже начал пытаться передать @Model.Scores из cshtml до js с использованием <script> var scores = '@Html.Raw(Json.Serialize(Model.Scores))'; </script>, но я все еще не смог заставить asp-items работать на выпадающем меню.

Большое спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...