Динамический HTML через JQuery с функциональностью Razor

Question

Используя jQuery, я динамически добавляю группу <ul> элементов к <div>, используя .append.Я перебираю таблицу, содержащую значение для каждого <ul>, который я хочу добавить.Эта часть отлично работает.При возникновении проблемы я пытаюсь добавить функциональность Razor к элементам <li>.

Хотя конечный результат, полученный HTML, выглядит как правильный синтаксис HTML, код Razor не работает.

Конечный результат HTML:

<div id="div_1">
    <label>Clients</label>
    <ul>
        @if (Model.details != null)
        {
            foreach (var itm in Model.details.OrderBy(i => i.value))
        {
            <li>@itm.value</li>}
        }
    </ul>
</div>

HTML-код выше - это то, что создается моим .append кодом.Он может быть жестко запрограммирован на моей странице cshtml и отлично работает.Добавление его через .append во время выполнения, разве я предполагаю, не вращается вокруг времени создания или последовательности?

Уменьшенная версия моего кода ниже:

Контроллер:

[HttpGet]
public JsonResult ClientMap()
{
    var db = new EDM_Client();
    List<client_map> map = new List<client_map>();
    map = db.client_map.ToList();

    return Json(map, JsonRequestBehavior.AllowGet);
}

csHTML:

<div id="divDetails" class="row">
</div>

jQuery:

//getClientMap temporarily called from a button click
getClientMap(function (map) {
    $.each(map, function (idx, obj) {
        $('#divDetails').append('<div id="div_' + obj.detail_id + '">' +
                                    '<label>' + obj.detail_hdr + '</label>' +
                                    '<ul>' +
                                        '@if (Model.details != null)' +
                                        '{' +
                                            'foreach (var itm in Model.details.OrderBy(i => i.value))' +
                                            '{' +
                                                '<li>' +
                                                    '@itm.value' +
                                                '</li>' +
                                             '}' +
                                         '}' +
                                     '</ul>' +
                                 '</div>');           
    });
});

function getClientMap(output) {
$.ajax({
    url: './Client/ClientMap',
    type: "GET",
    dataType: "json",
    async: false,
    success: function (data) {            
        output(data);
    }
});

Я пытаюсь сделать это динамически, чтобы <ul> можно было легко добавлять / удалять с помощью записей таблицы, а не изменений кодирования.

Любой совет о том, как сделать эту работу (или альтернативный способ) приветствуется.

Answer 1

jQuery запускается на компьютере клиента, поэтому, когда вы используете его для генерации кода Razor, клиентский компьютер не может запустить этот код, потому что он должен запускаться на сервере.

Вы можете поместить код Razor непосредственно там, гдетак и должно быть, а затем используйте jQuery, чтобы отобразить / скрыть необходимые параметры.

В качестве альтернативы, измените метод Ajax ClientMap, чтобы он возвращал частичное представление вместо строки JSON, затем используйте функцию html() jQueryчтобы добавить HTML-код, возвращенный из Ajax:

$('#divDetails').html(data);