通过带有 Razor 功能的 jQuery 动态 HTML

Question

使用 jQuery，我正在使用 .append 将一组 <ul> 元素动态添加到 <div>。我循环遍历一个包含我要添加的每个<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 字符串，然后使用 jQuery 的 html() 函数添加从 Ajax 返回的 HTML：

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