首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >通过具有剃刀功能的jQuery实现的动态超文本标记语言

通过具有剃刀功能的jQuery实现的动态超文本标记语言
EN

Stack Overflow用户
提问于 2018-06-02 03:28:25
回答 1查看 87关注 0票数 0

通过使用jQuery,我使用.append将一组<ul>元素动态添加到<div>中。我循环遍历一个表,其中包含我想要添加的每个<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>

上面的超文本标记语言是由我的.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>,而不是编写代码更改。

任何关于如何使这项工作(或替代方法)的建议都是值得感谢的。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-02 03:39:12

jQuery在客户端机器上运行,所以当您使用它生成Razor代码时,客户端机器不能运行该代码,因为它必须在服务器上运行。

您可以直接将剃刀代码放在应该放置的位置,然后使用jQuery根据需要显示/隐藏选项。

或者,将Ajax方法ClientMap更改为返回部分视图而不是JSON字符串,然后使用jQuery的html()函数添加从Ajax返回的HTML:

$('#divDetails').html(data);
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50649941

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档