在 Orchard 字段上多次 Javascript 调用

Question

我正在创建一个模块，允许用户通过创建一个包含地址的自定义字段（并在首次输入时对其进行验证）来查看一组 IP 地址的状态。在 Field 视图中，有一个根据 ping 尝试的结果而变化的字形。

How it should look

但是，我很难获得 Javascript 来 ping 地址和每个单独的字段以正确传递参数。出于某种原因，只有来自第一个字段的地址被传递给 Javascript，而不是使用来自每个单独字段的地址。

How it looks when only one address gets passed

我检查了带有 Firebug 的页面，发现 onload 参数已正确收集和发送，但 Javascript 仅接收第一个字段的内容。由于 Javascript 使用参数来确定要更改的 DOM，因此只有第一个 DOM 会被更改。

我还通过使 spanIDHolder 和 addressHolder 跨度可见并让 Javascript 警报包含这两个跨度的内容来确认值传递不正确。 HTML 显示正确的值，但警报只显示第一个。

视图代码如下：

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
@{
    string ipaddress = Model.ContentField.Value;
    string spanID = ipaddress + "span";
    bool showPingResult = Model.ContentField.ShowPing;
}
<body>
    @{
        if (!string.IsNullOrEmpty(ipaddress)) {
            if (showPingResult) {
                <span id="addressHolder" style="display:none">@ipaddress</span>
                <span id="spanIDHolder" style="display:none">@spanID</span>
                <span id="@spanID">
                    <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
                </span>
            }
            <span class="text-field">@ipaddress</span>
        }
    }
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script>
        var address = document.getElementById("addressHolder").innerText;
        var id = document.getElementById("spanIDHolder").innerText;

        function setPingResult() {
            var elem = document.getElementById(id);
            elem.innerHTML = '<div class="glyphicon glyphicon-ok-sign" aria-hidden="true"></div>';
        }

        $(document).ready(function () {
            setPingResult();
        });
    </script>

</body>

暂时简化了Javascript，直到我可以正确传递参数，所以'address'没有被使用。

到目前为止我尝试过的事情：

包含 Javascript 代码的其他方法，例如内联或将其包含在 HTML 中，如所讨论的 here
通过 C# 函数执行 ping 并在视图上使用 if 语句显示正确的符号
- 这有效，但意味着它会在页面加载之前运行 ping 脚本。如果有办法在 onload 块（或等效块）中调用 C# 函数，那将是一个解决方案
运行代码通过对正文的 onload 调用并将 Javascript 存储在单独的文件中
随意移动东西希望它决定工作

如果我需要提供项目其他地方的代码，请告诉我。

编辑：到目前为止我发现的一些东西...

开头指定变量的块只执行一次，无论页面上有多少个单独的字段。我通过将 spanID 替换为随机数生成器的输出来找到它。所有四个字段都收到相同的随机数。

我试过将字段封装在零件中，但无法弄清楚如何将变量获取到零件视图而不是字段视图。视图模型可能是关键？

只需在所需变量名前使用@，即可将变量传递到Javascript 部分。这导致 last 字段的数据被传递。

Answer 1

解决方案：

出于某种原因，如果我在 document.ready 块中而不是直接在 JS 函数中收集变量，则传递可以正常工作。因此，而不是

function setPingResult() {
    var elem = document.getElementById('@spanID');
    elem.innerHTML = '<div class="glyphicon glyphicon-ok-sign" aria-hidden="true"></div>';
}

$(document).ready(function () {
    setPingResult();
});

我用

function setPingResult(spanID) {
    var elem = document.getElementById(spanID);
    elem.innerHTML = '<div class="glyphicon glyphicon-ok-sign" aria-hidden="true"></div>';
}

$(document).ready(function () {
    setPingResult('@spanID');
});

如果有人能解释为什么这行得通，那就太好了。

在 Orchard 字段上多次 Javascript 调用

Multiple Javascript calls on an Orchard field

javascript

orchardcms