从另一个操作中获取html代码，并通过javascript操作代码

Getting html code from another action and manipulate the code throught javascript

本文关键字：操作 代码 javascript html 另一个 获取      更新时间：2023-09-26

我有一个cshtml视图文件，其中包含以下代码：

    <ul id="ul1">
        <li id="ul1li1"></li>
        <li id="ul1li2"></li>
        <li id="ul1li3"></li>
    </ul>

还有一个操作"x"，它向我返回html代码，其中有几个div。类似于：

    <div class="xdiv"></div>
    <div class="xdiv"></div>
    <div class="xdiv"></div>
    <div class="xdiv"></div>
    <div class="xdiv"></div>

我想使用javascript函数，以循环升序将我从操作"X"中获得的div放入lis中。我找不到合适的解决方案，到目前为止，我的javascript函数是这样的：

    function fillLis()
    {
        var i = 0;
        divs = @Url.Action("X");
        for(ind in divs){
            div = divs[ind];
            i = i%3 + 1;
            var currentli = document.getElementById('ul1li'+i);
            currentli.innterHTML += div.innerHTML;
        }
    };

由于一些糟糕的html编码，我不得不这样做。

这不是你想的那样：

divs = @Url.Action("X");

它只会解析为一个字符串（和一个语法错误），例如：

divs = /Home/X;

您想要做的是对该操作发出AJAX请求。（注意：由于您使用的是ASP.NET，我假设jQuery是一个选项。）类似于以下内容：

$.get('@Url.Action("X")', function (data) {
    // update your UI
});

在该回调函数中，data将包含来自服务器的响应。在这种情况下，应该是HTML。在这一点上，看起来您想要在div元素上循环。因此，您可能可以将它包装在一个jQuery对象中，并在其上循环。类似这样的东西：

$.get('@Url.Action("X")', function (data) {
    var divs = $('div', data);
    // at this point "divs" is a list of div HTML elements in the response
});

您的现有代码应该在divs阵列上工作，也许需要通过调试进行一些小的调整。但本质上，这就是您从服务器获取所需HTML元素的方式，以便在客户端代码中使用这些元素。

类似的东西？

Array.prototype.forEach.call(@Url.Action("X"), function(xdiv, i) {
    document.getElementById("ul1li"+i).appendChild(xdiv);
});

如果没有，请更新你的问题，更详细的信息，你正在尝试做什么。

关于您的代码的一些快速注释：

function fillLis()
    {
        var i = 0;
        divs = @Url.Action("X");
        for(ind in divs){
            div = divs[ind];
            // This will always be equal to 1
            i = i%3 + 1;
            // You say you want to "put the divs [...] into the list", but it seems like you're trying to transfer only the content of your divs
            var currentli = document.getElementById('ul1li'+i);  
            currentli.innterHTML += div.innerHTML;
        }
    };
相关文章：