Отображение нескольких свойств из списка C # <T>через JavaScript для модального интерфейса

Question

У меня есть несколько свойств, поступающих из моего приложения Razor Pages / MVC, которые я хотел бы добавить в модальное представление с использованием JavaScript.Я могу заставить его работать с одной сущностью:

HTML:

<button type="button" class="nodeRowKey btn btn-info" data-toggle="modal" data-target="#confirmActivation" data-node="@item.ComputerName" id="activateNode">Activate</button>

JavaScript:

$(document).on("click", "#activateNode", function () {
    var myNodeId = $(this).data('node');
    $('#nodeId').text(myNodeId);
});

Установка свойства .text моего тега #nodeId работает отлично, однако у меня есть более одного свойства, чем просто item.ComputerName.

Очевидно, установка data-node="@item" дает строковое значение, описывающее мой тип объекта, так чтоне работает.

Нужно ли создавать кучу скрытых элементов страницы, чтобы «скрыть» значения свойств от моей модели, чтобы я мог отобразить их в модальном диалоговом окне?

Моя мысль былачтобы создать скрытые элементы HTML, каждый из которых имеет свои собственные идентификаторы, чтобы я мог заполнить целевые элементы HTML с помощью JavaScript.

ОБНОВЛЕНИЕ: Я также попытался:

data-node="@Html.Raw(JsonConvert.SerializeObject(item))

Answer 1

Вместо сериализации данных в атрибут данных на кнопке, вы можете просто сделать состояние доступным непосредственно как объект в JavaScript.

Например, вы можете визуализировать тег <script>, который содержитобъявление переменной, в которой вы отображаете данные в виде строки JSON.Примерно так:

<script>
var _modalData = @Json.Serialize(item);
</script>

И затем, внутри вашего обработчика JavaScript, вы напрямую ссылаетесь на этот объект.

Если у вас есть несколько различных элементов, для которых вы хотите иметь модальное диалоговое окно (например,внутри цикла foreach), вы можете просто визуализировать все данные сразу внутри одной переменной JavaScript (т.е. в виде массива).И затем вы можете отобразить индекс элемента в атрибуте данных, чтобы вы знали, какой элемент использовать при открытии модального окна.

Другой альтернативой будет ленивая загрузка данных с использованием запроса AJAX при открытии модального окна.Таким образом, вы избавляете от необходимости отображать все данные на странице, даже если вы не открываете ни один из модальных вариантов.

Answer 2

Вы можете попробовать это ...

@using Newtonsoft.Json;

data-node="@Html.Raw(JsonConvert.SerializeObject(item))"

Это может дать вам весь объект.Пока не могу проверить это.