通过带有 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 clickgetClientMap(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);