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

Question

使用 jQuery，我动态地将一组<ul>元素添加到<div>using .append。我遍历一个包含<ul>我想要添加的每个值的表。那部分工作正常。我遇到问题的地方是尝试向<li>元素添加 Razor 功能。

尽管生成的最终结果 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);